Spense Landing Page

Fiber Landing Page 

Comment Module 

Unifeed Blog Page

Ideate Dashboard 

Newsletter Popup Template

Hosterr Waitlist Page

Chirp Landing Page

Workside Job Board

YelpCamp by Colt Steele

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

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

Hi brother, I believe you didn't push up all your changes. Your repo is pretty empty.

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! 🚀

Thank you so much brother, means alot 😁

Great! but the menu shows to unfolded in mobile version 

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

Please review my source code

Fibr landing page with accessibility and srcset

Unifeed Blog

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

Fiber with HTML and CSS

Spense.Landing page

Solution using flex box, responsive units, and Javascript.

Finished Using Tailwind CSS and Semantic Tags

Unifeed Blog - Template (Challenge)

{"ops":[{"insert":"made  with grid layout and flexbox\n"}]}

Comment page  with html and vanilla css 

{"ops":[{"insert":"Developed using CSS Flexbox.\n\nI used modal to visualize the PopUp.\n"}]}

Newsletter Popup Starter Files

{"ops":[{"insert":"it was a tricky one but managed to complete.\n"}]}

Hosterr - Web Hosting Site

Naveen Codewell Portfollio

{"ops":[{"insert":"This is my solution. Made with a MERN stack.\n"}]}

Yelpcamp-solution

{"ops":[{"insert":"Created with React, Sass, Vite\n"}]}

Hosterr

My solution for Yelpcamp challenge

Barra de navegacion con JavaScript

Unifeed Blog page

{"ops":[{"insert":"This is a basic login page with some additions into it .\n"}]}