Jovian
Sign In
Learn practical skills, build real-world projects, and advance your career
a year ago

HTML and CSS Basics

alt

HTML and CSS form the foundation of modern web design, allowing you to create visually appealing & functional web pages.

HTML (HyperText Markup Language) is the standard language used to create web pages. It is used to structure content and add elements such as headings, paragraphs, images, links, and more.

CSS (Cascading Style Sheets) is used to describe the presentation of HTML documents. It allows you to control layout and appearance by defining styles for elements such as fonts, colors, margins, borders, and more.

The following topics are covered in this tutorial:

  • Creating an HTML file, adding code into it using VS Code, and viewing it in a browser

  • Using basic HTML tags (html, head, title, body, div etc.) to create a web page

  • Using HTML tags (h1 to h6, p, lists, link, images) to structure content on a page

  • Adding styles using CSS and understanding the CSS box model for layout

  • Styling HTML tags using CSS and replicating the structure of a desired wireframe

  • Deploying a website to the cloud using an online hosting service

There are no prerequisites for this tutorial. The best way to learn these skills is to follow along step-by-step and type out all the code yourself.

You can find the completed code for this tutorial here: https://github.com/JovianHQ/web-development-with-html-and-css/tree/main/lesson-1-html-and-css-basics

Problem Statement

We'll explore the basics of HTML & CSS by attempting to solve this problem statement:

Create a web page that showcases job listings for Jovian, including the following:

  • A navbar at the top showing the Jovian logo
  • A header section displaying a picture and some relevant information
  • A list of job openings that include the job designation, location, and salary details
  • A footer at the bottom of the web page with important links

Make the page visually appealing and informative.

Your First Web Page

Creating a web page is quite easy! We simply need to create a file, put some text into it, and open it within a web browser. While you can use any text editor, web developers often use editors that are better suited for programming. These are called code editors or Integrated Development Environments (IDEs).

In this tutorial, we will use a code editors called Visual Studio Code. You can download it for free from this website: https://code.visualstudio.com/. Just click on the download button and follow the instructions to install it on your computer. Once it's installed, we can start creating our very first web page!