Before learning web development and programming I was always at awe whenever I looked into nicely done websites. I love reading articles and the web is my primary source of contemporary information. Thus, I was exposed to a plethora of awesome pages that not only looked great but also provided sensible functionalities for its viewers. It stirred in me a desire to also one day be able to present information to the world in a way that would wow anyone looking at them.
As a content creator I began by using Blogger, writing about financial education and entrepreneurship. With Blogger, in those days, there wasn’t a lot of leeway one could have in terms of customizing a site’s look. I started tinkering and found tutorials that taught me how to tweak the CSS files of a Blogger theme. This was when I realized I needed to learn HTML and CSS. I didn’t start learning until finally accepting the fact that editing a few CSS lines could never give me full control of how a site I was making would look and function.
Now more than five years later, I already know how to make a site from scratch and even put basic functionalities in it. Heck, I can now even code both the front and backend of a basic blog app and even build a TV-Series app with ReactJS. No matter how relatively advanced my skills are now, I can’t deny the fact that learning HTML and CSS is my foundation.
Do You Need That Much HTML/CSS To Be A Developer?
I initially thought of making a full blown list of all the HTML tags and CSS selectors/properties. Then I realized I could just lead the reader to more useful resources. I’ll then just make high-level suggestions in order to emphasize that web developers need not have a Bruce Lee-level of competence to be HTML/CSS ninjas. To build a site you only need to use common HTML tags such as for headings (h1-h6), links (<a>), images (<img>), unordered lists (<ul> with <li> inside), divs and spans. In addition to these are the HTML5 semantic tags <header>, <nav>, <main>, <section>, <aside>, <article> and <footer>. There are lots of other tags that are required in certain situations but I only included those that are commonly utilized. For CSS, you just need to learn how to style text (font properties), links (text-decoration mostly), tweak dimension and position of elements (width, margin, padding, float, position) and style backgrounds (background-image and background-color). CSS transitions and animations are also nowadays ubiquitous in most sites, so it may be necessary to learn them.
Here are links to simple but great tutorials to learn HTML and CSS:
Frameworks and Libraries Give Us CSS Superpowers
Learn Flexbox and CSS Grid while having fun
- Flexbox Froggy — Learn Flexbox through a game
- Flexbox Tutorial on Scrimba
- Grid Garden — Learn CSS Grid through a game
- CSS Grid Tutorial on Scrimba
Learn to use Chrome Developer Tools
Somebody building a website should never ever, and I mean ever, neglect using this magnificent tool. Firefox also has one but I find Chrome’s to be easier to use. With Chrome’s Dev Tools you can easily check your site’s HTML elements and CSS properties in order to fix bugs or test a new style you want to incorporate to your page without committing it into the actual code.
To Master HTML/CSS fast Start By Cloning Sites
Somebody beginning their web development journey will have to be intimate with HTML and CSS for a few weeks (even months) before they could jump to learning programming proper. But which is the best way to practice building sites? Short answer — clone existing sites. Doing so will save you the time and trouble of searching for ideas. You will have a big confidence boost once you build even the header or nav part of the site you’re cloning.
Best Way To Learn — with a coding partner
I started learning web development and programming by myself. While you may learn a lot by yourself, working with others is still better. There will be lots of times you will get stuck with bugs that, because of the many lines of code you’ve written, you just fail to locate. Another set of eyes will save you from such agony. Do I need to say it’s more fun? I myself am currently working everyday with a coding partner, from another part of the world. We have cloned homepages of popular companies including Mint.com, Apple, Newsweek and TheNextWeb. We learned a lot along the way. Discipline and consistency are important to become a highly skilled web developer or software engineer. Having an accountability partner helps build those two traits.
Find a structured way to learn