How long does it take to learn HTML and CSS?
HTML and CSS are the most fundamental languages you will need to learn HTML and CSS to get started with web development. While to make stunning-looking pages and UIs (user interfaces) both HTML and CSS are used hand in hand. But they are used for absolutely unique purposes. Before objectively evaluating how long it will take to learn HTML and CSS, let us first understand the topics and sub-topics one must learn in HTML and CSS.
What is HTML?
HTML (or Hyper Text Markup Language) is the most fundamental language one has to learn to start web development. HTML is a markup language (and not a programming language), meaning it is specifically used to display the contents of the web page. There is essentially no website that can be made without using HTML. It gives a webpage or a website its structure or the skeleton it requires. HTML is the first language you need in order to create a website (or webpage).
You must have heard about the billionaire American business magnate and investor Warren Buffet. His company, Berkshire Hathaway’s official website is made using plain HTML. Just simple HTML. Visit the website live, berkshirehathaway.com
Topics to learn in HTML
- Learning the structure of HTML documents.
- Learning about the basics of elements.
- Understanding the differences and similarities between elements and tags.
- Learning about text and text formatting elements – paragraph, heading, div, underline, italic, etc.
- Learning about attributes.
- Learning about tables.
- Learning about form and input elements.
- Learning about multimedia elements – image, audio, video, etc.
- Learning about manipulating elements (especially form, input, and multimedia elements) with their attributes.
- Learning semantic HTML.
While HTML is comparatively very easy to start and understand, it is relatively a bit on the hard side to create very well-structured documents using just HTML.
What is CSS?
CSS (or Cascading Style Sheets) is the “styling” language of the web. As the full form suggests, it is used to style the webpage. It is CSS that is primarily responsible for all the styling and aesthetics on a webpage. It is used to add colors, animations, transitions, and a lot more to your webpage.
While a webpage can be made with just HTML, CSS is used with HTML as a complement.
Topics to learn in CSS
- Learning about its syntax.
- Learning about changing fonts, colors, backgrounds, etc.
- Learning about CSS selectors.
- Learning about pseudo-classes (hover, active, visited, etc).
- Learning about classes and ids to specifically target certain elements.
- Learning about the box model (margin, borders, padding).
- Learning about positioning (relative, absolute). Mind you, CSS positioning can really be confusing.
- Learning about layouts (flexbox, grid). Understand when to use what.
- Learning about transforms, transitions, and animations.
- Learning about responsive design (media queries).
CSS is vast. It is quite easy to get into its rabbit hole. There are a lot of properties in CSS, a lot. It is very easy to get confused, at first. It can often become frustrating. There is a lot of cool stuff you can do with CSS and its variety of properties. But regularly, you will not be using all “cool” CSS properties. Learn CSS with a pinch of salt.
Here is a video by Kevin Powell on all the cool kinds of stuff you can make using only CSS and HTML.
How long will it take to learn HTML and CSS?
Given that you are regular and consistent, it shall not take more than 2 to 3 weeks to learn the fundamental (and a bit intermediate) concepts of HTML and CSS. However, actually mastering only HTML and CSS can take a good amount of time. It is directly dependent on the number of things you make, and the number of problems you solve. Learning HTML and CSS, or programming in general is not a linear process. It is not a one-time thing. You have to keep visiting and re-visiting the topics (at least when you are a beginner).
Already feeling pumped? Start learning the basics and advanced concepts of HTML and CSS interactively for free on codedamn! Check out the following free courses or visit and browse the frontend learning path from here.
Learn HTML and CSS (Fundamentals) – For FREE!
Learn Advanced HTML and CSS Concepts – For FREE!
Sharing is caring
Did you like what Ayush Saha wrote? Thank them for their work by sharing it on social media.
- How to add space in HTML?