Responsive landing page using CSS Flexbox and Grid.

Community feedback

• 

  Matheus Fernandes•340

  @xtirianPosted over 1 year ago

  Hello @SonLuka, hope find you well.

  So, I'm in the same situation. So I researched for some things to make my CSS look more organized.

  So the first thing is pull apart the CSS by context with comments. Example of what I do: CSS

  /* Variables */
  :root { 
    - - primary-color: #fefefe
    - - secondary-color: #0f4a28
  }
  /* Resets */
  
  * {
    margin:0
    padding: 0
    box-sizing: border-box
  }
  
  /* Base Styles */
  
  .Button1{
  ....
  }
  .Card1{
  ....
  }
  .Card2{
  ...
  }
  
  /* Typography */
  Heading1 {
  ...
  }
  bodyText{
  ...
  }
  
  /* Header */
  And from here I'll go adding more specific atributes for the elements from top to bottom of the page. 
  And if its possible, alway mark with a comment what part of the HTML it will affect.
  

  The second tip, and I didn't used that, was creating a folder for CSS and inside it pull apart the code by context in different files.

  css(folder)
       |_ baseStyles.css
       |_ resets.css
       |_ cards.css
       |_ mainPage (folder)
                 |_ header.css
                 |_ main.css
                 |_ productCard.css
                 |_ footer.css
       |_ salePage (folder)
                 |_ header.css
                 |_ paymentCard.css
  
  
  

  The main difference s that you will have to import all the css files in diferent <link rel="styleSheet" > tags. This practice isn't so usual when you are programming just with HTML and CSS and landing pages, but if you keep your studies and progress with JS later, you probably will start some framework like ReactJS (could be another) and in this frameworks, the styles are made for each component in different files. This tip of folders are good too when you have different pages, and you can import something you already did in another and reuse, then create a file just for some specific styles.

  The last tip I have after my researches, was using a Preprocessor CSS. I started using SASS as a preprocessor and helpedme just because make CSS looks more simple than it is, and the commands and features isn't hard to learn. I super recommend you to give a try in SASS if you are confident. I learned from a youtube channel. I saw this video, took notes and instead of practice in the project that the guy is doing in the video, I practiced in one project here in FrontEnd Mentor.

  So, that's all I have to tell right now about this. Thank you and have a great weekend.

  Marked as helpful

  0

  ---

  

  SonLuka•60

  @SonLukaPosted over 1 year ago

  @xtirian I wrote some comments (not nearly enough as I should tho) in this project, but using a folder actually seems pretty good, I'm also starting with JS tomorrow. I'll definitely check SASS in future. Thank you for the tips, this was helpful!

  1