Gradie Sign Up Page

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

Unifeed Blog Page

Remix Template

{"ops":[{"insert":"Great template to practice your CSS transform and flex skills.\n"}]}

Hosterr Waitlist Page

YelpCamp by Colt Steele

Web Developer Portfolio

Javascript30 Navbar

Oh wow, that is CLEAN! 🔥I also love the navbar at the top with all the different challenges you'll be working on. Honestly, no comments to add design-wise, you've done a great job. I'll leave the code for someone more experienced.

Love this, did you use any frameworks for this or just pure HTML and CSS?

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.

Tried visiting the links but none of them work 🤔

Source code link seems to be working fine, the live is still down, though

Your source code link seems to be working fine, but not the live project one 🤔

Looks really good, very responsive 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.

Got the same feedback as yours, everything looks great except the hamburger menu, maybe you could even add a placeholder to the email field.

Great job!

Thank you so much for linking moderncss.dev, looks like a really good resource! Perfect take on this project for accessibility, and you've executed it well.

Looks really good, I don't have any comments design-wise! Great job :D

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

Hi, did you have a problem with your images?

Mine has a weird background thing, I can't get rid of.

Great work!
I can't for the life of me get rid of the weird background thing my images have


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? 

This is wild, that navbar is a really cool idea to showcase all of your solutions!

Great! but the menu shows to unfolded in mobile version 

Really good job man. Try to cap the size of the image on the right side though. Just so it doesn't overflow on larger screens. Maybe flexbox would help make the positioning easier?

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.

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.

Good job!!! I think it will be better if you write logo as a tag with function onclick reload page  

Great work. Congratulations .
One thing , maybe the dark mode should be global and affect other pages as well.
Happy coding

Oh, thank you for your feedback. I'll do that.

Thank you for your feedback, ill look into it.

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 ? 👀

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 🚀🚀

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.

thats good 

i have one advice instead of using 

Hey, really great solution provided! I just have one piece of feedback, can you try and fit the page in 100vh? Because I think that's what is needed in the challenge

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?

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

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


The desktop mode on mobile has issues with proper alignment 

Hover animation on navbar links is so cool. How you do it?

Nice bro. Just update your live website link.

updated hamburger menu with small javascript code

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

You didn't set up GitHub Pages to see the website live.

sorry for this ill be deleting this i've made a mistake in choosing the right link


Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

Please Download first then open document 

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

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. 

hi bro how your code in live project please help me the way to live my code .....

Great work Nathan. Just a few simple suggestions from my side. First of all I use a 1920 wide display and I feel the font size is a little small, and it would be even better if it is bigger. In your website the main header's width is small which makes it awkward to see, try using width: 100% and control that with max-width so that it would be responsive. The last thing I noticed is that in the image part the second image is bigger than the first one,  try object-fit: cover in your code. Hope you find it helpful...✌

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.

Gradie Challenge

{"ops":[{"insert":"Gradie Sign Up Page for mobile, tablet, and desktop screens\n"}]}

Unifeed

Gradie Sign up page

{"ops":[{"insert":"This was a nice little challenge. Thanks for creating it.\n"}]}

Nice login page

{"ops":[{"insert":"I don't know how to make it fully responsive\n"}]}

My Gradie Login Page

{"ops":[{"insert":"Completed this challenge using Generic HTML and CSS.\n"}]}

Gradie Sign Up

Unifeed blog page using React

Gradie Solution 

{"ops":[{"insert":"Gradle Sign Up Page using SCSS\n"}]}

Gradle Sign Up

Basic vanilla landing page

Gradie with Flexbox & Grid

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

Hosterr Landing Page

Build Using SCSS

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

Remix

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

Gradie-Codewell

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

Gradie Sign up page with Bootstrap 5

Hosterr page with Bootstrap 5

{"ops":[{"insert":"Developed without any framework, just pure css\n"}]}

{"ops":[{"insert":"For this challenge I used flexbox\n"}]}

Sign Up Page

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

Unifeed Blog

Hosterr Starter Landin page with  HTML, CSS, JavaScript &  GSAP

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

Sign Up page

{"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":"Hosterrr Landing page.\n"}]}

Hosterrr

Gradie Sign Up solution 

Gradie 

Remix in the work

finishes this with HTML, CSS and JS

Hosterr Waitlist Page with HTML, CSS and JS

{"ops":[{"insert":"This was encode with practically effective HTML and CSS language........\n"}]}

Hosterr website design 

Hosterr waitlist landing page

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

Free Hosterr Waitlist Page

CupACoffee

Gradie Sign up page using html and css

Tailwind grid experiment

Gradie Login Modal

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

Hosterr Waiting Page by nadineamanda.com

{"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":"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

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

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

Unifeed Blog Template using Bootstrap 5.1

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

Unifeed Blog - Template (Challenge)

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

{"ops":[{"insert":"Hosterr page using Grid and flexboxx\n"}]}

Hosterr Page using Grid

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

Gradie solution  

Hosterr Website

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

YelpCamp Codewell Challenge

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

Gradie sign up solution

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

Remix Website

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

Gradie solution without  a  framework

Yelpcamp by Colt Steele

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

Gradie solution by psplawski.dev

{"ops":[{"attributes":{"bold":true},"insert":"Gradie Sign Up Page"},{"insert":"\n"}]}

{"ops":[{"insert":"This is my solution. Any feedback would be appreciated.\n"}]}

YelpCamp - Solution

{"ops":[{"insert":"Great challenge, great for improving flex skills \n"}]}

{"ops":[{"insert":"That's my first project with sass.\n"}]}

YelpCamp Solution

Yelp Camp Project with React JS

{"ops":[{"insert":"Any improvements or suggestions are more than welcome.\n"}]}

Simple html, css, and jquery

Hosterr Waitlist

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

Created with HTML and CSS, added a little bit of JavaScript to toggle the menu

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

SignUp Page with SASS

Yelp Camp with next js & firebase 

{"ops":[{"insert":"The challenging part was making those images responsive in this page.\n"}]}

YelpCamp by Katsiaryna Talkachova

YelpCamp using HTML, CSS, Flexbox, Js

Yelpcamp