Gradie Sign Up Page

IndieBrew Landing Page

TimeNow Landing Page

{"ops":[{"insert":"A blog page perfect for practicing both Flex and Grid. Beginner level.\n"}]}

Unifeed Blog Page

{"ops":[{"insert":"A fun and simple project to practice responsiveness and positioning.\n"}]}

Meeet Waitlist Template

Multi Step Form 

{"ops":[{"insert":"Perfect for practicing layouts, flex/grid and scrollable components.\n"}]}

Chirp Landing Page

Workside Job Board

YelpCamp by Colt Steele

Web Developer Portfolio

{"ops":[{"insert":"Perfect for practicing modular components and responsive design.\n"}]}

Personal Blog

Well done! My only comment is that it isn't completely responsive on mobile, there's margin on the left of the blog posts after the main one.

This is awesome, love the little animation you've added in the hamburger menu on mobile as well!

What problems are you having when trying to use the font face? My only comment is to use align-items: center; on this class 'articles__secondary--container' to center the text with the image, other than great job, very responsive!

Thank you moeminm !
I dowloaded the font face Manrope, but it's as if it wasn't taken into account and the code uses Verdana instead :

@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope-VariableFont_wght.ttf") format ("truetype");
}

* {
  margin: 0;
  font-family: "Manrope", "Verdana", "Times New Roman";
}

Did you import the font? Check this article out https://css-tricks.com/snippets/css/using-font-face/

Alternatively, you can just link the font in the <head> using this: 

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">

and adding font-family: 'Manrope', sans-serif; in the CSS.

Great job, looks like the content isn't constrained to a certain container, though!

Correct link to live demo
https://competent-elion-cbde7a.netlify.app

Hi. Great work. I dwelled into this for a while. I'm reckon there might be an autonomous way but here is a simplified syntax.

<h1>Meet New Entrepre<span style="z-index: 4;margin: 0;">neurs</span></h1>

Instead of using two spans, just use one and remove all the margins from that span. 

Both the pages in one:
https://codepen.io/ignitis/pen/PomKLRZ

Looks good, on mobile though the checkbox overflows and goes over the container.

Great job 🔥My only comment is that the testimonial section looks so squished on tablet. 

Your code is very nice. 
I am from India. Just wanted to connect with you. 
If you don't have problem, Can you please tell me,
How many years of experience do you have in coding? And what are your skills? 

Well done Jaspal, your solutions are always so well done! 🚀

First thing Ur Twitter logo is fixed change it. And responsiveness is sucked first divide everything in parts and make it full responsive first like logo first then the main section then the footer.

Thank you so much brother, means alot 😁

Great! but the menu shows to unfolded in mobile version 

Hey there, could you please let me know what assets were missing so I can update the files, everything's included from my end but i'd love to double-check, thanks! :) 

Good job Ait, just one note, viewing campgrounds shouldn't prompt users to login, they should be able to view campgrounds without logging in.

Thank you @moeminm,
I've made the changes to meet your requirements.
So user can see campgrounds. but needs to authenticate in order to add a campground or review one.

Project completed.
Users can register, login, add their own campgrounds, and review others campgrounds.
For the image I added an image file upload instead of typing the image url.

Thank you Codewell for this challenge.

the icons or svgs on the features section are missing, as you can see on the live project that I've submitted I substitute the twitter icon for those.

I don't know how to work with svg can you help?

There was an issue on post comment, some users kept tapping the post comment button.
 Fixed now, I added a spinner and disabled the Post comment button on form submit. Thank you everyone and happy coding.

Hi, good job 👏, but the menu doesn't work on mobile devices.

Could you share your solution with me? I'm rather new to coding and this would be a great learning experiance for me. 

You can click on 'View Source Code' to see the solution.

Great job Shin, looks like newly added camps are not persisting when you reload the page, perhaps that's something you could Google & learn more about!

Nice work ! You’re definitely not a learner 😮‍💨. I’m done designing the whole project but no JavaScript skills yet. Learning that atm. Anyways where did you get your react training from ? 👀

It's great. I really like your idea for the mobile sidebar.

Awesome work! Everything looks great and I love how you've handled the search function, viewing camps throws me an error though! "Application error: a client-side exception has occurred (see the browser console for more information)." — this happens whenever I view any camp. 

yea i was working on comment section now it's working fine 🚀🚀

My files dont contain the 6th avatar, is there any way i can get it please?

it's not responsive only good in mobile view but open in big screens everthing breaks

yes, I forgot to mention that while submitting, only mobile version is ready and also missed search functionality.
Currently working on another urgent project but I submit semi final for review and feedback about current status.

How did you figure out the colors and the gradient? Great work btw!

Thanks bro, I took colors from figma file, gradient form previous solutions 🥺, or make it on special service(i dont remeber exactly)

New Link:
https://bluedeepart.github.io/codewell-challenge/

