Log In

Advanced HTML and CSS

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.

Improving the Wireframe

In the previous tutorial, we created a wireframe for a website that included several sections: a navigation bar, a banner image, an "About Jovian" section, a list of job openings (showing designation and location), and a footer with useful links.

Based on the current problem statement, we need to make some changes to the wireframe to better meet our needs. In the world of web development, this process of refining and improving a website through multiple iterations is called iterative work and it's how most modern web applications are built.

We'll replace the list of job openings with a table. Some of the benefits of using a table include:

  • Improved readability: Tables make it easier for users to scan and compare information.

  • Better organization: By organizing the job openings in a table, we can group them by department, location, or other relevant criteria.

  • Enhanced functionality: Tables can be easily sorted, searched, and filtered, providing users with more options to find the job they are interested in.

We'll also add an application form below the table. The form will ask for the following information:

  • Name
  • Email
  • Applied Job
  • Phone number
  • Resume
  • Cover letter

Here's what the final revised wireframe looks like:

NOTE: For personal projects, a wireframe is usually enough to plan a website's design and layout. However, in a professional setting, UI designers often create detailed mockups providing more information on colors, fonts, and visual elements.

EXERCISE: Replicate the above wireframe using https://excalidraw.com and make some changes (e.g. add a new section).

Tables in HTML

Tables are a fundamental component of HTML used for displaying data in a structured manner. Tables are versatile and can be used to organize a variety of data types, including text, images, and other HTML elements.

  • Tables are created using a combination of <table>, <tr>, <td>, and <th> tags.

  • Tables can be styled using CSS to add borders, backgrounds, and other visual elements.

  • Tables can be manipulated to merge cells or adjust the size of columns and rows.

  • Tables should be used appropriately and sparingly to avoid cluttering a web page or application.

table, tr and td Tags

The following tags are used to create tables, rows, and cells:

  • The <table> tag is used to create a table in HTML. All other table-related tags are nested inside this tag.

  • The <tr> tag is used to create a table row. Each row contains one or more table cells (<td> or <th> tags).

  • The <th> tag is used to create a table header cell in HTML, and is typically used to denote column or row headings within a table.

  • The <td> tag is used to create a standard table cell. This tag is typically used to hold data such as text, images, or other HTML elements.

Here's an example:

<table border="1">
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

The border attribute is used to provide a border width for the table and individual cells.

The above code produces the following table:

Tip: Use https://jsbin.com to experiment quickly preview the out HTML code snippets.

EXERCISE: What happens if you include a different number of cells in each row, or if you include td tags directly within the table tag? Try it out yourself and observe the results!

Creating the Jobs Table

Let's add a jobs table to our web page containing the following information:

Tip: Before writing code for an HTML table, you can create a sample table using a spreadsheet to serve as a reference.

The following code will create the jobs table:

<table id="jobs-table">
    <tr class="jobs-header-row">
        <th>Job Title</th>
        <th>Location</th>
        <th>Salary</th>
        <th>Posted On</th>
    </tr>
    <tr class="jobs-data-row">
        <td>Frontend Developer</td>
        <td>Bengaluru, India</td>
        <td>₹12,00,000</td>
        <td>Mar 3, 2023</td>
    </tr>
    <tr class="jobs-data-row">
        <td>Full Stack Developer</td>
        <td>New Delhi, India</td>
        <td>₹15,00,000</td>
        <td>Feb 1, 2023</td>
    </tr>
    <tr class="jobs-data-row">
        <td>Data Scientist</td>
        <td>San Francisco, USA</td>
        <td>$175,000</td>
        <td>Dec 22, 2022</td>
    </tr>
    <tr class="jobs-data-row">
        <td>ML Engineer</td>
        <td>Remote</td>
        <td>$80,000</td>
        <td>Sep 19, 2022</td>
    </tr>
</table>

We've given the table tag an id and added classes for the tr tags for styling with CSS.

Here's what the table looks like:

EXERCISE: Add more rows and columns to the jobs table e.g. requirements, responsibilities etc. Try including paragraphs and lists within table cells. As you do so, you might need to set vary the widths of different columns, as explained here: https://www.w3schools.com/html/html_table_sizes.asp

Styling HTML Tables

Styling HTML tables with CSS can greatly improve the visual appeal and readability of a website.

Basic Styling with CSS

