HTML and CSS Introduction

The Building Blocks

In essence, creating a website parallels building a house in terms of planning, resource allocation, compliance, execution, and ongoing maintenance.

HTML & CSS are some of the most basic building blocks of web development, and in my opinion, the languages you want to get started with.
While HTML is used to structure the content on a webpage, CSS is responsible for their styling and presentation. In our house analogy, HTML is the blueprint and CSS the facade.

A taste of HTML & CSS

HTML and CSS are well-suited for basic exercise because there’s no need for a web server or additional programs.
HTML and CSS are client-side technologies, meaning they are processed by the user’s web browser. Unlike server-side languages (e.g., PHP, Python, Node.js), HTML and CSS do not require server-side processing. This allows you to open an HTML file directly in your browser without the need for a server.

Follow these instructions to see if you can get a very minimal hang of it:

Step 1.- Install Notepad++

Head to notepad-plus-plus.org and  DOWNLOAD the latest version of Notepad++, then follow the instructions to install and set it up on your computer.

Step 2.- Copy/Paste

Open Notepad++, copy the code provided below, and paste the code into it.

Copy to Clipboard

Step 3.- Save

Save the document and name it Home, Index, Cat, or anything you want, just make sure to save it with the .html extension. E.g., if I name the file index, it should look like index.html. If you use chrome as your default browser, you should see the browser icon as the file type for index.html.

Step 4.- Open

Open the file by double-clicking on it. It should open your computer’s default browser. The browser should display the words “My First Heading” and “My first paragraph.” in a white screen.

Step 5.- Edit & Save

Edit the text between the <h1></h1> and <p></p> with “Title” and “Description” respectively and save the changes. The code should look like below:

Copy to Clipboard

Step 6.- Refresh

Instead of “My First Heading” and “My first paragraph.” it should now say “Title” and “Description”.

That’s it! You have successfully created and edited a basic and simple HTML document. Should you upload this file to a web server, you or anyone in the world visiting the correct page will see the changes.

Step 7.- CSS Styling

“Styling” is exactly what it means, and we will use this technique to give our HTML page some style. We will use both inline and internal styling. We will use “inline” for our paragraph or <p></p> and “internal” for hour <h1></h1>.

Copy to Clipboard

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph
  • The <style> element defines the color, font thickness & font size of our heading 1 or <h1>
  • The style=”” element defines the color & font size of our paragraph or <p>

Still find it confusing? Don’t worry, just like with onions, I didn’t like it or “got it” right away. All you need to know is that there is a lot of help available, and you will get it.

Getting Started FAQs

Frequently asked questions

Your Content Goes Here
Your Content Goes Here
From the blog