At first I wondered if it was even worth bothering (re)learning HTML and CSS. After all, I’ve created websites for over 10 years, and HTML & CSS was the very first thing I learned right back at the start.
In the pas year or so I’ve been studying JavaScript and have even started learning React, but it occurred to me that an awful lot of time has passed since I really brushed up on the core skills, HTML5 and CSS3, the real fundaments of web design.
I’ve been able to figure out what’s needed for the many websites I’ve created, but website design has come on leaps and bounds over the past 10 years, and nowadays it really makes sense to try and master CSS to really get your websites looking exactly how you want them to to look, and also be fully responsive for all display sizes.
To look at it another way, more and more companies are now using dedicated UX/UI developers to create beautiful websites, and many of these devs don’t actually “code”. They simply make “images” that represent how they want a website to look, using software tools such as Figma.
It is then the responsibility of the web developer to convert these types of “image” into real code, with navbars at the top, clickable buttons, hamburger menus for mobile devices, JavaScript to make things actually work, or perhaps make components for multiple use across multiple pages on large scale projects.
I would say that a HTML/CSS “expert” could literally take the image above and the “assets” (actual images to be used, fonts, text content) and effectively replicate the image above into a real, fully-functional website, to the point where it would be almost impossible to know that the original “image” wasn’t simply a print-screen snapshot of the website.
This is why I’m going back over the HTML/CSS stuff, using modern techniques, with particular focus on Flexbox and CSS grid, to get to the point where I can fully create an image of a website, and make it a real, fully responsive one.
Here is a great example of someone doing just that….
https://www.youtube.com/watch?v=-33oY1V14IQ&list=PL0-e1OMq5RP4BIrTQPrqu6Jxsfp94xK8Z
So let’s get started!
