Feedback on code structure & @media

Hi, I’m asking for feedback mainly on cleaning up the the code structure and the media queries on my Product landing page project.

I will start by saying that the project kind of got out of hand, I definitely tried to do too many things that I had no idea how to do, didn’t have a real plan for the page and it just exploded to every possible direction and as a result the code is a mess. I would like feedback on how to clean up the code. Also I feel like I did the media queries somehow wrong or the hard way, so if someone could point out what I possibly did wrong and how to make those better in the future. Thank you so much!

Your page looks good @queenofjokers. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

There are two schools of thought on media queries. Some place them as soon as needed in CSS. Others place them at the bottom so they’re grouped and easier to find.

That said, The best method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.

1 Like

Hey i just checked your website and i really love the design!
Here are a few things i would suggest you to work on.

  • Run your code through the code validator available on codepen which will make it easier for you to find and debug problems such as closing the ul tag in your navbar. Just click on analyze HTML.

Screenshot from 2021-07-10 22-58-38

  • I also noticed that you don’t have a main tag in your HTML. The main content of your website should be enclosed in a main tag because of Accessibility reason. If you want to learn more about that, i’d recommend you to go through this article.
  • code management and arrange in CSS is a really big topic and getting good at writing code that is easier to go through and debug takes a lot of experience which you can only develop through deliberate practice. There are multiple ways of going about arranging your CSS, here’s an example template that you can use if you’re just starting out.
// start out by writing the global resets or
// element styles which do not have anything to do with a particular 
// component on the page.
//example : 

body{
   margin: 0;
}

h1{
  color: red;
}

//then move onto writing styles about particular 
//components and their sub parts in the order they appear

header{
  padding: 8px;
}

header nav {
  color: red;
}

....

// Then lastly the media queries.

@media screen and (max-width: 1000px;){

   p{
    font-size: 1rem;
  }

}

I personally prefer writing media queries right after each component as i dont have to go looking for each media query if i need to modify them.

This was just a high level overview on the stuff you can do if you wanna take a deep dive then i would recommend you to visit this website.

Hope this helped! :slightly_smiling_face:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.