HTML and CSS Introduction

The Foundations of Web Development

Whether you’re looking to build your own website, enhance your digital skills, or start a career in web design, understanding HTML and CSS is essential. These two languages form the backbone of web content creation, enabling you to structure your webpages and style them to your liking.

Here you can start with the basics of HTML, learning how to create and organize content using tags and attributes. You’ll then move on to CSS, where you’ll discover how to control the presentation of your HTML elements, making your webpages visually appealing and responsive.

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