Category: web designing

HTML Crash Course

by

June 27, 2023

4:49 am

Leave a comment on HTML Crash Course

web designing

Day 1: Introduction to HTML

Topics:

  1. HTML syntax and structure
  2. HTML tags and elements
  3. Headings, paragraphs, and line breaks
  4. Text formatting with HTML
  5. Creating lists in HTML

Assignments:

  1. Create a basic HTML document structure with a title and heading.
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
</body>
</html>
  1. Write a paragraph describing your favorite hobby using appropriate HTML tags.
<!DOCTYPE html>
<html>
<head>
    <title>My Hobbies</title>
</head>
<body>
    <h2>My Favorite Hobby</h2>
    <p>I enjoy playing the guitar in my free time. It's a great way to relax and express my creativity.</p>
</body>
</html>
  1. Create an ordered list of your top 5 favorite movies.
<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Movies</title>
</head>
<body>
    <h2>My Top 5 Favorite Movies</h2>
    <ol>
        <li>The Shawshank Redemption</li>
        <li>The Godfather</li>
        <li>Pulp Fiction</li>
        <li>The Dark Knight</li>
        <li>Fight Club</li>
    </ol>
</body>
</html>
  1. Format a piece of text as bold, italic, and underline using HTML tags.
<!DOCTYPE html>
<html>
<head>
    <title>Formatted Text</title>
</head>
<body>
    <p>This is <b>bold</b> text.</p>
    <p>This is <i>italic</i> text.</p>
    <p>This is <u>underlined</u> text.</p>
</body>
</html>
  1. Construct an unordered list of your favorite food items.
<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Foods</title>
</head>
<body>
    <h2>My Favorite Foods</h2>
    <ul>
        <li>Pizza</li>
        <li>Sushi</li>
        <li>Burger</li>
        <li>Chocolate</li>
        <li>Ice Cream</li>
    </ul>
</body>
</html>

Day 2: Working with Links and Images

Topics:

  1. Creating hyperlinks with anchor tags
  2. Linking to external websites and internal sections
  3. Inserting images in HTML
  4. Image attributes and alternative text

Assignments:

  1. Create a hyperlink that opens a new tab and leads to your favorite website.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <a href="https://www.example.com" target="_blank">Visit Example.com</a>
</body>
</html>
  1. Link an internal section within the same webpage using anchor tags.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <a href="#about">Jump to About Section</a>
    <h2 id="about">About</h2>


    <p>This is the About section of my webpage.</p>
</body>
</html>
  1. Insert an image of your favorite animal with appropriate alt text.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <img src="animal.jpg" alt="A picture of my favorite animal">
</body>
</html>
  1. Create a gallery of three images using HTML and appropriate attributes.
<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery</title>
</head>
<body>
    <h2>Image Gallery</h2>
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</body>
</html>
  1. Add a link around an image that opens another webpage when clicked.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <a href="https://www.example.com" target="_blank">
        <img src="image.jpg" alt="Image">
    </a>
</body>
</html>

Day 3: Tables and Forms

Topics:

  1. Creating tables in HTML
  2. Table rows and cells
  3. Table headers and data
  4. Form elements and input types
  5. Form submission and handling

Assignments:

  1. Create a table to display a simple schedule with days of the week and corresponding activities.
<!DOCTYPE html>
<html>
<head>
    <title>Weekly Schedule</title>
</head>
<body>
    <h2>Weekly Schedule</h2>
    <table>
        <tr>
            <th>Day</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td>Monday</td>
            <td>Gym</td>
        </tr>
        <tr>
            <td>Tuesday</td>
            <td>Work</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>Music Lessons</td>
        </tr>
        <tr>
            <td>Thursday</td>
            <td>Study Group</td>
        </tr>
        <tr>
            <td>Friday</td>
            <td>Movie Night</td>
        </tr>
    </table>
</body>
</html>
  1. Create a form with input fields for name, email, and message, and a submit button.
<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h2>Contact Form</h2>
    <form action="submit.php" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Day 4: CSS Styling

Topics:

  1. CSS syntax and selectors
  2. Applying styles to HTML elements
  3. Working with colors, backgrounds, and borders
  4. Formatting text with CSS
  5. Creating layouts with CSS

Assignments:

  1. Style the headings in your webpage using CSS.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        h2 {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <h2>About Me</h2>
    <!-- Rest of the content -->
</body>
</html>
  1. Add a background color and padding to the paragraphs in your webpage using CSS.
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <style>
        p {
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <!-- Rest of the content -->
</body>
</html>
  1. Create a navigation bar using an unordered list and style it with CSS.
html
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #333;
        }
        li {
            display: inline-block;
            margin-right: 10px;
        }
        a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Day 5: JavaScript Basics

Topics:

  1. Introduction to JavaScript
  2. Variables and data types
  3. Operators and expressions
  4. Control flow statements (if-else, switch)
  5. Functions and event handling

Assignments:

  1. Create a JavaScript function that calculates the sum of two numbers and displays the result.
<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <script>
        function calculateSum() {
            var num1 = parseInt(document.getElementById('num1').value);
            var num2 = parseInt(document.getElementById('num2').value);
            var sum = num1 + num2;
            document.getElementById('result').innerHTML = "Sum: " + sum;
        }
    </script>
</head>
<body>
    <h2>Calculator</h2>
    <input type="number" id="num1" placeholder="Enter number 1"><br><br>
    <input type="number" id="num2" placeholder="Enter number 2"><br><br>
    <button onclick="calculateSum()">Calculate Sum</button>
    <p id="result"></p>
</body>
</html>
  1. Create a JavaScript function that validates a form and displays an error message if any field is empty.
<!DOCTYPE html>
<html>
<head>
    <title>Form Validation</title>
    <script>
        function validateForm() {
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var message = document.getElementById('message').value;

            if (name === "" || email === "" || message === "") {
                alert("All fields are required!");
                return false;
            }
        }
    </script>
</head>
<body>
    <h2>Contact Form</h2>
    <form action="submit.php" method="POST" onsubmit="return validateForm()">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>