Blog Preview Card Solution with SASS

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.