We can use simple CSS properties to make the following changes to our table:

  1. We'll add borders around the table and table cells
  2. We'll make the table full width on the page
  3. We'll left align the headers so that they're in line with values
  4. We'll show a different background color for the headers
  5. We'll add alternate colors to the rows using nth-child (even) and odd

Here are the CSS properties we need to apply in the styles.css file:


#jobs-table {
  width: 100%;
  border: 1px solid grey;
  border-collapse:collapse;
}

#jobs-table th {
  border: 1px solid grey;
  padding: 4px 8px;
  text-align: left;
  background-color: aliceblue;
}

#jobs-table td {
  border-right: 1px solid grey;
  padding: 4px 8px;
}

In addition, the following styles will add an alternating background color pattern for the rows:

#jobs-table tr:nth-child(odd) {
  background-color: ghostwhite;
}

Here's what the table looks like after applying the styles:

EXERCISE: Learn more about styling rows and columns of table here: https://www.w3schools.com/html/html_table_styling.asp . Try creating a repeating 3-color background pattern for the rows of the table.

Merging Rows & Columns

Merging rows and columns in HTML tables can be useful for displaying data in a more organized and readable format. This can be done using the rowspan and colspan attributes for th and td tags.

We can modify the HTML code for the table as follows:

<table id="jobs-table">
    <tr class="jobs-header-row">
        <th rowspan="2">Job Title</th>
        <th colspan="2">Location</th>
        <th rowspan="2">Salary</th>
        <th rowspan="2">Posted On</th>
    </tr>
    <tr class="jobs-header-row">
        <th>City</th>
        <th>Country</th>
    </tr>
    <tr class="jobs-data-row">
        <td>Frontend Developer</td>
        <td>Bengaluru</td>
        <td>India</td>
        <td>₹12,00,000</td>
        <td>Mar 3, 2023</td>
    </tr>
    <tr class="jobs-data-row">
        <td>Full Stack Developer</td>
        <td>New Delhi</td>
        <td>India</td>
        <td>₹15,00,000</td>
        <td>Feb 1, 2023</td>
    </tr>
    <tr class="jobs-data-row">
        <td>Data Scientist</td>
        <td>San Francisco</td>
        <td>USA</td>
        <td>$175,000</td>
        <td>Dec 22, 2022</td>
    </tr>
    <tr class="jobs-data-row">
        <td>ML Engineer</td>
        <td colspan="2">Remote</td>
        <td>$80,000</td>
        <td>Sep 19, 2022</td>
    </tr>
</table>

The following CSS changes are also required:

#jobs-table th {
  border: 1px solid grey;
  padding: 8px;
  text-align: center;
  background-color: aliceblue;
}

#jobs-table td {
  border-right: 1px solid grey;
  padding: 8px;
}

Here's what the table now looks like:

EXERCISE: Learn more and experiment with rowspan and colspan here: https://www.w3schools.com/html/html_table_colspan_rowspan.asp . Create a layout on paper with some sample data and try to replicate it using HTML & CSS.

Text Styles in CSS

CSS provides a wide range of text styling properties that allow you to change the appearance of text in your web pages. These properties can be used to modify the font, size, color, spacing, and other visual aspects of text.

Using External Fonts

Using external fonts in CSS allows you to use fonts that are not commonly found on most computers. This can help make your website stand out and look more unique. Here's how you can add external fonts to your website:

  1. Choose a font from Google Fonts: Visit Google Fonts to browse and select a font that you want to use on your website.

  2. Add the font to your CSS using the link tag: Google Fonts provides a link to include in the head section of your HTML file that will allow you to use the font directly from their server.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">```

3. **Use the font in your CSS**: After including the font in your HTML file, you can use it in your CSS by specifying the font family, and providing a fallback font family in case the font isn't available/loaded. E.g. `font-family: 'Roboto', sans-serif;`

Heading and Body Fonts

It's common practice to use one font family for headings and a different font family for body text. Let's use the font Inter for headings and Roboto for text within our web page.

We'll need to add the following link tags in head:

<link 
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto:wght@400;500;700&display=swap" 
  rel="stylesheet">

Additionally, we'll need these CSS styles to use the fonts:

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter;
}

While there are thousands of fonts available on the internet, you should try to pick simple and legible fonts for a good user experience.

EXERCISE: Check out this link to explore some other font pairs and apply them on the page: https://www.creativebloq.com/typography/20-perfect-type-pairings-3132120 .

