How to master HTML and CSS
Website design and development has changed significantly over the past decade to bring forth highly interactive and responsive user interfaces we see around the internet. Before a website goes live, designers and developers go through a rigorous process that involves planning, visual designing, development, and testing. Developing a website involves combining several languages that work together to achieve a task. Such languages include HTML, CSS, JavaScript, SQL, PHP and more. In this article, we delve into mastering HTML and CSS, but first, let’s understand the architecture of a website.
A website’s architecture involves two main parts; the front-end (also referred to as client-side) and the back-end (also referred to as the server side). The front-end includes what happens on your browser and what you see when you visit a website. The back-end involves the server-side logic, databases, and data storage, manipulation and retrieval processes. Everything you see on your browser is a combination of HTML, CSS, and JavaScript which encompass front-end development. Now that you have a basic understanding of the web architecture, let’s proceed with the article’s scope. To master HTML and CSS, you must first learn the fundamentals.
What is HTML?
HTML is an acronym for Hypertext Markup Language. It is the primary language for describing the structure of website pages. The language is made up of HTML elements which form the building blocks of HTML pages. These elements are represented by headings, subheadings, titles, paragraphs, list points, tables, dividers, and more. The HTML elements are embedded within a set of tags that the browser parses to display to the user. Tags are simply element names surrounded by angle brackets.
For example, if you are to display a page title, you would use the title tag as shown below;
<title>Page Title Goes Here </title>What is CSS?
CSS is an acronym for Cascading Style Sheets. It describes the styling of a website and how HTML elements are to be displayed on different types of screen sizes. CSS is the language that improves the appearance and makes a website more appealing. It can be used to set the background color of an element, size of text, letter spacing, background image, and more. A major advantage of CSS is that it allows you to set the layout of multiple pages or the whole website in one external file. Hence, it ensures consistency in the design of a website. Another advantage is ensuring website responsiveness, which we will discuss in a later section.
If you are to set the color of the title as blue; you can use inline CSS as shown below;
<title style=”color:blue;”>Page Title Goes Here </title>Why Should You Learn HTML and CSS?
While there are several technologies for building a web application, they mostly belong to back-end development. These technologies still require HTML as it is the foundation of any website. Whichever technology is used at the server side, your users will only see the HTML which the server-side languages parse to the browsers. Now, plain HTML is quite boring, and you always must incorporate CSS to make the page appealing to the user.
If you are planning to become a web developer or designer, then you should certainly learn HTML and CSS because the final product boils down to these two languages – it is where people meet your website. Additionally, HTML and CSS are always being improved by W3C and there is a huge developer community behind them, meaning they are here to stay.
How much time does it take to master HTML and CSS?
Time commitment when starting to learn a new skill is always an issue. Considering that HTML and CSS are the primary languages for building a website, you might think it will take you years to become a pro. Luckily, it may take you way less time. But it all depends on your motivation and goals. If you are consistent, you should be able to master HTML in under a week and CSS in a month or less. You should start with HTML first and then proceed to CSS. This is because you need an HTML element where you can apply the style. Eventually, you will continue building upon your new skills as you build more website applications.
What Kind of tools do you need?
You do not need complex tools when beginning to learn HTML and CSS. A simple text editor such as notepad that comes preinstalled on Windows can do. For better code highlighting, you may install the free Notepad++ that supports various programming language. You will also need a web browser like Chrome, Mozilla Firefox or Microsoft Edge for testing your code. Other good editors include emacs, atom, sublime text, and vim for Unix operating system. These are basic code editors that you should use to help you master the syntax of the languages as a beginner. It’s recommended that you do not use an Integrated Development Environment (IDE) when you are just beginning to learn to code.
An IDE is a software application that brings together various related development tools under one framework. IDE’s are designed to simplify a software development process and help in minimizing typos, syntax errors, and coding mistakes. Only when you have understood the syntax of a language, should you consider using IDE’s. This is because IDE’s have debuggers that identify errors upfront, and as a beginner, you need to identify these errors yourself for you to learn.
IDE’s come packaged with a code editor, compiler(interpreter), and a debugger. You write the source code in the code editor, the compiler or interpreter translates the code into a machine-readable language, and the debugger checks the code for issues and bugs. IDE’s are available as open source or premium. Examples of IDE’s for coding CSS and HTML include RJ TextEd, Light Table, NetBeans, Brackets, Komodo Edit, PhpStorm, and Visual Studio Code.
What do I need to learn to become an HTML and CSS master?
Learn the fundamentals
The most important thing when learning a coding language is practicing, and more practicing. As we stated earlier, the very first step to mastering HTML and CSS is learning the fundamentals as you will see below.
- Basic HTML document
Start by creating a basic HTML page, which looks like this;
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1>Sample First Heading </h1>
<p>Sample first paragraph. </p>
</body>
</html>The <head> tag contains the basic setup of the page like the <title> tag that shows up as the heading of the browser tab and CSS styling tags as discussed in the next section. The <body> tag contains everything that is going to be displayed to the user. HTML files are saved with a .html extension. So, once you have written your code onto your chosen code editor, you may save the file as MyFirstWebsite.html. If you double click on the file, it should launch in your browser. Congratulations! You have just created your first website.
- HTML tags
HTML tags define the building blocks of a web page. They consist of a start tag and an end tag. To avoid ending up with undesired layouts, a start tag must always be accompanied by an enclosing end tag. A website called HTML CSS JavaScript includes a list of all HTML tags plus examples.
Adding CSS to a HTML webpage
There are three methods of linking CSS to HTML.
Inline styling is the basic method of linking CSS to HTML
It involves adding unique styles to individual HTML elements using the style attribute. The style attribute can hold any CSS property. Assuming you wanted to set the heading as red and paragraph text as blue, bold with a 30-pixel left margin in your HTML document, you would do the following;
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1 style=“color: red;”>Sample First Heading</h1>
<p style=“color: blue; margin-left:30px; font-weight: bold;”>
Sample first paragraph.
</p>
</body>
</html>When inlining your styles, the CSS rule-set consists only of a declaration syntax. The declaration has a property and value;
Declaration
color: blue;
{property: value;}
Notice the full colon separating the property from the value, and the semicolon to end the declaration.
Embedding CSS inside the HTML document
HTML has another tag called the <style> tag that helps in adding CSS to a HTML document. The style tag must go within the <head> tag declaration just before the start of the <body> tag. Taking from our original MyFirstWebsite.html file, here is how we can add styling to our webpage.
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
<style>
body {
background-color: white;
}
h1 {
color: red;
margin-left: 40px;
}
p {
background-color: green;
margin-left:40px;
color: white;
}
</style>
</head>
<body>
<h1>Sample First Heading </h1>
<p>Sample first paragraph. </p>
</body>
</html>When embedding CSS inside the document, the CSS rule-set consists of a selector and a declaration syntax. The declaration must be embedded within curly braces.
{background-color: green; margin-left: 40px; color: white;}
Selector property value property value property value
Linking to an external stylesheet
One of the most common ways to add CSS to an HTML file is through the external stylesheet. Once you get a grip on the basics of CSS, this is the most recommended method that you will use. It has several advantages. It allows you to define the layout of several pages on an entire website in one file. Through the file, you can also change the layout of an entire website as opposed to going through each file of the web page.
Linking to an external stylesheet ensures the styling of a page is separate from the content. This is recommended because it makes it easier to maintain the code. The CSS files contain only plain CSS code and no HTML tags at all. To add CSS to your HTML from an external file, open another editor in your notepad and add some CSS code;
body {
background-color: white;
}
h1 {
color: red;
margin-left: 40px;
}
p {
background-color: green;
margin-left:40px;
color: white;
}CSS files are saved with .css extension. The CSS file can be saved in the same folder as your other web pages or linked to from a different server and we shall explain below how to link to either. The links to your CSS files go into the <head> tag of your HTML file.
Here is the format for linking to an external CSS file.
<link rel=”stylesheet” type=”text/css” href=”PATH_TO_CSS_FILE”>
In this case, replace PATH_TO_CSS_FILE with the path to the location you saved the CSS file. Assuming you saved your file as mystylesheet.css, then you will write;
<link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”>
If the CSS file is hosted on an entirely different server, then you will use the URL to the location it is hosted:
<link rel=”stylesheet” type=”text/css” href=”http://that-domain-name/mystylesheet.css”>
As we are just beginning to learn HTML and CSS, we shall probably just use our website’s directory to store the CSS files.
Here are a few pointers while dealing with an external CSS file
- You can link an HTML page to more than one CSS file.
- One CSS file is not tied to a single HTML page and can be included in as many HTML pages as you wish.
- You do not use the <style> tag within the CSS file since saving with a .css extension already declares it is a CSS file.
- The <link> tag is part of HTML and must go within the <head> tag of your HTML page.
- External CSS files have the advantage of ensuring fast page load speeds which is a desirable feature. This is because, when a visitor loads your website for the first time, the file is downloaded once and cached. When he/she navigates to a different HTML page that uses the same CSS file, then their browser only downloads the HTML page and uses the already cached CSS file.
Defining your own CSS Selectors (Classes & IDs)
We have so far looked at HTML selectors; those that link to an HTML tag such as body {background-color: white;} You have the option to define your own selectors within the external CSS file in the form of class or id. The advantage is that you can have the same HTML element, but display it differently depending on the definition of the CLASS or ID.
A class selector is preceded by a full stop(.), while an id selector is preceded by the hash character (#). So, to create your own selectors inside your CSS file, you can add the following code;
#side {
background-color: blue;
padding: 20px
}
.header {
color: red;
font-weight: bold;
}HTML links to the styles using the attributes class or id. Here is how you can achieve this.
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1 class=”header”>Sample First Heading </h1>
<h3 class=”header”>Sample Sub heading </h3>
<p id=”side”>Sample first paragraph. </p>
</body>
</html>There’s one difference you should note between the two; a class selector can be used to present more than one element, while an id selector can only be used on one element within one HTML page.
Layout and Positioning of HTML Elements
So far, we have covered the basics of HTML and CSS. It is important that you be able to position basic elements of HTML that bring out a page. W3Schools demonstrates the CSS position property that specifies the positioning methods used for an element. (They include static, relative, fixed, absolute, or sticky)
- Positioning header, footer, sidebar
Here are a sample CSS and HTML code that defines a header, left sidebar, body, and footer.
CSS CODE
body {
margin: 0px;
padding: 0px;
}
.main {
display: flex;
justify-content: flex-start;
flex-flow: row wrap;
}
.box {
display: flex;
flex-direction: column;
width: 80%;
min-height: 100vh;
}
.header {
background: tomato;
text-align:center;
}
.content {
flex: 1 0 0;
background: green;
overflow: auto;
text-align:center;
}
.footer {
background: blue;
position: relative;
text-align:center;
}
.left-side {
color: white;
width: 20%;
background-color:#333333;
height: 100vh;
text-align:center;
}HTML Code
<div class="main">
<div class="left-side">
Left side bar content
</div>
<div class="box">
<div class="header">
Header Content
</div>
<div class="content">
<br><br> Body content goes here<br><br>
</div>
<div class="footer">
Footer Content goes here
</div>
</div>
</div>The above code is just a basic snippet that you can build upon. It introduces the CSS flex property which will be discussed in a section below.
Responsive Design and HTML5
Mobile usage has grown tremendously over the last decade. According to Mobile Internet Statistics, mobile internet traffic as a percentage of global online traffic in 2018 stands at 51.2%. These numbers will certainly rise because of the portability of mobile phone as compared to a laptop or desktop computer. This only proves that visitors are more likely to land on your website using a handheld device than a laptop. It is important that you build a responsive website.
Mobile First
When developing a website, design for mobile first. Designing for mobile first means prioritizing the design for mobile devices before desktop computers. This ensures your web page displays faster on smaller devices. Considerations for mobile first design include using a responsive framework, prioritizing user experience, optimizing for speed, and simplifying navigation. Some responsive CSS and HTML5 frameworks include Twitter Bootstrap, Foundation, Gumby, UI Kit, and Semantic UI.
As a beginner, you should learn to design a responsive user interface using pure CSS, then you can proceed onto using the frameworks when you are a master. CSS has the Media Query technique to help you achieve responsiveness.
Media Query
Media Query is a CSS technique that uses the @media rule to include a declaration of CSS statements only if a certain condition is satisfied. It can be used to check the size of the browser window and resize the webpage accordingly. In this example, if CSS detects that the device accessing the page has a width of 600px or below, then this code block will run, setting the background to blue and aligning the text to the center of the screen.
@media only screen and (max-width: 600px) {
background: blue;
text-align: center;
}HTML has had several versions since the advent of the world wide web; new versions coming up with positive improvements. As of 2017, we have HTML 5.2. HTML versions from HTML5 were built with the philosophy that, ‘a web page should look good on any device.’ While that is the case, you still have to include CSS grids and CSS media queries to achieve responsiveness. To make a responsive website, even before adding the CSS code, you must first add the following meta-tag to all pages of your website.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The width=device-width part sets the width of the page to follow the screen-width of the device used by the visitor, and adapt the content view to the screen’s size.
The <meta> viewport element gives the browser instructions on how to control the dimensions and scaling of the page.
Advanced Layout and Animations
Just like HTML, CSS has had its share of improvements to come out with modules that make page layouts predictable. They include;
CSS Grid
CSS Grid is a two-dimensional layout module that makes it easier for front-end developers to create a grid-based layout with rows and columns. It is the most powerful layout module because it allows you to position elements without having to use positions and float properties of CSS. A grid layout contains a parent element with one or more nested child elements.
To create a grid layout element container, you set the display property of the selector to grid or inline-grid. This is what we mean;
.grid-layout-container{
display: grid;
}Or
.grid-layout-container{
display: inline-grid;
}Once this is declared, all child elements of the grid-layout-container become grid items. W3Schools and CSS-Tricks list all the CSS properties you can use with the grid layout to create highly responsive user interfaces.
CSS Flexbox
Just like the CSS Grid layout, CSS Flexbox allows you to easily create responsive user interfaces without having to use float or position properties. The difference is that Grid Layout works with rows and columns, while Flexbox is one-dimensional – you can either use it for horizontal display or vertical display, but not both.
To create a flexbox layout element container, you set the display property of the selector to flex. This is what we mean;
flexible-layout-container{
display: flex;
}Because of its one-dimensional nature, flexbox is best suited for small-scale layouts, while CSS grid is intended for large-scale layouts.
The default direction of the flex property is “row” (i.e. left to right). The flex-container properties include; flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content. The flex-direction property comes into play if you want to change the direction of the elements as opposed to the default row layout.
To display the items in a column (vertically), add the column value to the flex-direction property;
.flex-layout-container {
display: flex;
flex-direction: column;
}Other property values for direction include;
- flex-direction: column-reverse; stack the items in vertical reverse, from bottom to top.
- flex-direction: row; stack the items horizontally, left to right. This is the default layout.
- flex-direction: row-reverse; stack the items in horizontal reverse, from right to left.
Transitions and Animations
CSS transitions and animations enable front-end developers to create enjoyable user experiences without any added libraries. You don’t even have to use JavaScript or flash. Thanks to CSS evolution, these properties are readily supported by most browsers.
Transitions allow you to change the appearance and behavior of an element whenever there is a state change. A state change can be when a mouse hovers over an element, it gets focused on, targeted, or becomes active. To create a transition, you must specify the CSS selector and the duration of the effect. Here is an example;
.box {
transition: width 2s, height 4s;
}Animations allow the appearance and behavior of an element to change from one style to another. With animations, you can change several CSS properties, as many times as you would prefer. Animations are initiated by specifying keyframes for the animations using the @keyframes property. When an animation completes, it reverts to the original style. The keyframes property hold what styles the elements will have at certain times.
Frameworks / Tools
Some recommended frameworks and tools used by millions of websites include Bootstrap and SASS/LESS.
Bootstrap is a free and open source front-end framework providing ultimate flexible and scalable features for millions of websites. The bootstrap getting started guide is highly detailed to help you take advantage of this highly responsive mobile first UI framework.
SASS and LESS are both powerful and competing CSS preprocessors. A CSS preprocessor extends CSS and then compiles it into regular CSS. SASS stands for Syntactically Awesome Stylesheets and LESS stands for Leaner CSS. As a web developer, it is important to learn either of the two tools. Advantages of using a CSS preprocessor is that it helps avoid code repetition hence maintaining a cleaner code with reusable pieces.
How Do I Become a Master?
If you have read this article up to this point, you are on your way to becoming a master. Here is just a list of what you can do;
Learn the basics from Above
This article has basic guidelines for becoming a master in HTML and CSS, plus links to relevant resources you can leverage. Additionally, various online tutorials such as the following should get you from beginner to pro;
- https://html.com/
- https://learn.shayhowe.com/html-css/
- https://www.w3schools.com/css/default.asp
- https://www.w3schools.com/html/default.asp
- https://www.codecademy.com/learn/learn-html
- https://www.udacity.com/course/intro-to-html-and-css–ud001
- https://www.theodinproject.com/courses/web-development-101/lessons/html-and-css-basics
Build a couple of pages
As the saying goes, “practice makes perfect.” Build as many pages as possible to help you fully grasp HTML and CSS syntax. You will also know how to debug simple problems or where to go to for assistance.
Learn to position elements
It goes without saying that saying that placement of HTML elements on a page is what defines a good website. With access to the advanced CSS layout properties as discussed here, you should be in a position to develop a proper layout.
Replicate other Websites
Pick one of your favorite websites and try to replicate its exact appearance without copying a code. Do that for multiple websites and see how it goes.
Build your own websites
It’s time to see if you can build your own website. This is a crucial step as it helps you grow your portfolio and show the world that you are becoming a professional front-end developer.
When will you be considered a master of HTML and CSS?
If you can replicate a few websites, as well as develop your own websites with copying code, then you should consider yourself a master. Additionally, knowing where to get help (through googling) whenever you are completely stuck is another trait a master HTML and CSS developer should have.
Additional Resources
Stack Overflow
Stack Overflow is one of the places you will spend most of your time. It is the largest developer community with questions and answers to almost every imaginable computer programming problem. If you do not find a solution on Stack Overflow, then you are free to post your own question and an experienced developer will provide you with an answer within hours.
GitHub
GitHub prides itself as the world’s leading software development framework. It brings together the largest community of developers to collaborate on software development projects.
Chrome Browser DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools is one of the basic tools for front-end web developers. It can help you edit the CSS and HTML on any page on-the-fly and debug problems quickly. Check out the get started guide to discover what you can do with the tool.
Full Online Course
If you like learning by watching videos, I can remember the course HTML/CSS Bootcamp – Learn HTML, CSS, Flexbox, and CSS Grid from Udemy. This course is top rated on Udemy and contains:
- A comprehensive course with 18.5 hours of video.
- Only requisite is basic computer skills.
- Covers everything we talked about in this article on becoming a master in HTML and CSS.
- Contains several projects from real-world websites.
This course is the only paid course I recommend in this article but is well worth it. To get the most of this course, I recommend to pause the video regularly and try out what the instructor is teaching.
Articles
Here are some articles with additional resources
- https://gist.github.com/dypsilon/5819504
- https://www.keycdn.com/blog/web-development-tools
- https://www.onwardsearch.com/blog/2012/01/front-end-developer-career-resources/
- https://www.pluralsight.com/blog/software-development/tips-for-front-end-developers
- http://www.monitis.com/blog/complete-megalist-25-helpful-tools-for-front-end-developers/
- https://medium.com/@ti_asif/200-best-free-tools-resources-for-front-end-web-developers-3fb3c415a643
Final Thoughts
On your path to becoming a master in HTML and CSS, there’s quite a list of items to learn – HTML elements, tags, properties, values, attributes, CSS selectors, declarations and more. The scope of this article involved covering these items and showing you how you can apply them to building your web pages We have gone a step further to introduce some advanced CSS layout modules which help enhance delightful user experiences. This article is only a stepping stone to becoming a great front-end developer. You should always keep practicing and keep yourself updated with current trends in the tech industry because new technologies will keep coming up.
One Comment
Comments are closed.