@wideirpSubmitted 3 months ago
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
- @mikov144Posted 3 months ago
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 helpful0 - @flaviocmbSubmitted 4 months agoWhat 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!
@mikov144Posted 4 months agoHi! 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 helpful1 -
- @boysersSubmitted 4 months ago@mikov144Posted 4 months ago
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!
1 - @DeeSzubertSubmitted 4 months agoWhat 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 ?
@mikov144Posted 4 months agoHello! 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 helpful0 - @baileyfrye1Submitted about 1 year ago
Hi everyone!
This is my first submission here on Frontend Mentor, I wanted to start very basic for my first challenge, excited to work through the rest of the challenges! Any and all feedback is appreciated especially in the specific areas:
- Making sure the overall code is well organized and well structured
- I feel like the logic of some of my CSS could be simplified, any advice there is helpful
Thanks is advance!
@mikov144Posted 4 months agoThe 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.
0
