Fiber Landing Page 

Gradie Sign Up Page

{"ops":[{"insert":"Perfect to practice creating graphs, CSS grid, and much more.\n"}]}

Ideate Dashboard 

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

Hosterr Waitlist Page

{"ops":[{"insert":"Perfect to practice your responsive design, flex and/or grid skills.\n"}]}

Accountable Social Media Feed

{"ops":[{"insert":"Perfect for practicing HTML/CSS and simple creation/deletion in Javascript.\n"}]}

linkProfile App

Workside Job Board

Web Developer Portfolio

Javascript30 Navbar

Hey Loctong! 

Looks like you've got this pretty good on 1920x1080 but it looks like it breaks at smaller breakpoints (<1080, you can check how it looks on other devices by using the developer tools on any browser), so that may worth looking at using Media Queries. 

Good start though!

Hi, moeminm!
 Thanks for your comments.
 I am on the way to update 
Thanks


btw, It is working well with Ipad (768) :D

Hmm, weird, iPad looks broken on my screen (maybe cuz i'm using Safari 👀)

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!

Looks REALLY good. My 2c are as follows: The image on the second post seems VERY stretched out on Safari (looks fine on Chrome and Firefox). For the live stream on the right, ideally the live, viewer count, and title should be actually components instead of an image. 

Other than that, great job! 

Also just wanted to add that I've seen your other Codewell challenges and you seem to have a really good grasp on converting designs to actual websites in terms of dimensions, keep at it man!

Thanks for the advice and encouragement. It was a pleasure to read that my work is being done well. I will seek to improve it even more. Thank you very much man 😀

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

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

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

Nice work!
Here are some thoughts from looking at this.
I liked your semantic use of html elements including the time element.
I think the width on the header is a bit suprising:     width: clamp(374px, 86vw, 1240px);
I think some padding around it might be simpler (20px for mobile, 40px for tablet and up).

The input is not an input. Positioning the button in an input is tricky though.
The min-width for the media query on the final large screen grid layout is 1024px. Which a few hundred pixels less than the actual width of all the content so it overflows for some screen sizes and messes up your header too.



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? 

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 :)

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

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

Thank you so much brother, means alot 😁

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?

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

- raster image of diagram should be made vector, maybe using the svg path from the figma file, and adding a color linear gradient.
- colors are grey for all the cards, but should be white.
- scroll behaviour is non-existent. There is going to be lots of rows on the tables.
- margins/paddings are all different to the figma file.
- font sizes and font weights are all different to the figma file.
- horizontal scrolling is needed to see the referral image, and then the top-nav logos don't stay in place.
- everything overfows its containers with a small window. Would recommend fixed sizing for the graph / referral vertically to prevent overflow (e.g. 400px).

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

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.

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

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.

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

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

Uploaded wrong netlify link, not in the index.html

Correct link: https://dazzling-druid-2cd454.netlify.app

Hello friend. At least in mobile when you open the menu and then products, you can close the menu En products is still visible. You can keep scrolling the page and touching outside the menu and it won't disappear until you select a product. Hope little feedback helps

Hey FreshtaM you made a wonderful project  as same as design  is provided. I think you do more work on it's mobile first version you can clearly se that your nav bar is started breaking in 1222px so at that time you could hide it as it is not looking appealing at that time. And I think you forgot to add functionality (products) in nav bar as given in design.

Hi there! Your project concept for the Hosterr Waitlist Page Challenge looks fantastic! I'm impressed by your attention to detail, especially the subtle animations, responsive design, and overall user experience. It's clear that you've put a lot of thought and effort into this.

I'd love to see your project in action when it's deployed. However, it seems like there might be an issue with the current deployment. Can you please check and ensure that your project is live and accessible? I'm excited to take inspiration from your work to enhance my own coding and design skills.

Great job on your project, and I look forward to seeing it live soon!

Please review my source code

Basic vanilla landing page

Accountable

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

Hosterr Landing Page

Fiber Landing Page

Slap dashie pass

Fibr landing page with accessibility and srcset

Fiber Lading Page, sign up incoming... 

Fiber 

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

Hosterr page with Bootstrap 5

Fiber Landing page solution

C.J Fiber Demo 

React Tailwind css

Fiber Landing Page - Built with Gasby

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

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

Sign Up page

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

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

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

Fiber landing page with react

login page

{"ops":[{"insert":"Hosterrr Landing page.\n"}]}

Hosterrr

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

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

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

Free Hosterr Waitlist Page

Fiber landing page made with html and css

CupACoffee

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

Gradie Sign Up Page with HTML and CSS

Fiber Clone 

Fiber

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

Gradie Login Form

Hosterr Waiting Page by nadineamanda.com

Tailwind, grid, flex, typescript

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

Gradie-Signup-Page

{"ops":[{"insert":"Used HTML and CSS, It was an interesting project\n"}]}

Solution using flex box, responsive units, and Javascript.

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

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

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

{"ops":[{"insert":"It was an awsome project to practice.\n"}]}

{"ops":[{"insert":"Built with Bootstrap 5.\n"}]}

Fiber - Create Portfolio in Minutes

Grdie Sign Up Component

Gradie signup page using HTML and CSS

Fiber Landing Page with SCSS & JS

Fiber Project Made with SCSS and Bootstrap5

{"ops":[{"insert":"Landing page built using html css and javascript.\n"}]}

Gradie Login Page

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

GRADIE SIGN UP PAGE

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

Gradie sign up solution

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

Gradie Sign Up

Fiber Landing page

{"ops":[{"insert":"Great real life project\n\n"}]}

Fiber solution by Mr. Ravi

Fiber Landing Page by Hayden

{"ops":[{"insert":"Any feedback would be great!\n"}]}

Fiber landing page

Workside template

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

Gradie solution without  a  framework

Solution to sidebar in tablet mode

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

Fiber Started Files

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

Fiber Challenge

{"ops":[{"insert":"This is my first solution in codewell\n"}]}

My first challenge on Codewell

Hosterr Waitlist

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

SignUp Page with SASS

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

hosterr

Hosterr Waitlist Page

My take on the codewell hosterr wailist page