Common Text Styles

Here are some of the most commonly used text styling properties in CSS:

  • font-family: This property sets the font family for the selected text. It specifies the name of one or more font families to use for the text. E.g. font-family: Arial, sans-serif;. CSS provides several in-built fonts: https://www.w3schools.com/cssref/css_websafe_fonts.php

  • font-size: This property sets the font size for the selected text. It specifies the size of the font in pixels, ems, or other units. E.g. font-size: 36px;

  • font-weight: This property sets the weight (boldness) of the selected text. It specifies the weight of the font as a number or a keyword. E.g. font-weight: bold;

  • text-align: This property sets the horizontal alignment of the selected text. It specifies the alignment of the text as left, right, center, or justified. E.g. text-align: center;

  • line-height: This property sets the height of each line of text. It specifies the height of the line as a number or a percentage of the font size. E.g. line-height: 1.5;

  • font-style: This property sets the style of the font for the selected text. It specifies whether the font should be italic, oblique, or normal (default). E.g. font-style: italic;

  • text-transform: This property sets the capitalization of the selected text. It specifies whether the text should be transformed to uppercase, lowercase, or capitalize (first letter of each word capitalized). E.g. text-transform: uppercase;

  • text-decoration: This property sets the decoration of the selected text. It specifies whether the text should be underlined, overlined, line-through, or none (default). E.g. text-decoration: underline;

EXERCISE: Create a new web page with some text on it, look up the available values for each of the above properties, and apply them to the text on your web page to understand their effect. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

Understanding Sizes in CSS

CSS offers several ways to set the size of an element, including using fixed and relative values, as well as units of measurement.

  1. Pixels: Use a fixed value, such as pixels (px), to set a specific size for an element. For example: width: 200px;

  2. Percentages: Use a relative value, such as percentages (%), to set a size relative to the size of the parent element. E.g. width: 50%;

  3. em and rem: "em" and "rem" are both units of measurement that are used to size elements based on the font size of a parent or root element, respectively.

    • "em" units are relative to the font size of the parent element. One "em" is equal to the font size of the parent element.

    • "rem" units are relative to the font size of the root element. One "rem" is equal to the font size of the root element.

  4. Other units of measurement: There are many other less commonly used units of measurement such as inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc).

  5. Viewport-based sizes: Left as an exercise. See https://www.sitepoint.com/css-viewport-units-quick-start/

EXERCISE: Learn more about CSS units and measurement on this MDN article. Create a new web page with some divs and text and apply various sizes to them in different ways.

Text Size & Style Guidelines

When designing your website or application, it's essential to consider appropriate text sizes for optimal readability and usability. Here are some guidelines to keep in mind:

  • For body text, 16px is a commonly used font size that ensures comfortable reading.

  • Smaller text can be set to 0.875 rem (14px) for optimal legibility.

  • Larger text should be set to 1.25 rem (20px) to emphasize important content.

  • When using header tags, consider the following recommended font sizes:

    • H1 - 2.5 rem (40px)
    • H2 - 2 rem (32px)
    • H3 - 1.75 rem (28px)
    • H4 - 1.5 rem (24px)
    • H5 - 1.25 rem (20px)
    • H6 - 1 rem (16px)

These font sizes create a clear hierarchy, guiding users through the content with ease. These sizes are chosen from the typography guidelines in the Bootstrap CSS framework, which we'll use in a later tutorial.

Let's apply these CSS styles to use the above text sizes in our web page:

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter;
  font-weight: 500;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

#description {
  width: 50%;
  padding-right: 8px;
  font-size: 1.25rem;
}

Note that all text sizes except the base text size in the body tag is expressed in rems.

EXERCISE: Change the base text size in the body tag and observe how the size of all the text on the page changes proportionally.

Colors in CSS

Colors play a crucial role in web design, and CSS provides various ways to define and manipulate them. In this tutorial, we will explore different methods of creating colors in CSS and some guidelines for choosing good colors.

Let's look at the different ways of defining colors in CSS.

Inbuilt Color Names

CSS provides 140 pre-defined color names that can be used directly. For example, to set the color of a paragraph to red, you can use the following code:

p {
  color: red;
}

You can find the list of named colors in CSS here: https://www.w3.org/wiki/CSS/Properties/color/keywords

RGB Colors

RGB stands for red, green, and blue, which are the primary colors of light. In CSS, RGB colors can be defined using the rgb() function, which takes three values between 0 and 255 representing the intensity of each color channel.

