Gradie Sign Up Page

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

Accountable Social Media Feed

Multi Step Form 

{"ops":[{"insert":"Perfect for practicing your layout and responsive design skills.\n"}]}

Arclight Landing Page

Web Developer Portfolio

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

Personal Blog

Javascript30 Navbar

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

Looks really good, very responsive as well. 

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. 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 good, on mobile though the checkbox overflows and goes over the container.

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.



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? 

New Link:
https://bluedeepart.github.io/codewell-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.


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

Nice bro. Just update your live website link.

Instead of renaming your images, go to your HTML files and rename your image exactly as they appear in your image or assets folder. Also note that GitHub is case sensitive, please.

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.

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

Bro can you provide me the zip file of this project , I don't have pro access, plzzzz

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

Gradie Solution 

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

Gradle Sign Up

Gradie with Flexbox & Grid

Accountable

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

Gradie Sign up page

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

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

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

Sign Up Page

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

Sign Up page

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

Gradie Sign Up solution 

Gradie 

Gradie Layout

CupACoffee

Gradie Sign up page using html and css

Gradie Login Modal

Gradie Sign Up Page with HTML and CSS

Gradie Login Form

Tailwind, grid, flex, typescript

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

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

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

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

Gradie solution  

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

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

Gradie sign up solution

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

Archlight Landing Page using CSS3 Only

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

Gradie solution without  a  framework

{"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":"Made with HTML and SASS\n"}]}

SignUp Page with SASS

Gradie Login Panel

Gradie Signup Page

Gradie Page

{"ops":[{"insert":"Personal Blog by Deepart\n"}]}

Personal Blog by Deepart

Gradie Sign UP

{"ops":[{"insert":"This was an interesting page and I had fun making it :)\n"}]}

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

Tela de Login

sign up page

Gradie sign-up

{"ops":[{"insert":"Made with flexbox and i started writing my codes from mobile view \n"}]}

{"ops":[{"insert":"styled using tailwind CSS mobile first approach.\n"}]}

Gradie-signup-page

Gradie Sign up

a bit tricky for me

JavaScript30_Navbar

{"ops":[{"insert":"A responsive landing page of Ondeck - Video calling service app\n"}]}

Ondeck - Video Calling Service

{"ops":[{"insert":"Solution to On Deck landing page built with nuxt.js and fully responsive\n"}]}

On Deck solution built with nuxt.js

accountable-starter

Page made with Tailwind CSS

{"ops":[{"insert":"Gradie Sign Up Page (HTML and CSS)\n"}]}

{"ops":[{"insert":"Ondeck - Javascript30 Navbar  Solution\n"}]}

Javascript30 Navbar Solution

Multi-Step-Form-Starter

Gradie signup form

{"ops":[{"insert":"solution to a codewell exercise\n"}]}

ondeck

Arclight responsive using flex

{"ops":[{"insert":"this is my solution to the exercise\n"}]}

Solution to codewell navbar with js

Ondeck

{"ops":[{"insert":"I have coded for desktop/pc.\n"}]}

{"ops":[{"insert":"Its responsive I'll try my best. Open for feedback\n"}]}

LogIn Page

Barra de navegacion con JavaScript

JavaScript NavBar

{"ops":[{"insert":"Responsive, with grid and js. \nWithout figma file :( \n"}]}

CodeWell01 - Navbar

{"ops":[{"insert":"Helped me learn a lot about flex and responsive web design \n"}]}

Javascript30 Navar

{"ops":[{"insert":"This project was a bit challenging 😅\n"}]}

Navbar javascript

{"ops":[{"insert":"i really hope to give me some advice about my first project\n"}]}

my first portfolio

rhis is my first website site 

{"ops":[{"insert":"Interesting project\n"}]}

js30NavBar

Eyihbanner's WebDev PortFolio 

{"ops":[{"insert":"interesting design\n"}]}

Archlight 

Solution to web developer portfolio

{"ops":[{"insert":"It was quite interesting working on this project.\n"}]}

Hi, this is my first page with HTML and CSS!

JavaScript30 Navbar 

Developer's Portfolio

Developer-s-Portfolio challange

javascript navbar

Developer_Portfolio_Starter_Files_5c94536d53

landing challenge sol

{"ops":[{"insert":"Gone pretty well ! added the responsive menu too.\n"}]}

Gone well

{"ops":[{"insert":"Web Developer Portfolio Solution\n"}]}

landing page navbar

Arclight Landing page with React and styled components

navbar

portfolio built with html and css

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

javascript30 navbar

Solution for web developer portfolio | Codewell Challenge

{"ops":[{"insert":"I only use a little bit of Javascript for mobile navigation.\n"}]}

This is my solution

{"ops":[{"insert":"Here is my solution for Web Development Portfolio.\n\n\n"}]}

Web Development Portfolio

{"ops":[{"insert":"Here is my solution for Web Development Portfolio.\n"}]}

Web Development Portfolio Solution

Codewell.cc Challenge-OrangeDev

Challenge Accepted and Completed

Developer portfolio

{"ops":[{"insert":"This is my first HTML & CSS Coding very interesting to do. \n"}]}

Signup_Webpage

{"ops":[{"insert":"Why people here do not give feedback, Is it expansive.\n\n"}]}

gradient landing page

{"ops":[{"insert":"This is a desktop view of a developer portfolio not yet responsive\n"}]}

{"ops":[{"insert":"It was very difficult but I managed to get it done. And it is responsive. \n"}]}

social-media

accountable-starter

Tailwind, grid, flex, typescript