Following a guide from Traversy Media on YouTube, I built an example website for a Cloud Hosting Platform name 'Loruki' with pure HTML and CSS. This project was incredibly easy to follow along with thanks to the tutorial nature of the video, but still managed to teach me a lot about a variety of web development principles.
The guide was in a code-along formatting with very little open-endedness and creative input but what it lacked in problem solving, it made up for in familiarity with best practices and a look into how powerful vanilla HTML and CSS can truly be.
One of the key features of this project was the development of 'utility classes' in a seperate CSS file for setting defaults for properties at small, medium, and large sizes as well as reusable variables for color palletes and default margin and padding settings. While I have a little experience in Bootstrap and Tailwind, this approach of using vanilla CSS to create utility classes demonstrated how CSS Frameworks work under-the-hood as well as showing me how a lot of their features can be self-implemented if their full functionality isn't needed in a project.
"We wrote A LOT of CSS"
-Brad, several times through this video
Another aspect of this guide that I really appreciated was it's method of structuring HTML. Throughout the video, we would add all the elements of a section to the HTML, and then fully style it before moving on to the next section. Through the use of the utility classes as well as repeating patterns in the section, each following section became easier to add to the site and by the end I had created a basic framework for adding new pages, new elements, and new sections to each page.
Prior to following this guide, media queries were a little daunting to me because of all the options and settings that may need to be tweaked to create a responsive web design. This website was built with a 'desktop-first' mindset, and afterwards was shrunk to a mobile size and misaligned elements were dealt with individually in a media query for both tablets and mobile phones/smaller screens. This approach made the media queries very easy to tackle at the end because I knew what needed to be adjusted based on the misaligned elements.
While follow along tutorials may not be sharpening my problem solving or creative design skills themselves, having a good example of best practices as well as learning some new tips and tricks will be invaluable tools that I can continue to reference and build from going forward in my web development career.