Recipie Card with plain HTML CSS

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

Things I Carried Forward From My Last Challenge

Using CSS Variables: Discovered the benefit of CSS variables too late during my last project, but they proved invaluable for centralizing control over the color palette.

Using REMs: Some of the feedback I recieved last time was to use relative units, so I have done so here.

Things I Learned

Prior to this challenge, I hadn't used the tag. Incorporating it has enhanced the visual demarcation in my layouts, adding a clear, stylistic separator without additional CSS.

Things I Would Do Differently Next Time

Starting with a mobile-first approach in web design is generally more efficient. Although beginning in desktop view didn't pose significant issues this time, I aim to prioritize mobile layouts in future projects to streamline responsiveness adjustments. It would be more efficient to structurally define HTML elements semantically before applying CSS. This approach would minimize rework, particularly for complex components like tables, ensuring clarity and maintainability from the start.

What I'm Most Proud Of

Mastering the use of CSS variables has significantly streamlined my styling process, allowing for easier and more flexible design adjustments.

What I Would Do Differently

For my next project, I plan to implement a mobile-first design strategy from the outset and establish a clear semantic structure for HTML elements before jumping into styling. This strategy should enhance both the adaptability and semantic clarity of my designs.

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

HTML Text Markup Initially unsure when to use HTML tags like versus CSS for styling text. I learned that while is straightforward for bolding text, CSS provides more flexibility and is preferable for comprehensive styling to maintain separation of content and design. I'm still not completely clear on when to preferentially use HTML for this purpose, but I suppose there is a subjective take here.

Using Fonts with CSS Faced challenges incorporating custom fonts into webpages. I overcame this by watching some video tutorials on how the @font-face rule works, though some more practice is needed.

CSS Positioning I struggled with keeping an attribution fixed at the bottom of the page using position: absolute. Resolved by adjusting the CSS properties of the parent container to maintain the positioning context, ensuring the attribution stays at the desired location across different devices and screen sizes.

CSS Cascading Rules Surprised to find that some CSS properties like border-radius set on the body didn't cascade to child elements as expected. Overcame this by explicitly setting the property on necessary child elements, which reinforced my understanding of CSS inheritance and specificity rules.

Figma font sizes don't match CSS px I noticed that 16px in figma was larger than 16px in my web app, I found 18px to be the correct value, and I converted this into REM with a quick google search.

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

I would love to know more about other peoples workflow through a project like this.

• In what order would you work on things?
• Are there conventions you follow when structuring your css file?
• How do you handle checking that your applications work across all different screen sizes?