Are you trying to teach yourself to code? There are two concepts you will need to understand first: 1) what is HTML, 2) What is CSS. You’re in luck here we’re covering HTML and CSS for beginners and my experiences learning them.
HTML and CSS are the two most basic coding languages that make up the structure and style of a website.
When you decide you want to learn to code, it is good to start with these two languages because you can practise with them in a way that is very visual.
Most people are visual learners so when you want to learn to code it is good to start this way.
As a beginner starting to code for the first time, the first thing you will learn about is HTML.
What is HTML?
HTML is the primary coding language for pages and websites on the world wide web.
HTML stands for Hypertext Markup Language and is a text-based approach to describing how content contained within an HTML file is structured. The code in HTML tells a web browser how to display the text, images and other forms of multimedia on a webpage.
For most people, the way you start to teach yourself to code is by learning HTML.
What is CSS?
Once you have gotten to grips with HTML, it is time to start learning CSS. CSS is the coding language you use to add styles to your webpage.
CSS stands for “Cascading Style Sheet.” It is used to format the layout of Web pages.
Cascading style sheets can be used to define text styles, table sizes, and other aspects of a Web page. These styles can then be easily applied across multiple pages on a website to create a unified look. Plus, CSS makes it easy to change styles across several pages at once.
Starting to learn HTML and CSS
When you complete tutorials on HTML and CSS for beginners you will soon realize that HTML and CSS are in fact quite simple to understand.
As we discussed, HTML is the backbone to your site and contains the content. Then CSS is like the clothes you wear on top of the HTML that make the site look good and perform responsively.
11 Basic Concepts in HTML and CSS to understand
Below are two tables that contain 5 basic concepts that you should learn for HTML and CSS respectively.
Learning this code will help you get started playing around with web design.
6 HTML Concepts for Beginners
HTML is formed with tags. You have an opening and a closing tag that create the functionality around the text inside.
Opening tag format: < ‘some tag’ >
Closing tag format: </ ‘some tag’ >
| Concept | Code | What it does |
| Head | <head></head> | The header tag goes around everything on the webpage and contains all the meta data. |
| Body | <body></body> | The body tag goas around the body of the document (webpage) and the content. |
| Header | <h1></h1> or <h2></h2> or <h3></h3> etc | Creates header text |
| Link | <a href=”your link URL”>Your Link Text</a> | Creates a hyperlink |
| Bold | <b></b> | Makes the text bold |
| Italic | <i></i> | Makes the text italic |
| Image | <img src=”image file” alt=” alt text for image”> | Adds in an image – note images do not have a closing tag |
5 CSS Concepts for Beginners
Each section of the website is split up and assigned a style class. Within the style class you will define the different properties of the section.
CSS is written in the format:
concept: “ for text ”
concept: number
| Concept | Code | What it does |
| Color | color: “blue” | Chooses the colour |
| Deciding Font | Font-family: “arial”font-size: xx px | Defines the font style and size in pixels |
| Creating Space: Padding, margin and border | padding: xx pxmargin: xx pxBorder: xx px | Generates space in pixels around the concept – see the image below for an example |
How to use developer tools to practise HTML and CSS
When you are ready to start practising you can use developer tools. Developer tool is available in your browser. To access it on a Mac, right-click and then choose ‘inspect’.
Dev tools will show you all the code behind the website you are on. You can even play around with the code to see how your actions impact the website.
Don’t worry though, your changes won’t impact the actual website, it’s just for checking things out.
Below is a screenshot of Artificially Intelligent Claire with developer tools turned on so you can see how it looks.
When you hover over some section in developer tools it will highlight the relevant section of the site. You can change the value and see how it impacts the website.
Using Flexbox to create desktop and mobile responsive websites
Another really useful concept in CSS to understand is Flexbox.
Wes Bos is a developer who has created a series of really useful video tutorials on flexbox called ‘what the flexbox‘ that really helped.
Once I worked this out I felt like I could concur the world!
To conclude on HTML and CSS for beginners
What is HTML?
- HTML is the backbone to your site and contains the content.
What is CSS?
- CSS is like the clothes you wear on top of the HTML that make the site look good and perform responsively.
If you’re starting to teach yourself to code, doing the nanodegree program or learning anything for that matter, who’s inspired you? Can you share any tips? Do you know any good HTML and CSS tutorial sources?
Please share them with me and comment below – I’d love to hear from you!
Nice article this article very helpful for me
Author
Glad it helped 😊