Hands on Lab

Designed for IEEE-JUIT Web Team

General Instructions:

It is a completely self explained Hands on Labs.
Click on Highlighted text for more details.
Press Down arrow key to move to next step.
Press Right arrow key to move to next level.
Toggle HTML/CSS tabs on/off for a fast responsiveness.

Level 0: Basic Web Page Elements


  <!DOCTYPE html>

  <html lang="en">
    <head>
        <title> WebPage Title </title>

    </head>
    <!-- Comments Here --> 
    <body>
        <CENTER>
            <H1> Welcome Headline </H1>
            <BR> <HR>
            <P> Paragraph Here</P>
        </CENTER>
    </body>
  </html>

Level 0.1: HTML5 Semantic Elements

A High Level, Blank Layout for our website.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content

Migration from HTML4 to HTML5

Level 1: Navigation

CSS: Cursor Property

For more details, click here

Level 1.2: Bootstrap Navigation

Note that: There is no CSS, while HTML is full of classes

Level 2: Cover Page

Try to toggle CSS/HTML tab on/off

Level 3: About Section

Click here, to know more about Bootstrap Grid System.

Level 4: Features Section

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.