Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using CSS Flexbox and Grid.

SonLuka 60

@SonLuka

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first 'bigger' project. Overall I'm happy with it, it took me some time but I learned a few things. I would appreciate any help with my CSS code, how to make it cleaner and more accessible to other programmers. Thanks!

Community feedback

@xtirian

Posted

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

@SonLuka

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord