[DAY 12-14] I Built A Piano, City Skyline, Magazine, & More Using HTML & CSS

Hi everyone! Welcome back to my blog where I document the things I learned while studying to code. I also do this because it helps retain the information and concepts as it is a sort of active recall.

During days 12-14, I built various projects to practice my CSS skills:

• a balance sheet to utilize CSS pseudo-selectors.

• a cat painting to familiarize intermediate CSS techniques.

• a piano to grasp the fundamentals of responsive web design.

• a technical documentation page to complete part 4 of the responsive web design certification project.

• a city skyline to familiarize CSS variables.

• a magazine layout to practice CSS grid (in which I still don’t fully grasp).

• a product landing page to complete the requirements of the responsive web design certification project and earn my first web development certification 🙂

From these projects, I was able to:

• expand my knowledge of CSS pseudo-selectors, including first-of-type, last-of-type, nth-of-type, hover, and active.

• center the elements vertically and horizontally using CSS positioning techniques.

• explore absolute positioning for proper element placement.

• utilized the z-index property to control stacking order.

• experiment with the transform property to rotate and scale elements.

• learn to define variables within the :root selector and apply them using the var() function.

• implement social media buttons using anchor elements combined with HTML class attributes.

• be introduced to the display: grid property, although I’m still in the process of fully grasping its uses within webpage layouts.

These projects have not only expanded my HTML and CSS skills, but also provided me with practical experience that will be invaluable in the future.

Thank you for reading. Until then, see you next blog!