What are you most proud of, and what would you do differently next time?
Improving grid skills.
What challenges did you encounter, and how did you overcome them?
No real challenges, just played a bit with grid. Next step would be a grid that aligns context based. But i think this is a bigger step for some later challenges. For now i am proud that everything worked as supposed 😁.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
Used grid first time, and it was a good experience. Just having uncertainties with the grid content and grid items. Beside that it was straight forward.
Next time i want to focus more on the main css structure until i go to styling. Had a lot back and forth with the font sizes.
What challenges did you encounter, and how did you overcome them?
Matching the font-sizes with the design previews. In the end i just played with the values.
What specific areas of your project would you like help with?
Not sure if it was a good idea to make the responsive font-size just in the body. Maybe it is better to apply different responsive font-size adjustments for headings and text. What do you mean?
What are you most proud of, and what would you do differently next time?
Build mobile first and it got pretty fast. Making progress 😁.
What challenges did you encounter, and how did you overcome them?
For desktop i could quickly changed flex-direction: column to row. Then the nightmare started 😭. I had massive problems to fit the img in desktop version correctly. In the end i handled it with the width of the parent and the width of the img. On one side the css for this media query is very less and clean. But i am not happy, because i hoped i could fix this with flex properties.
What specific areas of your project would you like help with?
I still do not know what the problem is. Just want to adjust the image simply with flex. Thought i could easily set the image and the description 50/50 in width.
What are you most proud of, and what would you do differently next time?
Just get better and better and learn something new with every challenge:
Modifying UL and OL
Finding a solution to the changed layout of the hero image for smartphones. Next time I will try to design for mobile first.
What challenges did you encounter, and how did you overcome them?
Custom point positioning of UL and OL:
Played with list-style-position:inline and costome points with ::before. In the end, the simpler solution was to split the padding into ul/ol and li elements to move the points.
Different image layout for smaller screens:
First I tried to somehow enlarge the hero image over the boundaries of the parent elements to get the desired layout on smartphones. I could not find a solution for this. Instead, I put a copy of the image in the html on top of the html structure and set it to display:none. On the media query I changed it to block.
What specific areas of your project would you like help with?
I'm still not sure if my styling of lists and tables is optimal. The same applies to the media query with the changed image layout on the mobile phone. Would appreciate feedback on these issues, as well as anything else.
The problem was that.blog-card-author is inside .blog-card. So it took margin-bottom form there.
My solution to this was adding a new class for the avatar img, because i did not find a good solution to do it with selectors without loosing readability.
What specific areas of your project would you like help with?
Everything what i can improve.
But for now i think you can help me with the avatar img, that does not load on the github page. locally everything works.
Due to the missing avatar image i found out that the alt text cannot be shown because the avatar is so small. Is that effecting screenreaders? I guess not but maybe there is a workaround.
