Learn to Code HTML and CSS- How They Work? Uses (+Live Examples)

Having better knowledge of HTML and CSS might be a game-changing skill for anyone in this era of Startups. Because these are “The Backbone” of Internet and Web-world.

---

HTML and CSS plays a crucial role in any Front-end web developer, Web designer, or even a Full-stack developer’s journey. Without these technologies, it’ll be so difficult to even think about the world wide internet, these are actually super important.

Even though modern-day web development is all about Themes, Libraries and Frameworks, Like- Angular, React, Django or Spring, but here is Why you still need to know HTML and CSS–

• To understand what’s going on in Web designing,
• How to Troubleshoot any issue you face while developing a web application,
• To make an exciting career in Tech industry,
• Exploring new ways to solve a problem.

By the way, Javascript (JS)^ is another core pillar of Web development, but we’ll discuss it in another article.

In this ultimate guide, we’ll understand:

★ How to start with HTML and CSS,
★ Things that happen behind the scenes,
★ Live example to show the use of HTML and CSS,
★ Beginner’s Doubts and Queries,
★ Helpful resources to learn HTML and CSS (in an easy way).

---

Guide To HTML 

What is HTML?

An acronym (or short form) of Hyper Text Markup Language. It’s a simple but powerful markup language. If you’ve just heard about or starting with HTML, You might not aware that you already know the basics of it. Here is how?

You’d certainly written answers (in 200 or 500 words) in school/college time. Now, remember a few elements of those answers. It included-

1. Headings and sub-headings,
2. Multiple Paragraphs,
3. List with Bullet points and Number,
4. Images, Diagrams, and so many other things.

In HTML, we create all these elements with a whole lot of other elements using certain markups, best known as ‘Tags’. These tags are the hidden terms/code which help us to create a web document/webpage in a well-structured manner.

Why is HTML used?

HTML is used to display the Web pages and Documents. It provides a convenient way to structure a web page. As an example, Let’s say, you’ve searched about SQL programming on Google, here is what you’ll probably see-

---

In any search result, almost all the displayed URLs (or links) will redirect you to a particular Website or Web app designed & developed using HTML, CSS and a couple of other Server-level Technologies.

Working of HTML

HTML is a Markup Language. To create a web page, we write a variety of tags. These tags are fundamentally “the hidden keywords”. They provide instructions to format the web document.

Getting started with HTML:

In order to start with HTML and create a Web page, you can follow these steps:

Step #1: Open a Text Editor

You can use any editor to write editor to create a HTML document. Like: Notepad++, Brackets, VS Code or any other online editor such as: CodePen (Here you won’t need to download/install any software).

You can download and install whatever you like, there are tons of them, but the above 3 are compatible with all major Operating systems- Mac, Windows and Linux. So, go ahead and pick an editor.

Then, create a folder or directory (not necessary but good to have a separate workspace) and Open the text editor.

Step #2: Write some Code

In HTML, we write a variety of tags for different purposes. Here is an example of that-

---

Save the file in the editor with a relevant name such as ‘HTML-quick-example.html’. We save the HTML files most often with the .html or .htm extension just as, An executable file we have ‘.exe’ and for PDF files, we have ‘.pdf’ extensions.

Step #3: Output- Run The Code

To see the result of the above HTML code, simply open the folder or directory, select the ‘HTML-quick-example.html’ file and open it with any web browser (as Chrome, Mozilla etc). A new tab will be open in your browser and you will see the an output like this-

---

Once you’ve run the saved HTML document. Now, It’s the responsibility of the Web browsers to understand those HTML tags, Translate and Display them into their corresponding look and structure.

Types & Latest version of HTML

HTML was developed by Tim Berners-Lee, the man behind the foundation of WWW (World Wide Web) consortium. It was initially released in 1993. Till now, a number of HTML versions have been released. The current version of HTML is HTML5.

📤 Back To Top » What is HTML?

What are the 8 basic HTML tags?

HTML is all about Tags and Attributes. A tag starts and ends with an angle bracket ( the ‘Less than’ sign ‘<’ and ‘Greater than’ sign ‘>’ ). HTML tags are used to define the Page Layout and Elements within the web page.

Tags tell the browser- What to do with the text, image or other media. While the Attributes provide other essential information to the tag. Here are a few of majorly used HTML tags-

#1) Heading Tags:

HTML has six levels of headings, which use the elements <h1>, <h2>  to <h6>.

Example:

<h1>Title of ShubhamKLogic</h1>
<h2>2nd Level of Heading</h2>
<h3>3rd Level of Heading</h3>

 

Above HTML tags will produce the following Output:

#2- Paragraph Tag:
The <p> tag provides a way to structure your text into different paragraphs.

Example:

<p>Hey there!!!</p>
<p>I’m Shubham, a self-taught programmer.</p>
<p>And I’m here to share- How to learn Programming by yourself</p>

Above HTML tags will produce the following Output:

#3- HTML Link Tags

To create a link, use <a> tag known as ‘anchor’ tag:

Example:

<p><b>“Programming is a skill Best aquired by Practice rather than anything else”- <a href=“https://www.shubhamklogic.com”>@ShubhamKLogic.com</a>

 

Above HTML tags will produce the following Output:

#4- Image Tags

In HTML, images are defined with the <img> tag.

Example:

<img src="path/ShubhamKLogic-learn-to-code-logically.jpg" alt="ShubhamKLogic.com" width="104" height="142">

 

#5- Un-ordered List Tag:

The <ul> Defines an unordered list and <li> defines a list item.

Example:

<p>Which one is your favourite Programming language?</p>
<ul><li> Java </li><li> Python </li><li> SQL </li></ul>

 

Above HTML tags will produce the following Output:

 

#6- Ordered List Tag:

The <ol> tag specifies an Ordered list.

Example:

<p>Top 3 Databases in the Industry-</p>
<ol>
    <li> Oracle </li>
    <li> MySQL </li>
    <li> Microsoft SQL Server </li>
</ol>

 

Above HTML tags will produce the following Output:

 

#7. Input Element:
The <input> tag helps to take information from a user.

Example:

<input type=”text” placeholder="Enter your best email" /><button>Submit</button>

 

Above HTML tags will produce the following Output:

#8. Table Tag:
The <table> , <tbody>, <th> , <tr> and <td> tags help to create an awesome tabular structure on a web page.

Example:
A simple table of 2 columns and 2 rows-

<table border="1">
    <tr>
        <th>R.No.</th>
        <th>Topper's Name</th>
    </tr>
    <tr>
        <td>101</td>
        <td>David</td>
    </tr>
</table>

 

Above HTML tags will produce the following Output:

---

Some Doubts of HTML

Is HTML a programming language?

No, HTML is not a programming language, as it doesn’t support any conditional statements, Loops and similar features.

For what purpose HTML is used?

To run the internet. HTML stands behind almost each of the 100+ billion web pages. It’s like a skeleton of any Website or Web app.

What is HTML simple definition?

In one sentence, “HTML is an awesome online tool used to describe the content in of any web page. The overall purpose of HTML is to describe the content and provide a structure.”

📤 Back To Top » What is HTML?

Guide To CSS 

What is CSS explain?

CSS (stands for Cascading Style Sheets) describes how the HTML elements would be displayed on the web page.

Whether you need to resize an image, change the color of a text or want to do anything to make your Web page look better & presentable, CSS helps you to do it in minutes.

CSS is not only used to define styles for your web pages but also the look and layout for different screen size devices e.g laptops, mobile phones etc., which is normally referred to as ‘Responsiveness’.

How does CSS work?

Now for those who come solely from an HTML background, knowing what an HTML tag does, the knowledge of its ‘style’ attribute is somewhat a win-win situation.

To know, How CSS works, you first write a piece of HTML code because CSS works only on HTML elements.
Now you’ll need to target elements and change its looks and display styles.

Till now, there’re 3 techniques to apply CSS Styles on HTML elements:
1. Inline CSS Styling,
2. Internal CSS Styling,
3. External CSS Styling

And to select a particular Element or Group of elements, we have primarily:
1. Ids,
2. Classes,
3. The Element itself

Let’s explore these with a perfect example.

Getting started with CSS:

There’re just 3 steps to use HTML and CSS simultaneously.

Step #1: Design the Structure with HTML

Step #2: Apply CSS to make it Look Better

Step #3: Run the Code

Here is a quick example, of what a few lines of HTML and CSS can do. Have a look at the code published on my Github account.

---

In this example, CSS fundamentals, Animations and basic HTML are used. However, the above code can be further optimized for Cross-browser support, but for now, let’s keep it simple.

📤 TOP» What is HTML and CSS?

I have written comments in each section, so that anyone can understand it quicker. The output of the code is below.

What’s happening in the Example?

★ Starting from top, the document/webpage begins with DOCTYPE declaration and html tag. These tags are basically to tell the browser that, it’s an HTML document and from here it gets start.