Good to see the page, but in laptop screen size I see twitter logo coinciding with button.

got the link to the live site wrong...... here's the correct link eivo-chirp.netlify.app

you can use animate on scroll, here is the github repo:
https://github.com/michalsnik/aos

Wow. Clean coded and responsive one. Amazing :) 

Thanks. On a scale of 1 to 10 please rate my work.
Can I show this to recruiters?

If you pay the $8 monthly, you get the figma files. This file is kind of like photoshop where you can extract images (i.e. the 6th avatar). You can also find the width and height of things, the line height etc. You can use the ruler tool to to measure distances. 

Alternatively, you can also snippet tool the extract and save it as an image and import it into your html, give it a class and change the width and height to replicate it to the best of your ability.

Hey, I've seen your repository, you've made some really cool projects.

Nice work 👍
you didn't put the icons in the second section though

dont used fixed size like px if yout want responsive use this % instead.

Hello, can anybody help me? I  finished the desktop view of this project using Bootstrap. Really simple: one row, two cols, and flex column layout for the text, but in order to make it responsive the way it's displayed on the picture * logo, picture, and description* cannot be done the way it's coded. I would have to put the logo outside of the row which is not a good option.. Any solutions? Same thing for the table view. Thank you

If there's any changes or improvements I can make please let me know.

You have done a great job!!!!  Do you have used a lot of backend technology too. Because literally, your solution can launch and use as business website. It is so interactive. Are you a senior fullstack developer? Can you give any advice to me? I am beginner. I want to make my website interactive and can leave comments and login. Can you name the process and order and what tools and language you used in this project. Thank you. 

box-shadow: 0 0 10px #ddd;
this shadow will be better.

You did so well. I want to know a few things about Bootstrap5.

Author: The issue has been fixed.  A simple media query on landscape orientation was sufficient for this slight re-adjustment.

I had issues when I viewed the page on my mobile phone, it all changed from what it was on the developers tool screen size for mobile, the issue now is, I don't know the specific breakpoints in my source code that I'll track modified and correct so that the page won't have issues.
I don't know what breakpoints to track, how can I do that

Hello Nicholas, you should have tried hiding the get-in-touch button for the mobile design, asides that, the code is Perfect.


Also the link you provided to view the source code isn't for this developer portfolio challenge, try making an adjustment, as I'd also like to see the code and check for the possible ways I've made mistakes while writing my own code for the same challenge.

Moreover, what was the breakpoints you used in designing for mobile and desktop?

The designs I Made for my mobile doesn't seem like the mobile design when I published the challenge and viewed it on a mobile phone, I'd like to know how you did yours or if you experience the same difficulty.
Thank you

I did web design and responsive design (for tablets and mobile phones)

Images need to be inside the container to be responsive to window changes

hello please i need your help. i downloaded the files but i do not know how to get the colors and some others things about the page


Nice ! Maybe just add a justify-content: center for the first section. On a wide screen the first section stay on the left.

Bro the dark mode is so bad. Consider changing the color palette of it

Unifeed

I used this challenge to try out mint. 

Excellent gradient and flexbox practice. 

Unifeed blog page using React

{"ops":[{"insert":"I build this is site with Scss.\n"}]}

Time Now

Build Using SCSS

{"ops":[{"attributes":{"code-block":true},"insert":"\n"}]}

InderBrew -Codewell

INDIE BREW solution

{"ops":[{"insert":"Easy with bootstrap grid :D.\n"}]}

Unifeed Blog

{"ops":[{"insert":"it's a good challenge,i learned more from it , and I advice anyone to do it\n"}]}

Website (html5 css3 bootstrap)

Meeet Challenge Solution

{"ops":[{"insert":"Purely used the Bootstrap 5 base classes to structure and style the form.\n"}]}

 TimeNow/Pricing with Bootstrap 5

{"ops":[{"insert":"SignUp page\n\n-HTML\n-CSS\n"}]}

Sign Up page

{"ops":[{"insert":"Build with react, tailwind css and styled component. \n"}]}

React Tailwind css

{"ops":[{"insert":"This is an awesome challenge.\n"}]}

Completed using Bootstrap

{"ops":[{"insert":"Please provide your value able feedback.\n"}]}

GradieSignup

{"ops":[{"insert":"Sign up form with Sass\n"}]}

Gradie Sign up Page

Mobile First | HTML, CSS, JS

{"ops":[{"insert":"Hi, I created the Login Page with pure HTML and CSS.\n"}]}

Login Page

login page

{"ops":[{"insert":"Comments and suggestions are welcome.\n"}]}

Chirp Landing Page using simple SASS

Gradie Sign Up solution 

{"ops":[{"insert":"pls, help review my work. your feedbacks are very important to me\n"}]}

Gradie 

finishes this with HTML, CSS and JS

Chirp Landing Page with Bootstrap and JavaScript

IndieBrew (HTML/CSS) by Njorthr

