Building an HTML/CSS Vanilla Site: Key Lessons and Takeaways
Over the past three years I’ve been working as a Full Stack Developer, primarily relying on libraries and frameworks for web development tasks. However, I realized that by not just using HTML and CSS, I lacked certain fundamental concepts for web programming in terms of basic layouts. Determined to broaden my skillset and facilitate my working with UI libraries, I recently decided to challenge myself by creating a website using only pure HTML and CSS.
My goal was only to develop a simple portfolio, showcasing my work and skills in a clean and simple manner.
In the following, I’ll share some key insights on the most important aspects, even if they might seem quite basic, that I’ve encountered.
Sketching the Design Before Coding
It may seem obvious, but as developers used to receiving layout specifications from clients, we can sometimes forget how the final result should appear. When I started building my website from scratch, I found myself constantly changing the layout whenever I stumbled upon something more interesting, thus continually modifying the code accordingly.
Designing my own layout on Canva, nothing too complex, turned out to be a game-changer. Once I had a clear visual guide, the rest of the development process became much smoother.
Mobile Layout First
One of the things I’ve learned is that HTML is already inherently super responsive, even without any lines of CSS. In fact, it’s us who break its natural responsiveness when we add additional styling rules.
That being said, it’s much simpler to start with a mobile layout first, where elements are typically displayed as blocks stacked on top of each other. As the screen size increases, you can then gradually incorporate different options such as Flexbox and Grid to enhance the layout as needed for various screen sizes.
Regarding Flexbox and Grid, Learn Them
Flexbox and Grid are probably the things you will find yourself searching for most frequently, as they are incredibly convenient and essential for any layout. So, taking the time to understand their fundamentals and experimenting with their application in your layout will be highly beneficial.
By the way, there’s a fantastic website, Flexbox Froggy, which provides an interactive and enjoyable way to learn and practice Flexbox concepts. It’s a great resource to review and reinforce your knowledge of Flexbox properties that you might occasionally forget.
Leveraging CSS Variables
CSS variables have been a game-changer, simplifying my CSS code and making it easier to maintain. By using variables for everything, from colors to font sizes and various dimensions, I achieved consistent styling throughout my entire CSS. Making global changes became effortless, eliminating the need to search extensively through the style sheet.
In the example below, you can see the CSS variables that I utilize for my theme palette, which are declared in the :root element. Additionally, I have a “dark-mode” class that I activate when the user wants to switch to dark mode. In this class, I will redefine my variable colors to accommodate the changes, while leaving the rest of my CSS untouched.
:root{
--clr-primary: rgb(255, 255, 255);
--clr-primary-comp: rgb(239, 239, 239);
--clr-secondary: rgb(13, 27, 59);
--clr-secondary-comp: rgb(5, 10, 22);
--clr-accent: rgb(243, 90, 1);
--clr-accent-comp: rgb(224, 161, 129);
}
.dark-mode {
--clr-secondary: rgb(255, 255, 255);
--clr-secondary-comp: rgb(239, 239, 239);
--clr-primary: rgb(13, 27, 59);
--clr-primary-comp: rgb(5, 10, 22);
--clr-accent: rgb(243, 90, 1);
--clr-accent-comp: rgb(224, 161, 129);
}Embracing Utility Classes
Similar to variables, you will often find yourself applying the same style to various HTML tags. That being said, it can be highly beneficial to create utility classes that you can reuse at your convenience.
Of course, using libraries like Bootstrap will provide you with everything you need, but in this case, I already mentioned that I haven’t used any external libraries.
Below, you can find examples of the classes I use to manage the layout of some divs on the page.
/*utility classes*/
.container {
width: var(--width-container);
margin-inline: auto;
}
.component {
background-color: var(--clr-bg-component);
border-radius: var(--fs-bradius-primary);
box-shadow: 0 0 var(--box-shadow-dimension) var(--clr-shadow-component);
padding: var(--padd-component);
height: 100%;
}
.two-columns {
display: grid;
align-items: center;
gap: var(--gap-medium);
margin-inline: auto;
}
.multiple-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-width-article), 1fr));
gap: var(--gap-medium);
}Avoid Using Inline Styles in HTML
One thing that I always try to keep in mind when working on the Front End is to avoid using inline styles. Occasionally, I forget this guideline, and debugging became more time-consuming than anticipated. Keeping styles in separate CSS files made it easier to manage and troubleshoot my code.
Conclusion
While it has become common to rely on libraries that simplify our work, I find it refreshing to occasionally work without these tools. It’s not about avoiding their usage but rather about having the freedom to customize them according to our specific needs more effectively.
I sincerely hope that you have found my tips helpful in your own web development endeavors. If you have encountered any other lesser-known points or tips while writing vanilla webpages, I welcome you to share them in the comments below.
The world of web development is ever-evolving, and learning from each other’s experiences can lead to more innovative and efficient approaches in building outstanding web experiences. Happy coding and see you next time!