For example, to set the background color of a page to a shade of purple, you can use the following code:

body {
  background-color: rgb(128, 0, 128);
}

You can experiment with RGB colors using the Google color picker: https://g.co/kgs/szbFJZ

Hexadecimal Color Codes

Hexadecimal colors are represented using a six-digit code that begins with a hash symbol (#). Each pair of digits represents the intensity of the red, green, and blue color channels, respectively. For example, to set the text color of a button to a light blue, you can use the following code:

button {
  color: #ADD8E6;
}

The Google color picker can also be used to convert RGB colors to hexadecimal and vice versa: https://g.co/kgs/szbFJZ

Learn more about the hexadecimal number system here: https://www.techtarget.com/whatis/definition/hexadecimal

RGBA Colors with Transparency

RGBA is similar to RGB, but with an additional alpha channel that represents opacity. Opacity is a measure of how transparent an element is, and it ranges from 0 (fully transparent) to 1 (fully opaque). In CSS, RGBA colors can be defined using the rgba() function, which takes four values: red, green, blue, and alpha. For example, to set the background color of a div to a semi-transparent red, you can use the following code:

div {
  background-color: rgba(255, 0, 0, 0.5);
}

RGBA colors can also be represented in hexadecmial format by adding two more characters to the hex notation.

CSS Color Properties

Here are some of the CSS properties that use color values:

  • color: sets the color of text
  • background-color: sets the background color of an element
  • border-color: sets the color of an element's border
  • box-shadow: sets the color of an element's shadow
  • text-shadow: sets the color of text shadow

EXERCISE: Learn more and experiment with CSS colors here: https://www.w3schools.com/css/css3_colors.asp

Picking Good Colors

Follow these guidelines for picking good colors:

  • Use color palettes: Use color palettes to ensure consistency throughout your design. A color palette is a set of colors that work well together and can be used throughout your design. In general, a few shades of one primary color and one secondary color should do the job.

  • Contrast: Ensure that the text is legible by choosing a color with high contrast against the background. Generally, light text on a dark background or vice versa works well.

  • Simplicity: Avoid using too many colors, and keep the design simple. Too many colors can be overwhelming and detract from the overall design.

  • Accessibility: Ensure that your color choices are accessible to everyone, including those with color vision deficiencies. You can use tools like Color Contrast Checker to check if your colors meet the accessibility guidelines.

NOTE: Most companies have design system which with predefined colors for various parts of the application and guidelines/examples for their usage. For now, you can this predefined color palette to pick good colors: https://tailwindcolor.com/

EXERCISE: Browse through the examples listed on these 2 sites:

Text Color Guidelines

Use these guidlines for text colors:

  1. Headings: 90% black (#222222)

  2. Body text: 75% black (#444444)

  3. Secondary text: 60% black (#666666)

  4. Disabled text: 40% black (#999999)

You may need to adjust these if the text is on a non-white background.

Let's improve the colors on our web page using the above text colors and background colors picked from https://tailwindcolor.com/.

We'll apply these CSS properties:

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #444444;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter;
  font-weight: 500;
  color: #222222;
}

#jobs-table th {
  border: 1px solid grey;
  padding: 8px;
  text-align: center;
  background-color: #BFDBFE;
  font-weight: 500;
  color: #222222;
}

#jobs-table tr:nth-child(odd) {
  background-color: #EFF6FF;
}

#footer {
  background-color: #FAFAFA;
  padding: 8px;
  margin-top: 32px;
  text-align: center;
}

Forms in HTML

form and Input Tags

HTML forms are an essential part of creating dynamic web pages. They allow users to input and submit data to the web server, which can then be processed and stored.

  • Use the <form> tag to start a form and the </form> tag to end it.

  • Use the <input>, <select> and <textarea> tag to create form fields for the user to input data. There are various types of input fields, such as text, password, email, radio buttons, checkboxes, dropdowns and more.

  • Use the <label> tag to create a label for each input field to provide more context and improve accessibility.

  • Add a button at the end to trigger form submission and set the action and method attributes to configure where the results are sent (more on this later).

Here's an example form:

<form action="process-form.php" method="post">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

The input fields have various attributes, such as "type" to specify the type of input, "id" for unique identification, "name" for server-side processing, and "required" to indicate that the field is mandatory.

HTML Form Input Types

Here are the different types of inputs in HTML, most of which are created using the input tag:

  1. Text Input: It allows users to enter text, such as name, address, email, etc. The type attribute for text input is text.

  2. Checkbox Input: It is used to select one or more options from a list of options. The type attribute for checkbox input is checkbox.

  3. Radio Input: It is used to select only one option from a list of options. The type attribute for radio input is radio. Radio buttons are grouped using the name attribute.

  4. Dropdown: It is used to create a dropdown list of options. Dropdowns are created using the select and options tags.

  5. Textarea: It allows users to input a larger amount of text, such as comments or messages. Text areas are created using the textarea tag.

  6. Date Input: It is used to input date values, such as birthdays, deadlines, etc. The type attribute for date input is date.

  7. Password Input: It is similar to the text input, but it masks the entered text with asterisks or dots for privacy and security purposes. The type attribute for password input is password.

  8. Email Input: It is used to input an email address, which can be validated using HTML5. The type attribute for email input is email.

  9. Number Input: It is used to input numerical values and has additional attributes such as min, max, and step. The type attribute for number input is number.

There are several other less commonly used input types that you can learn about here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Here's a form demonstrating usage of the above input types:


<div id="application">
    <h2>Submit Your Application</h2>

    <form id="application-form">
        <div class="form-group">
            <label for="name">Name</label><br>
            <input type="text" id="name" name="name" required placeholder="John Doe">
        </div>

        <div class="form-group">
            <label for="email">Email</label><br>
            <input type="email" id="email" name="email" required placeholder="jdoe@example.com">
        </div>
        <div class="form-group">

            <label for="phone">Phone</label><br>
            <input type="tel" id="phone" name="phone" required placeholder="+919898989898">
        </div>

        <div class="form-group">
            <label for="dob">Date of Birth</label><br>
            <input type="date" id="dob" name="dob" required>
        </div>

        <div class="form-group">
            <label for="position">Position Applied for</label><br>
            <select id="position" name="position" required>
                <option value="">Select an option</option>
                <option value="Frontend Developer">Frontend Developer</option>
                <option value="Full Stack Developer">Full Stack Developer</option>
                <option value="Data Scientist">Data Scientist</option>
                <option value="ML Engineer">ML Engineer</option>
            </select>
        </div>

        <div class="form-group">
            <label for="resume">Upload Resume</label><br>
            <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
        </div>

        <div class="form-group">
            <label for="coverletter">Cover Letter</label><br>
            <textarea id="coverletter" name="coverletter" rows="5" required placeholder="Explain what makes you suitable for the job.."></textarea>
        </div>

        <div class="form-group">
            <label for="terms">
                <input type="checkbox" id="terms" name="terms" required>
                I agree to the terms and conditions
            </label>
        </div>

        <div class="form-group">
            <input type="submit" value="Submit">
        </div>
    </form>


</div>

EXECISE: Learn more about form input types here:

Styling the Form

We can style the above form using the following CSS properties:


#application {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 8px;
}

.form-group {
  margin: 16px 0;
}

.form-group input, textarea, select{
 font-size:1.25rem;
 border-radius: 4px;
 border: 1px solid gray;
 margin-top: 4px;
 padding: 8px;
 min-width: 360px;
}

.form-group textarea{
  width: 100%;
  font-family: 'Roboto', sans-serif;
}

.form-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 0;
}

#application-form label {
  font-weight: bold;
}

#application-form input[type="submit"] {
  background-color: #2563EB;
  width: 120px;
  min-width: 0;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
}

Here's what the form looks like now:

Form Action and Submission

Form submission is an important aspect of HTML forms. It involves sending the form data to a server for processing

  • The action attribute specifies the URL of the server-side script or service that will process the form data. This URL can be an absolute or relative URL.

  • The method attribute specifies the HTTP method used to submit the form data. The most common methods are GET and POST. GET submits the form data as URL parameters, while POST submits the form data in the HTTP request body.

  • The target attribute specifies the location where the server response should be displayed. The most common values for this attribute are _self (default) and _blank. _self opens the response in the same window, while _blank opens the response in a new window.

In addition to these attributes, the submit input type is used to show a button to submit the form data. When a user clicks on a submit button, the form data is sent to the server for processing.

For static websites that don't have a server-side component, you can use third-party form submission services like Formbold to capture and receive form data via email. In a later tutorial, we will learn to create our own web server to capture form responses.

Sending Form Responses Over Email

We can use the platform https://formbold.com to sent form response over email:

  1. Sign up on formbold.com

  2. Create a new form

  3. Open the form settings

  4. From the integration tag, copy the form URL

  5. Add the form URL with a POST action in your form

  6. Follow the usage guidelines for "Form with file upload" to set other tags appropriately

  7. Reload your web page, make a sample submission, and verify that the response was recroded

We just need to add the following into our form's HTML code:

<form 
      id="application-form" 
      action="https://formbold.com/s/oaPqM" 
      method="POST" 
      enctype="multipart/form-data" >

The response should now be visible on FormBold.

HTML Meta Tags

HTML meta tags provide information about a web page to search engines and browsers. They are placed in the section of an HTML document and are not displayed on the page itself.

Common Meta Tags

There are several types of meta tags, each with its own purpose. Here are some common meta tags:

  • meta charset: This tag specifies the character encoding used in the document, which affects how text is displayed. The recommended value is UTF-8.

  • meta name="viewport": This tag specifies the viewport properties for responsive design. It includes attributes such as width, initial-scale, and minimum-scale.

  • meta name="description": This tag provides a brief summary of the page content and is used by search engines when displaying search results.

  • meta name="keywords": This tag specifies keywords related to the page content and was used in the past by search engines for indexing, but is now less important.

  • meta name="author": This tag specifies the author of the page.

  • meta name="robots": This tag specifies instructions for web crawlers, such as whether to index or follow links on the page.

Platform-Specific Meta Tags

There are also platform-specific tags for social media sites such as Facebook and Twitter. These tags are used to provide more information about the page when it is shared on these platforms. Here are some examples:

  • meta property="og:title": This tag specifies the title of the page when it is shared on Facebook and several other sites.

  • meta property="og:description": This tag specifies the description of the page when it is shared on Facebook and several other sites.

  • meta property="og:image": This tag is used to specify the image that should be displayed when a page is shared on social media platforms, such as Facebook or Twitter.

  • meta name="twitter:title": This tag specifies the title of the page when it is shared on Twitter.

  • meta name="twitter:description": This tag specifies the description of the page when it is shared on Twitter.

  • meta name="twitter:card": This is used to display the preview of the web page as a card on Twitter.

Title and Favicon

The title tag and favicon link tag are also related to meta tags.

  • The title tag specifies the title of the page, which appears in the browser's title bar and is also used by search engines.

  • The favicon link tag specifies the icon that appears in the browser's address bar and bookmark menu.

Let's add proper meta tags to our web page:


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn about job openings at Jovian and submit your application now">
    <meta name="keywords" content="data science, software development, jobs">
    <meta name="author" content="Jovian">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Jovian Careers">
    <meta property="og:description" content="Learn about job openings at Jovian and submit your application now">
    <meta property="og:image" content="/jovian_meta.png">
    <meta name="twitter:title" content="Jovian Careers">
    <meta name="twitter:description" content="Learn about job openings at Jovian and submit your application now">
    <meta name="twitter:image" content="/jovian_meta.png">
    <title>Jovian Careers</title>
    <link rel="icon" href="/jovian_favicon.png" type="image/x-icon">

Use this image as the favicon: https://i.imgur.com/GMMpgdl.png

Use this image as the meta image: https://i.imgur.com/KBD7w8k.png

Learn more about HTML meta tags here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

Deploying to the Cloud

While there are many ways to deploy a website to the cloud, we'll use a really simple platform called static.app.

Here's how it works:

  1. Make sure you have a file index.html in your project folder
  2. Create a ZIP archive using your project folder
  3. Visit https://static.app and upload the ZIP file
  4. Create an account by providing email, name and password
  5. Verify your account using the link sent over email
  6. The website will be deployed as a subdomain of static.app

That's it, your website is live! You can now share the link with your friends & colleagues and the link previews should show up properly. You also now verify that link previews show up properly using the tool https://metatags.io .

You can connect your website to custom domain by upgrading to a paid plan.

Summary and References

The following topics were 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 aesthetic appeal
  • Creating HTML form to collect user inpute and exploring various HTML input types
  • Collecting and viewing form responses using an external server
  • Using meta tags to improve how a page previews when shared as a link

Make sure to type out all the code yourself and solve all the exercises to get a better understanding of each topic.

Check out these resources to learn more: