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

Blog Preview Card Solution with SASS

@MelissaZhuu

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am proud of learning SASS for the first time and completing a project with it. Next time, I want to try to learn some frameworks like Bootstrap or Tailwind CSS.

What challenges did you encounter, and how did you overcome them?

I encountered many troubles with formatting/positioning. First, I learned that HTML text tags like and have default margins that always mess up my spacing ever so slightly and it drives me crazy. So now, I start with margin: 0; for my text selectors to avoid mysterious spacing issues. Second, I don't know why it's so difficult to center text in a div. Text-align: center apparently only centers it horizontally, but I spent a long time struggling to center it vertically as well. I tried with relative and absolute positioning which required translating Y 50%?!?! and then when the text is finally vertically aligned, setting the position to absolute meant that it was no longer listening to text-align: center. There were also suggestions for using vertical-align: middle, but apparently it only applies to inline and inline-block elements and it doesn't work for block elements. Finally, in the end, I just used flexbox's justify-content and align-items to center it.

What specific areas of your project would you like help with?

As mentioned above in challenges faced, I'm not sure what's the best way to deal with these spacing issues. Am I supposed to always select all text elements and give them margin: 0 to avoid random spacing issues? Or is there a simple way to cancel these defaults? Also, how do people vertically center text elements in a div? I think it's pretty common to want to horizontally and vertically center something in a div, so I'm not sure why it was so difficult. Is flexbox the way to go? It feels a little weird, almost overkill, using flexbox for a simple div with only one text element, but that's the only method that has worked for me in this project. Any alternative suggestions would be helpful! Thanks.

Community feedback

irene 120

@irene-panis

Posted

design looks great!

as for your questions, yes, usually when i want to center something i just use flexbox. based on what i've read from other devs as well, i wanna say this is pretty much the way to go.

regarding the wonky default margins (which i agree are a pain), i'd look into css resets. i've had A (more) Modern CSS Reset recommended to me by the people in this community, which essentially helps clean up / "sand down" a bunch of the default css styles, including margins. before using resets though, i used to hit my stylesheets with the ol' * { margin: 0; padding: 0; } so it's really up to you.

Marked as helpful

0

@LeviKuhaulua

Posted

Heyo to add onto Irene comments regarding centering elements/components horizontally and vertically, I'd say you should use Flex or Grid to do so. When you use absolute positioning, sometimes, content inside the component or the component itself can end up being cropped out on smaller screen sizes.

0

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