Gradie Sign Up Page

IndieBrew Landing Page

Snipper Landing Page

Commune Waitlist Page

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

Unifeed Blog Page

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

Hosterr Waitlist Page

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

Chirp Landing Page

{"ops":[{"insert":"Practice your CSS, loops, and fetch Javascript skills with this challenge.\n"}]}

Contrast Directory

Workside Job Board

Web Developer Portfolio

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

Personal Blog

Javascript30 Navbar

Love the work you've done and the fact that it's responsive. My only 2 comments is that the image technically isn't 'stuck' at the bottom and that the items in the footer change to a hamburger menu on mobile. Other than that, great job!


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!

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

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

<b>I actually haven't noticed the hamburger menu on mobile - thanks for pointing it out!</b>

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.

No comments design-wise, looks like you've done a good job of replicating the actual design! I'll leave the code to someone more experienced.

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, I don't have any comments design-wise! Great job :D

Looks like you've done a wonderful job, my only comment is to remove the underlines under the buttons! Can you let me know which image was missing from the asset file so I can update it? Thank you!

ahh yes I forgot the underline thank you! and the hero images for the tablet and mobile I only had the desktop image.

unless the figma design is a little off shows different assets for desktop tablet and mobile.

Thanks for reporting this, will look into it and update the Figma files! 

Great job, my only comment is to have the hamburger menu switch to an 'X' icon when active!

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. 

You've done a great job on desktop! Remove the underlines and you should be fine... But the mobile view is similar is similar to desktop and just looks as if it has been shrunken down. Take a bit more time to make it like the original.

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? 

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

Thank you so much brother, means alot 😁

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?

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

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?

I did just the website on desktop to start. I haven't done the rest yet, but I think it looks nice!

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

Yeah It is amazing thanks for the help in the footer part I didn't know how to do it so I had a look at your code thanks I do really appreciate your help

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/

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

Had to post twice because this f****** platform dosent have options to edit your submits...

In general, I was just changed name on Github so i had to change name on my github pages.

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

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 work 👍
you didn't put the icons in the second section though

Nice bro. Just update your live website link.

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

Please Download first then open document 

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

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.

Bro, a major part of making fronted is to make it as responsive as possible. 
eg : http://magabee.rf.gd/100daysofcode-2/53-snipper-landing-page/

Hamburger Button working for mobile navigation

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.

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


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!

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

Unifeed

I used this challenge to try out mint. 

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

Commune Waitlist

Excellent gradient and flexbox practice. 

Unifeed blog page using React

Snippet Template Solution

Basic vanilla landing page

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

Hosterr Landing Page

Snipper Landing Page.

Build Using SCSS

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

Gradie Sign up page

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

Gradie-Codewell

InderBrew -Codewell

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

INDIE BREW solution

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

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

Website (html5 css3 bootstrap)

Codewell Landing Page w/ mobile menu

Commune waitlist page

C.J commune demo

Gradie Sign Up

Fun, love this platform

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

Snipper Template complete 

{"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":"Build with React framework, using styled components with tailwind css\n"}]}

React Tailwind css

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

Login Page

Commune Website

login page

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

Hosterrr

Chirp Landing Page using simple SASS

Commune Waitlist Page 

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

Hosterr Waitlist Page with HTML, CSS and JS

Chirp Landing Page with Bootstrap and JavaScript

IndieBrew (HTML/CSS) by Njorthr

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

IndieBrew Responsive Code With HTML Tailwind CSS and JS

Free Hosterr Waitlist Page

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

Commne Waitlist page

Fantastic Practice!

Very simple but good landing page design.

CupACoffee

Gradie Sign up page using html and css

Snipper Landing Page Challenge

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

Solution with bootstrap 5

CSS only no Js and Bootstrap for the hamburger menu

Chirp Solution by Abdulsalamhibee

{"ops":[{"insert":"This is my first attempt at creating a responsive  website. \n"}]}

First Challenge 

{"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 use Grid, Flexbox and SCSS.\n"}]}

Commune Waitlist 

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

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

Commue Waitlist Starter Project with HTML and CSS

{"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":"Responsive IndieBrew landing page. Build with HTML&CSS.\n"}]}

Landing Page

Made with Hypertext markup language Cascading Style Sheets and JavaScript

Snipper-landing-page using html and css only