P
@wideirp
What specific areas of your project would you like help with?
This is my first time using Sass. I would like to know any tips to help me structure my Sass better. I feel like the mixins could be simplified.
Mikov
@mikov144All comments
- @mikov144
Hi! It's generally a good practice to divide your sass styles into a different modules (.scss files) and then @import them inside of your style.scss. Or @use, but variables and mixins won't work with it, so you gonna have to add them to the beginning of each scss file (if needed) with:
@use 'variables' as *;@use 'mixins' as *;Good luck!
Marked as helpful - @flaviocmbWhat are you most proud of, and what would you do differently next time?
-
Better understanding different HTML elements.
-
Studing the aside tag, found that it is used as a call-out box Aside definition from web.dev.
-
Always thought that tables were old school, but I understand now that tables are suitable for displaying tabular data in a structured and understandable manner, as it is in the Nutrition section.
-
Learnt how to change color of the bullet markers.
-
Learnt this CSS property
list-style-position: inside;to deal with inline bullet lists. Not the case in this project. -
Explored how bullet lists are rendered from ul and ol tags. See this content Custom bullets with CSS ::marker.
-
I wouldn't add a container encapsulating header, main and footer. I don't like this, but since we have backgrounds all over the project and we have to add margins, paddings and stuff to the global layout. To solve this, I added a pseudo-element ::before to the body, so now I have two backgrounds placed correctly.
-
Changing the default behaviour of li from
display: list-itemtodisplay: flexwill cause the loss of appearance of markers. You will have to manage it manually. -
To get better responsiveness and attend to the design, the li tags must be
display: flex;andalign-items: center.
Not sure. If you find anything please feel free to help. Thank you for your help!
@mikov144Hi! Great work! I don't have too much to add, but I noticed that in some places you have 2 spaces before the line, and in some it's 4. Wouldn't it be better to keep everything on 2 spaces, so the code is not going to get so stretched? Then again, good job!
Marked as helpful -
- @boysers@mikov144
Hi, your work looks great! The only advice I can give is to use Sass stylesheet language, instead of writing all the styles' code in the same css file. It helps keep large stylesheets well-organized, which makes it much easier to read. It also allows to use mixins which is a very powerful tool. It can help to turn several lines of code into one line. Link to Sass documentation page. Have fun!
- @DeeSzubertWhat are you most proud of, and what would you do differently next time?
The design look very similar to the given template. Second attempt to Sass.
What challenges did you encounter, and how did you overcome them?Had a GitHub problem as it didn't read css file. Had to change path to the file.
What specific areas of your project would you like help with?paragraph was in one line until i change width to the mage width. Is there any better way to do it ?
@mikov144Hello! First of all it looks like there's should be more space between "Learning" element and the article image. Second, you should always give class names to your html elements, even on such small project as this one. Even better, if you would use BEM methodology while giving out names to classes. Link to BEM introduction page. And about your question about the paragraph, I would just create a div container and put everything below the article image inside of it, and then give it width using %. Try bigger or smaller percent until the elements align "just right".
Good luck on your journey!
Marked as helpful - @baileyfrye1@mikov144
The HTML code looks fine and easy to read. But I would recommend using SASS stylesheet language, instead of writing all the styles' code in the same css file. It helps keep large stylesheets well-organized, which makes it easier to correct mistakes.
