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

Advanced HTML and CSS

alt

In this tutorial, we'll will dive deeper into the world of web development by learning advanced techniques for designing and styling websites using HTML and CSS. We will learn how to create HTML tags, use advanced CSS properties, and optimize your code for performance and accessibility.

The following topics are covered in this tutorial:

  • Iteratively improving an existing web page by adding/modifying sections
  • Creating and styling HTML tables to display tabular data on a web page
  • Understanding various text-related CSS properties and how they are used
  • Understanding CSS colors and picking appropriate colors for clarity and aesthetics
  • Creating an HTML form to collect user inputs and exploring various HTML input types
  • Collecting and viewing form responses using an external server
  • Using meta tags to improve how a deployed page previews when shared as a link

The best way to learn these skills is to follow along step-by-step and type out all the code yourself. This tutorial assumes basic knowledge of HTML & CSS.

Problem Statement

We'll explore abovementioned topics in HTML & CSS by attempting to solve this problem statement:

Improve the Jovian Careers website created in the previous tutorial by making the following changes:

  • Show the list of jobs in a tabular format with columns for job title, location, salary, and posted date
  • Show an application form below the jobs table where a user can fill out and submit an application
  • Improve the aesthetics of the page using appropriate fonts, text sizes and colors
  • Deploy the page to the cloud and ensure it previews properly when shared as a link

The code for this tutorial can be found here:

To begin, let's download & extract the starter code, rename the project folder to my-second-web-page, open it up in VS Code for editing, and on a browser for viewing.