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 and even build a . No matter how relatively advanced my skills are now, I can’t deny the fact that learning HTML and CSS is my foundation. basic blog app TV-Series app with ReactJS 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 (h1-h6), links (<a>), (<img>), (<ul> with <li> inside), and In addition to these are the <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 (font properties), (text-decoration mostly), (width, margin, padding, float, position) and (background-image and background-color). CSS transitions and animations are also nowadays ubiquitous in most sites, so it may be necessary to learn them. headings images unordered lists divs spans. HTML5 semantic tags style text links tweak dimension and position of elements style backgrounds Here are links to simple but great tutorials to learn HTML and CSS: Learn HTML5 Learn CSS3 Responsive Web Design Image by on Unsplash Maik Jonietz 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 and . 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 , and 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. FlexBox CSS Grid Bootstrap Foundation Semantic-UI Learn Flexbox and CSS Grid while having fun — Learn Flexbox through a game Flexbox Froggy Flexbox Tutorial on Scrimba — Learn CSS Grid through a game Grid Garden CSS Grid Tutorial on Scrimba Alas, as if the above were not enough, we now have CSS pre-processors (i.e, , ). 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 LESS 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 . We have cloned homepages of popular companies including , , and . 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. currently working everyday with a coding partner, from another part of the world Mint.com Apple Newsweek TheNextWeb Find a structured way to learn If you want to undergo an intense software engineering training then visit . 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). Microverse.org on | Follow me Twitter Github

Apple

Twitter

YouTube

Top Open Source Vulnerabilities to Watch Out

How Five Weeks of Remote Pair Programming Helped me Build Strong Habits

Check out my Substack Newsletter

Too Long; Didn't Read

Make resilience your competitive advantage

How Much HTML and CSS Should You Know To Develop?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Choosing between Object Storage and Block Storage for Security

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Choosing between Object Storage and Block Storage for Security

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps