Fiber Landing Page 

Gradie Sign Up Page

Comment Module 

Commune Waitlist Page

TimeNow Landing Page

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.

This is perfect! My only comment is that in tablet size the image in the 'Diversify your portfolio' section isn't fixed to the bottom and is instead in a square that is vertically and horizontally centered. Other than that, great job! 

How long did this take you?

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

Tried visiting the links but none of them work 🤔

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

Thank you for the feedback. I fixed that issue with the align-self property of flexbox.
It took 3-4 hours to complete the project.

Very well done for only 3-4 hours of coding! 

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

Looks really good, very responsive as well. 

Love that you're using SCSS Mixins and variables, very clean!

Click the 'Sign Up' button to see the register design. 

This is so awesome, I love how you've implemented the scrollable testimonials section, VERY clean, good job!

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

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.

Coding isn't my expertise so i'll leave that to someone else, you've done a great job at making it responsive.

My comments are all spacing and font-related. You'll find that the sign up button, for example, has a different font-size than the rest of the navbar elements. There's a lot white space in all sections, I recommend you use a container with a width of 1140px. The shadows on the testimonials section are also harsh. 

Other than that, I think you've done a really great job, keep it up!



You've nailed this one IMO, great job. TimeNow is a free template and has a landing page and a pricing page, you might like it, check it out!

Well done! The 'Start Free Trial' is broken for me, i'm using Safari if that helps.

Glad you're taking the initiative to focus more on accessibility! This looks really good, my only comment would be to have the sign up page take up the entire page instead of being centered. Great job otherwise!!

Love it! Looks really clean on all sizes, you've done a wonderful job :)

Your Implementation was spot on, great work!

The animations were a silver lining to the great layout

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

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

I like the scale effect you added to some buttons, I would've never thought of using that, really cool man.
also the scrollbar it's really cool

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!

Hello! You've done great. Here are my feedbacks
-  I noticed you made use of padding with percentage as the unit on each section, this isn't a very good idea cause on a very large screen it could break the layout and make it look messy.

I'll advice you have a container class like this:

```
.container {

}
```

I'm sorry for sending the message without completing it...

.container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
}

Then you can use that class around each section of your page, allowing the sections to have the same max-width;

Also using the unit percentage isn't really the most efficient way, cause it's relative to its parent.  I advise you to learn about units like rem and em.



Hello! You've done great, I have some suggestions that you could work on 

So I noticed you made use of these properties on each section, I'm guessing you're making use of the padding for mobile devices view, which is totally cool but here another approach.

// yours
header, main, footer {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 30px;
}

// another approach
.container {
   width: 90%;
   max-width: 1000px;
  margin: 0 auto;
}

the width of 90% does give mobile devices some space, which fixes the padding. But your implementation is all good though.

Also I notice this:

<div class="header-wrap">

</div>

Also I noticed this:

<div class="header-wrap">
  <header> .... </header>
</div>

Semantically there's no need for the div element, you could use the header, main, footer elements directly.

Lastly, the solution lacks white space, majority of the elements are too close to each other. 

That's all, I hope it was helpful even though you didn't ask :)

Hello! Thank you so much for your feedback! I'll note and implement it for my next project! ^^

Hi There, I just checked your solution you have attempted it very well. Keep doing the good work. Hope you build more 🔥💜

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

create with flexbox and grid methods to help on operation on mobile phones.

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.


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

Nice bro. Just update your live website link.

https://webdevporto-codewell-bef.netlify.app/

nice site. but when you reduce the page size with ctrl - the site contents fly around

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 

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

Fiber

{"ops":[{"insert":"Recursive comment\n"}]}

Preview with sandbox

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

Gradie Sign up page

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

Nice login page

{"ops":[{"insert":"Here's my solution to the commune waitlist page. Feedback is welcome.\n"}]}

Commune Waitlist

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

{"ops":[{"insert":"Using Bootstrap and vanilla JS.\n"}]}

Fun project that took about a day

Gradie Solution 

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

Gradle Sign Up

{"ops":[{"insert":"Created using Next.js\n"}]}

Fiber Landing Page

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

Time Now

Gradie with Flexbox & Grid

Fiber Codewell Challenge

Fiber Challenge with HTML5, CSS, JAVASCRIPT, SASS

Fiber landing page with SCSS

Fiber Landing Page using SCSS 

Build Using SCSS

Slap dashie pass

Fibr landing page with accessibility and srcset

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

Fiber Lading Page, sign up incoming... 

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

Gradie-Codewell

Fiber 

This challenge flexibilizated my life

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

Gradie Sign up page with Bootstrap 5

Commune WaitList page with Bootstrap 5

Fiber Landing page solution

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

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

Sign Up Page

Comment starter page with Bootstrap 5

Codewell Landing Page w/ mobile menu

C.J Fiber Demo 

Commune waitlist page

React Tailwind css

Fiber Landing Page - Built with Gasby

C.J commune demo

 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"}]}

Fiber Landing page with signup form, slick slider carousel + mobile nav menu

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

GradieSignup

This is my first challenge ever

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

{"ops":[{"insert":"made a fully responsive react website, with mobile menu and signup page\n"}]}

Fiber landing page with react

Commune Website

login page

Commune Waitlist Page 

Gradie Sign Up solution 

Gradie 

 Solution Fiber landing page Using HTML and CSS

{"ops":[{"insert":"This is my first Codewell solution. \n"}]}

Mobile first Responsive Fiber landing page (HTML&CSS)

{"ops":[{"insert":"This is Fiber website create with both HTML and CSS\n"}]}

Gradie Layout

{"ops":[{"insert":"I made the whole thing usign the grid system of bootstrap for responsive\n"}]}

Responsive Fiber website, made using bootstrap and js

Comment Box with Tailwindcss(JIT)

{"ops":[{"insert":"Enjoyed building this landing page. However, I didn't add active states.\n"}]}

Commne Waitlist page

Fiber landing page made with html and css

Very simple but good landing page design.

CupACoffee

TimeNow Challenge (HTML/CSS) by Njorthr

Gradie Sign up page using html and css

{"ops":[{"insert":"Used html, css and js\n"}]}

Fiber Portfolio

Gradie Login Modal

{"ops":[{"insert":"Best for beginners to get knowledge of basics.\n"}]}

Finally done but  i tried  Responsive web but cant Done

nice experience

Solution with bootstrap 5

CSS only no Js and Bootstrap for the hamburger menu

Gradie Sign Up Page with HTML and CSS

Fiber Clone 

{"ops":[{"insert":"I use Grid, Flexbox and SCSS.\n"}]}

Commune Waitlist 

{"ops":[{"insert":"Any one can comment!\n"}]}

Commue Waitlist Starter Project with HTML and CSS

{"ops":[{"insert":"No Bootstrap and Js\n"}]}

Gradie Login Form

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

Fiber with HTML and CSS

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

Gradie-Login

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

Fully responsive solution with React and tailwindcss

{"ops":[{"insert":"If there is any comment or feedback lemme know\n"}]}

Solution for Commune Waitlist

{"ops":[{"insert":"Really nice challenge, I enjoyed a lot 😀.\n"}]}

Fiber full responsive with TailwindCSS

Gradie Sign Up Page Using HTML And CSS

Gradie Sign up Challenge solution

{"ops":[{"insert":"click SignUp button to see the form\n"}]}

Fiber Main page with Form Register

Fiber Codewell

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

solution commune waitlist

Commune with Tailwindcss

Commune-waitlist practice