★ Then, inside the head section, we have applied CSS internal styling features. All major styles are in a style tag. After that, we have the body of the document. The user can see only text and other elements that are inside the body section.

★ In Body section, we have 2 divisions. 1) Without CSS styles, and 2) With CSS. If you’ve observed carefully, in the second division, we have set the class attributes of div and img elements, to select & target those elements and apply our CSS styles.

.

.

---

What is CSS used for?

In the above example, you can easily see the power of CSS. On one hand, with same HTML, we were only being able to display them normally. But on the other hand, using CSS, we had not only beautified it but also scaled the size even animated it too.

So CSS is quiet an essential tool of web development, and you must have at least basic knowledge of it, if you want to build your Career in Web designing and development.

Why I believe, You should make CSS- The Best Friend

★ It makes your web pages properly presentable,
★ It allows information to be presentable on the Web for different devices.

What are 3 types of CSS styling?

We have majorly 3 methods to add CSS Styles in HTML:

1. Inline Styling
2. Internal Styling
3. External Styling

We have already seen how internal styling and inline styling works. For External styling, we have to write CSS styles in a separate file (say yourStyles.css) and link it to our HTML file using the code below.

<head>
    <link rel=”stylesheet” href=”yourStyles.css”>
</head>

 

If the yourStyles.css file is not in the same directory/folder as the HTML file, make sure to provide a complete path to the CSS file

CSS Behind the Scene

When we write CSS styles for HTML elements, save the files and run it with the web-browser, the browser renders (or say translates) the code, applies the CSS and displays it as a web page.

All the browsers have a CSS interpreter (an inbuilt software) where styling rules are applied to the corresponding elements and HTML tags.

(Some of you might laugh but) I’ve seen many beginners talk about downloading and installing “HTML and CSS”, but there are no such things like that.

To get started with HTML and CSS, you do not need to download or install anything as we all have at least one browser and a text editor on our computer or laptop. And that’s pretty much enough to start.

📤 TOP» What is HTML and CSS?

However, if you want Faster typing, Autocomplete code and other support,  there are plugins such as Emmet and others for Brackets/VS Code editors for Web development.

Frequently Asked Questions (FAQs)

Is CSS a programming language?

No, CSS is neither a Programming language nor for any Algorithmic solutions. The core purpose of CSS is to style the markups (and tags) of HTML to make web pages more presentable. CSS is basically declarative in nature.

Which software is used for CSS?

To see CSS in action, a Web browser (as Chrome, IE or Opera) is enough.

Live Example of HTML and CSS

For those who want to play with the code that I just shared above on Github, Click on ‘Run Pen’  to see it Live, and Click on ‘Edit On CodePen’ to go on Live editor of CodePen and edit the code.

---

Best Places To Start in Web Development

Learning programming is fun, but only for those who knows- How to Start?, What are the smart Steps? How to tackle different problems.? And for this, one must have to be aware of some Proven helpful resources to learn coding online.

Here are a few of the resources shared by our Facebook group members (A community of Programmers):

1→ Beginner’s Cheat Sheet (HTML): Helpful .pdf cheat sheet of HTML5 to understand it better.

2→ How to learn HTML: The basic understanding of how HTML and CSS work.

3→ List of HTML Elements: Complete list of HTML Elements by W3.org (The international standard organization of WWW).

4→ HTML: Docs by Mozilla: Official documentation of HTML by the Mozilla development team.

5→ What is Css?: Covers all the basics to intermediate level CSS styling (15+ chapters).

6→ Css Demos and Experiments: Includes a number of experiments to teach you CSS3 with examples.

7→ Guide to CSS by Chris: Awesome place to learn CSS3 fundamentals and advanced concepts by Chris Coyier.

8→ HTML5 and CSS3 Techniques: For Intermediate level programmers. Detailed explaination for Responsive development.

9→ Introduction to Developer Tools: Brief explaination of each feature of Chrome’s Developer Tool, to debug HTML and CSS.

---

We Learned Today 

On a fundamental level, every HTML document is a hierarchical structure made up of elements, multimedia and their content.

In this article, We’ve learned- How you can start writing an HTML document. A technology named CSS- best used to style your document. All the beginners level questions, that makes a zig-zag path while learning HTML and CSS.

Also, we have seen, a number of great places to start and become better in Web designing & Development.

Now, It’s your turn:

★ Learn how to code,
★ Get the right tools to be better,
★ Join web communities as Sitepoint as SKL,
★ And keep an eye on coming trends and technologies,

Learning these skills will definitely help you to build a successful career in web design. So, keep some patience, and practice each and every day.

---