Spense Landing Page

Fiber Landing Page 

Gradie Sign Up Page

Snipper Landing Page

Newsletter Popup Template

Hosterr Waitlist Page

Accountable Social Media Feed

Meeet Waitlist Template

Chirp Landing Page

Web Developer Portfolio

Javascript30 Navbar

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

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

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

Correct link to live demo
https://competent-elion-cbde7a.netlify.app

Hi. Great work. I dwelled into this for a while. I'm reckon there might be an autonomous way but here is a simplified syntax.

<h1>Meet New Entrepre<span style="z-index: 4;margin: 0;">neurs</span></h1>

Instead of using two spans, just use one and remove all the margins from that span. 

👋Hi Moemin!

👍Good job on this one! I have some suggestions to improve this solution:
* For the company logos section, I recommend to make it one column on mobile, since right now they are too small on my mobile device.
* I recommend to always use double quotes instead of single quote for all HTML attribute, like this. It is just common practice.

<div class="container"></div>

* For all img tags, you need to have alt (alternative text) attribute. You can leave the `alt=""` empty if the images are decorative only.
* For the "Get Started" button, you should have `type="submit"` since that will be submit an email if this is a real website.
* I recommend to use `ul` and `li` tags for the list of links and the list of company logos. 
* Heading tags must go in order, which means you need to use h1, then h2, then h3, and so on.
* I recommend to use `rem` or sometimes `em` instead of `px`. Using `rem` or `em` will allow the user to control the size of your page based on their browser setting.
* I recommend to wrap all your content except the footer with `main` tag.
* For the `footer`, I recommend to use `footer` element instead of a `section` tag.

Tips for validating your code:
* Always validate your HTML first before you upload to the internet. You can use this official HTML validator from W3C
Link:
https://validator.w3.org
* Also for the CSS:
Link:
https://jigsaw.w3.org/css-validator/

That's it! And keep learning!

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.



Quality feedback, thank you vanzasetia for taking the time to jot all this down. Can't say I disagree with anything, appreciate the support!

First thing Ur Twitter logo is fixed change it. And responsiveness is sucked first divide everything in parts and make it full responsive first like logo first then the main section then the footer.

This is amazing, i'll feature this in the next community highlight on Twitter and the newsletter! 🔥

If you pay the $8 monthly, you get the figma files. This file is kind of like photoshop where you can extract images (i.e. the 6th avatar). You can also find the width and height of things, the line height etc. You can use the ruler tool to to measure distances. 

Alternatively, you can also snippet tool the extract and save it as an image and import it into your html, give it a class and change the width and height to replicate it to the best of your ability.

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

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

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

My Gradie Login Page

Accountable

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

Hosterr Landing Page

Fiber Landing Page

Fiber 

React Tailwind css

Meeet Challenge Solution

Spense using bootstrap

Spense w/Youtube solution!

Snipper Landing Page Challenge

Fiber Clone 

Chirp

The challenge on responsiveness and positioning

MikeAttah's Web Developer Portfolio Solution

newsletter challenge

techGuy08's Web Developer Portfolio Solution

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

Tela de Login

{"ops":[{"insert":"For the first time, I've learned many things with this small project.\n\n\n"}]}

Developer Portfoilio

{"ops":[{"insert":"i only get 5 avatars :(\n"}]}

not perfect

{"ops":[{"insert":"Create landing page using Html, CSS, Javascript.\n"}]}

a bit tricky for me

Fully responsive Chirp Landing Page

JS30 Navbar Challenge

Gradie | Vite + Tailwind

{"ops":[{"insert":"I have completed the given challenge as mentioned in the design.\n"}]}