{"id":2544,"date":"2023-06-27T04:49:39","date_gmt":"2023-06-27T04:49:39","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=2544"},"modified":"2023-06-27T04:49:43","modified_gmt":"2023-06-27T04:49:43","slug":"html-crash-course","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/web-designing\/html-crash-course\/","title":{"rendered":"HTML Crash Course"},"content":{"rendered":"\n

Day 1: Introduction to HTML<\/h2>\n\n\n\n

Topics:<\/p>\n\n\n\n

  1. HTML syntax and structure<\/li>
  2. HTML tags and elements<\/li>
  3. Headings, paragraphs, and line breaks<\/li>
  4. Text formatting with HTML<\/li>
  5. Creating lists in HTML<\/li><\/ol>\n\n\n\n

    Assignments:<\/p>\n\n\n\n

    1. Create a basic HTML document structure with a title and heading.<\/li><\/ol>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<head>\n    <title>My First Webpage<\/title>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n<\/body>\n<\/html><\/pre>\n\n\n\n
      1. Write a paragraph describing your favorite hobby using appropriate HTML tags.<\/li><\/ol>\n\n\n\n
        <!DOCTYPE html>\n<html>\n<head>\n    <title>My Hobbies<\/title>\n<\/head>\n<body>\n    <h2>My Favorite Hobby<\/h2>\n    <p>I enjoy playing the guitar in my free time. It's a great way to relax and express my creativity.<\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\n
        1. Create an ordered list of your top 5 favorite movies.<\/li><\/ol>\n\n\n\n
          <!DOCTYPE html>\n<html>\n<head>\n    <title>My Favorite Movies<\/title>\n<\/head>\n<body>\n    <h2>My Top 5 Favorite Movies<\/h2>\n    <ol>\n        <li>The Shawshank Redemption<\/li>\n        <li>The Godfather<\/li>\n        <li>Pulp Fiction<\/li>\n        <li>The Dark Knight<\/li>\n        <li>Fight Club<\/li>\n    <\/ol>\n<\/body>\n<\/html><\/pre>\n\n\n\n
          1. Format a piece of text as bold, italic, and underline using HTML tags.<\/li><\/ol>\n\n\n\n
            <!DOCTYPE html>\n<html>\n<head>\n    <title>Formatted Text<\/title>\n<\/head>\n<body>\n    <p>This is <b>bold<\/b> text.<\/p>\n    <p>This is <i>italic<\/i> text.<\/p>\n    <p>This is <u>underlined<\/u> text.<\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\n
            1. Construct an unordered list of your favorite food items.<\/li><\/ol>\n\n\n\n
              <!DOCTYPE html>\n<html>\n<head>\n    <title>My Favorite Foods<\/title>\n<\/head>\n<body>\n    <h2>My Favorite Foods<\/h2>\n    <ul>\n        <li>Pizza<\/li>\n        <li>Sushi<\/li>\n        <li>Burger<\/li>\n        <li>Chocolate<\/li>\n        <li>Ice Cream<\/li>\n    <\/ul>\n<\/body>\n<\/html><\/pre>\n\n\n\n
              Day 2: Working with Links and Images<\/h2>\n\n\n\n
              Topics:<\/p>\n\n\n\n
              1. Creating hyperlinks with anchor tags<\/li>
              2. Linking to external websites and internal sections<\/li>
              3. Inserting images in HTML<\/li>
              4. Image attributes and alternative text<\/li><\/ol>\n\n\n\n
                Assignments:<\/p>\n\n\n\n
                1. Create a hyperlink that opens a new tab and leads to your favorite website.<\/li><\/ol>\n\n\n\n
                  <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n    <a href=\"https:\/\/www.example.com\" target=\"_blank\">Visit Example.com<\/a>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                  1. Link an internal section within the same webpage using anchor tags.<\/li><\/ol>\n\n\n\n
                    <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n    <a href=\"#about\">Jump to About Section<\/a>\n    <h2 id=\"about\">About<\/h2>\n\n\n    <p>This is the About section of my webpage.<\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                    1. Insert an image of your favorite animal with appropriate alt text.<\/li><\/ol>\n\n\n\n
                      <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n    <img src=\"animal.jpg\" alt=\"A picture of my favorite animal\">\n<\/body>\n<\/html><\/pre>\n\n\n\n
                      1. Create a gallery of three images using HTML and appropriate attributes.<\/li><\/ol>\n\n\n\n
                        <!DOCTYPE html>\n<html>\n<head>\n    <title>Image Gallery<\/title>\n<\/head>\n<body>\n    <h2>Image Gallery<\/h2>\n    <img src=\"image1.jpg\" alt=\"Image 1\">\n    <img src=\"image2.jpg\" alt=\"Image 2\">\n    <img src=\"image3.jpg\" alt=\"Image 3\">\n<\/body>\n<\/html><\/pre>\n\n\n\n
                        1. Add a link around an image that opens another webpage when clicked.<\/li><\/ol>\n\n\n\n
                          <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n    <a href=\"https:\/\/www.example.com\" target=\"_blank\">\n        <img src=\"image.jpg\" alt=\"Image\">\n    <\/a>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                          Day 3: Tables and Forms<\/h2>\n\n\n\n
                          Topics:<\/p>\n\n\n\n
                          1. Creating tables in HTML<\/li>
                          2. Table rows and cells<\/li>
                          3. Table headers and data<\/li>
                          4. Form elements and input types<\/li>
                          5. Form submission and handling<\/li><\/ol>\n\n\n\n
                            Assignments:<\/p>\n\n\n\n
                            1. Create a table to display a simple schedule with days of the week and corresponding activities.<\/li><\/ol>\n\n\n\n
                              <!DOCTYPE html>\n<html>\n<head>\n    <title>Weekly Schedule<\/title>\n<\/head>\n<body>\n    <h2>Weekly Schedule<\/h2>\n    <table>\n        <tr>\n            <th>Day<\/th>\n            <th>Activity<\/th>\n        <\/tr>\n        <tr>\n            <td>Monday<\/td>\n            <td>Gym<\/td>\n        <\/tr>\n        <tr>\n            <td>Tuesday<\/td>\n            <td>Work<\/td>\n        <\/tr>\n        <tr>\n            <td>Wednesday<\/td>\n            <td>Music Lessons<\/td>\n        <\/tr>\n        <tr>\n            <td>Thursday<\/td>\n            <td>Study Group<\/td>\n        <\/tr>\n        <tr>\n            <td>Friday<\/td>\n            <td>Movie Night<\/td>\n        <\/tr>\n    <\/table>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                              1. Create a form with input fields for name, email, and message, and a submit button.<\/li><\/ol>\n\n\n\n
                                <!DOCTYPE html>\n<html>\n<head>\n    <title>Contact Form<\/title>\n<\/head>\n<body>\n    <h2>Contact Form<\/h2>\n    <form action=\"submit.php\" method=\"POST\">\n        <label for=\"name\">Name:<\/label>\n        <input type=\"text\" id=\"name\" name=\"name\" required><br><br>\n        <label for=\"email\">Email:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" required><br><br>\n        <label for=\"message\">Message:<\/label>\n        <textarea id=\"message\" name=\"message\" required><\/textarea><br><br>\n        <input type=\"submit\" value=\"Submit\">\n    <\/form>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                Day 4: CSS Styling<\/h2>\n\n\n\n
                                Topics:<\/p>\n\n\n\n
                                1. CSS syntax and selectors<\/li>
                                2. Applying styles to HTML elements<\/li>
                                3. Working with colors, backgrounds, and borders<\/li>
                                4. Formatting text with CSS<\/li>
                                5. Creating layouts with CSS<\/li><\/ol>\n\n\n\n
                                  Assignments:<\/p>\n\n\n\n
                                  1. Style the headings in your webpage using CSS.<\/li><\/ol>\n\n\n\n
                                    <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n    <style>\n        h1 {\n            color: blue;\n            font-size: 24px;\n        }\n        h2 {\n            color: green;\n            font-size: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Welcome to My Webpage<\/h1>\n    <h2>About Me<\/h2>\n    <!-- Rest of the content -->\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                    1. Add a background color and padding to the paragraphs in your webpage using CSS.<\/li><\/ol>\n\n\n\n
                                      <!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n    <style>\n        p {\n            background-color: lightgray;\n            padding: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <p>This is a paragraph.<\/p>\n    <p>This is another paragraph.<\/p>\n    <!-- Rest of the content -->\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                      1. Create a navigation bar using an unordered list and style it with CSS.<\/li><\/ol>\n\n\n\n
                                        html\n<!DOCTYPE html>\n<html>\n<head>\n    <title>My Webpage<\/title>\n    <style>\n        ul {\n            list-style-type: none;\n            margin: 0;\n            padding: 0;\n            background-color: #333;\n        }\n        li {\n            display: inline-block;\n            margin-right: 10px;\n        }\n        a {\n            color: white;\n            text-decoration: none;\n            padding: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <ul>\n        <li><a href=\"#\">Home<\/a><\/li>\n        <li><a href=\"#\">About<\/a><\/li>\n        <li><a href=\"#\">Services<\/a><\/li>\n        <li><a href=\"#\">Contact<\/a><\/li>\n    <\/ul>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                        Day 5: JavaScript Basics<\/h2>\n\n\n\n
                                        Topics:<\/p>\n\n\n\n
                                        1. Introduction to JavaScript<\/li>
                                        2. Variables and data types<\/li>
                                        3. Operators and expressions<\/li>
                                        4. Control flow statements (if-else, switch)<\/li>
                                        5. Functions and event handling<\/li><\/ol>\n\n\n\n
                                          Assignments:<\/p>\n\n\n\n
                                          1. Create a JavaScript function that calculates the sum of two numbers and displays the result.<\/li><\/ol>\n\n\n\n
                                            <!DOCTYPE html>\n<html>\n<head>\n    <title>Calculator<\/title>\n    <script>\n        function calculateSum() {\n            var num1 = parseInt(document.getElementById('num1').value);\n            var num2 = parseInt(document.getElementById('num2').value);\n            var sum = num1 + num2;\n            document.getElementById('result').innerHTML = \"Sum: \" + sum;\n        }\n    <\/script>\n<\/head>\n<body>\n    <h2>Calculator<\/h2>\n    <input type=\"number\" id=\"num1\" placeholder=\"Enter number 1\"><br><br>\n    <input type=\"number\" id=\"num2\" placeholder=\"Enter number 2\"><br><br>\n    <button onclick=\"calculateSum()\">Calculate Sum<\/button>\n    <p id=\"result\"><\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                            1. Create a JavaScript function that validates a form and displays an error message if any field is empty.<\/li><\/ol>\n\n\n\n
                                              <!DOCTYPE html>\n<html>\n<head>\n    <title>Form Validation<\/title>\n    <script>\n        function validateForm() {\n            var name = document.getElementById('name').value;\n            var email = document.getElementById('email').value;\n            var message = document.getElementById('message').value;\n\n            if (name === \"\" || email === \"\" || message === \"\") {\n                alert(\"All fields are required!\");\n                return false;\n            }\n        }\n    <\/script>\n<\/head>\n<body>\n    <h2>Contact Form<\/h2>\n    <form action=\"submit.php\" method=\"POST\" onsubmit=\"return validateForm()\">\n        <label for=\"name\">Name:<\/label>\n        <input type=\"text\" id=\"name\" name=\"name\"><br><br>\n        <label for=\"email\">Email:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\"><br><br>\n        <label for=\"message\">Message:<\/label>\n        <textarea id=\"message\" name=\"message\"><\/textarea><br><br>\n        <input type=\"submit\" value=\"Submit\">\n    <\/form>\n<\/body>\n<\/html><\/pre>\n\n\n\n
                                              <\/p>\n","protected":false},"excerpt":{"rendered":"
                                              Day 1: Introduction to HTML Topics: HTML syntax and structure HTML tags and elements Headings, paragraphs, and line breaks Text formatting with HTML Creating lists in HTML Assignments: Create a basic HTML document structure with a title and heading. Write a paragraph describing your favorite hobby using appropriate HTML tags. Create an ordered list of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2544"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2544"}],"version-history":[{"count":1,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2544\/revisions"}],"predecessor-version":[{"id":2545,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2544\/revisions\/2545"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}