Done with Grid and Flex box

Gradie Layout

{"ops":[{"insert":"Challenge built with HTML, CSS and JavaScript\n\t\t\t\n"}]}

Unifeed Blog 

Finished This Challenge with HTML CSS and JS

IndieBrew Responsive Code With HTML Tailwind CSS and JS

CupACoffee

TimeNow Challenge (HTML/CSS) by Njorthr

Gradie Sign up page using html and css

Tailwind grid experiment

Gradie Login Modal

{"ops":[{"insert":"Made it using html and css , responsive for mobile devices to laptop . \n"}]}

IndieBrew landing page and sign-up page

Chirp Solution by Abdulsalamhibee

{"ops":[{"insert":"This is a clone of the chirp Template \n"}]}

Chirp Template clone

Gradie Sign Up Page with HTML and CSS

{"ops":[{"insert":"I made it with Html Sass and some JavaScript\n"}]}

{"ops":[{"insert":"Anyone can comment :)\n"}]}

Unifeed Blog Template with HTML and CSS

Gradie Login Form

{"ops":[{"insert":"I don't know if my work is correct, I'm just a newbie in web development\n"}]}

{"ops":[{"insert":"I will accept any feedback\n"}]}

Gradie-Login

Unifeed Blog Page (HTML&CSS)

{"ops":[{"insert":"I've created the CSS using grid and flex.\n"}]}

codewell-gradie-sign-up-starter

{"ops":[{"insert":"Responsive IndieBrew landing page. Build with HTML&CSS.\n"}]}

IndieBrew Landing page 

{"ops":[{"insert":"Html and CSS only\n"}]}

IndieBrew landing page

{"ops":[{"insert":"I have finished this one using CSS3 and JS for form validations\n"}]}

Form with form validations

Gradie Sign Up Page Using HTML And CSS

Multistep form concept with Drag and Drop API

Gradie Sign up Challenge solution

{"ops":[{"insert":"This is my first project in codewell, enjoyed doing in it.\n"}]}

Gradie-Signup-Page

{"ops":[{"insert":"meh, it's made as your challenge directed\n"}]}

Gradie Solution

{"ops":[{"insert":"This Gradie Login page is done using HTML and CSS.\n"}]}

Gradie Login page

Finished Using Tailwind CSS and Semantic Tags

{"ops":[{"insert":"Any feeback will be appreciated.\n"}]}

Unifeed Blog Template using Bootstrap 5.1

Chirp landing page made with html , css and Bootstrap

My solution without any framework, just vanilla CSS. No javascript yet.

{"ops":[{"insert":"Built with Grid css and Flexbox.\nI hope your feedback\n"}]}

Mi solucion al reto

Unifeed Blog - Template (Challenge)

{"ops":[{"insert":"I would love to hear your feedback 😁\n"}]}

{"ops":[{"insert":"TimeNow pages made using html , css and bootstrap\n"}]}

TimeNow main page and Price page

{"ops":[{"insert":"Made with html ,css with flexbox\n"}]}

Gradie solution  

{"ops":[{"insert":"Your feedback and suggestion are welcome!🤗\n"}]}

Chirp Landing Page using Bootstrap and SASS

chirp landing  page

Grdie Sign Up Component

Gradie signup page using HTML and CSS

Gradie Login Page

{"ops":[{"insert":"Learn how to build a responsive website.\n"}]}

GRADIE SIGN UP PAGE

Chirp Landing Page Using Bootstrap and CSS

I used animations, top down approach and mobile first design, grid flexbox and object fit

{"ops":[{"insert":"Made with HTML and CSS\n"}]}

Meeet-waitlist-template

YelpCamp Codewell Challenge

{"ops":[{"insert":"I made this challenge using html, css and js.\nAny feedback would be great.\n"}]}

Chirp Landing page using CSS grid and Flexbox

{"ops":[{"insert":"noob "},{"attributes":{"align":"center"},"insert":"\n"}]}

Gradie sign up solution

{"ops":[{"insert":"Made using Bootstrap 5.1. Any feedback will be welcome.\n"}]}

{"ops":[{"insert":"Technologies: Sveltekit, Tailwind CSS, Github Pages\n"}]}

Gradie Sign Up

{"ops":[{"insert":"I have learn a lot by making this real life template with starter files.\n"}]}

indiebrew solution

IndieBrew Landing Page with Responsive menu

Workside template

{"ops":[{"insert":"Made with html,css with flexbox\n"}]}

Gradie solution without  a  framework

{"ops":[{"insert":"it was little bit hard, i used scss\n"}]}

Chirp solution

Yelpcamp by Colt Steele

Chirp Starter files

{"ops":[{"insert":"Used:\nPARCEL\nSCSS\nSTYLELINT\nFLEXBOX\nCSS GRID\nGITHUB-PAGES\n\n"}]}

Developer Portfolio

Website portfolio

portfolio website challenge