My first experience with HTML/CSS

Photo by Clément Hélardot on Unsplash

My first experience with HTML/CSS

Written by Jacqueline Lim

Jacqueline Lim's photo
Jacqueline Lim
·

3 min read

Table of contents

What will I be covering today?

I will be going through my journey self-studying HTML/CSS in FreeCodeCamp, though I already know a bit of HTML/CSS from my Polytechnic and Codecademy days.

I also realized that I forgot to do a blog series about HTML/CSS, considering that it is the 2nd programming language I have ever learned.

Firstly, what is HTML/CSS?

HTML stands for HyperText Markup Language, a standard programming language for creating websites and webpages. It is one of the most widespread programming languages in the world as it is relatively simple to pick up, provided you know the basics.

CSS stands for Cascading Style Sheets, which can be used for designing webpages to look unique, depending on what you want them to look like. If you want the webpage to be a simple survey form, you can change the font to look unique, as it will stand out from other survey forms.

What is the use of HTML/CSS?

Well, HTML/CSS are primarily used to create webpages/websites, but they can also be used to create survey forms, technical documents, cafe menus, and login pages.

Where did I learn HTML/CSS from?

Well, I started by learning from Codecademy, then I switched to learning in FreeCodeCamp (because Codecademy required me to pay if I wanted the entire course), and I learned more about HTML/CSS through .Net, which was being taught in my Polytechnic module.

Examples of HTML/CSS tags:

These are a few examples of HTML/CSS tags that you can normally find on websites.

First is the HTML boilerplate (or structure), it first starts with a <!DOCTYPE html> (tells the browser which document type to expect) tag, then you have the <html> (the document type) tags surrounding the main code of the website.

For the head of the website, we use the <head></head> tags to contain the information about the metadata (data in data), the metadata tags are below:

  • title (required)

  • meta

  • style

  • link

  • base

  • script

  • NoScript

For the body of the website, it is used to contain the main information of the website that will be displayed on the webpage, the common tags used are:

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

  • header

  • div

  • a

  • img

  • p

Examples of HTML code:

<!DOCTYPE html>
<!--- start of html tag --->
<html>
<!--- start of the head tag --->
<head>
<!--- the metadata tags --->
<title></title>
<style></style>
<base></base>
<meta>
<link>
<script></script>
<noscript></noscript>
<!--- the end of the head tag --->
</head>
<!--- start of the body tag --->
<body>
<!--- the tags in order --->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<header></header>
<div></div>
<a></a>
<img>
<p></p>
<!--- the end of the body tag --->
</body>
<!--- end of html tag --->
</html>

Conclusion

Well, HTML/CSS is useful if you're starting out in learning web development, of course, there are other programming languages that can also help in web development, but this is just one of the easier/more accessible ones to start with. I'll cover more about the various tags listed here in one of my future posts about HTML.

HTML5HTMLfreeCodeCamp.orgCSSnewbie