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.
I understand one’s itch to start with a real programming language such as Ruby, JavaScript or Python. But to build something complete, at least for the web, a developer should have decent HTML and CSS skills. However, a web developer need not be an expert in them.
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:
Image by Maik Jonietz on Unsplash
Frameworks and Libraries Give Us CSS Superpowers
These days we are blessed to have tools, libraries and frameworks to make it simpler and easier for us to build the markup and styles of a site. It was previously tough to perfect a page’s layout using purely floats and position properties in CSS. But now we have FlexBox and CSS Grid. Having basic skills in those two will already allow one to make incredible looking web pages. In addition to this we have libraries such as Bootstrap, Foundation and Semantic-UI that provide ready styling. We just need to link to their CSS files (and JavaScript/jQuery libraries), understand their class and grid systems and, voila, you can build awesome looking sites.
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
Alas, as if the above were not enough, we now have CSS pre-processors (i.e, SASS, LESS). What are they good for? If you’ve done lots of CSS before, you will agree that the CSS code can get messy and hard to understand. The consequence of this is a nightmare of debugging sessions finding which part of your 700 plus lines of CSS is the culprit. And what about those repeated or redundant selectors that make your CSS that long in the first place? I believe a CSS pre-processor’s biggest value comes from how it helps a developer organize his/her CSS code. This makes it easy to manage a site with multiple selectors and properties. Now if you’re starting web development and you’re really raring to start ‘actually programming’ then you’ll be glad to know that with CSS pre-processors it’s almost exactly like programming already. You use things like variables, loops and functions as if you’re working on JavaScript or Ruby.
SASS Tutorial On YouTube — click this link for full playlist
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
If you want to undergo an intense software engineering training then visit Microverse.org. If it’s your first time to code sign up for the pre-course where you’ll learn (FOR FREE) web development and software engineering. If you’re an advanced learner (you are comfortable with some JavaScript or any other programming language) then I would recommend the Fast Track Program (you will only pay once you finish the program and find a remote software engineering job).