👨🏻‍💻 HTML & CSS 💻

Web Development Course

Curriculum Overview

1.1 What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages. HTML describes the structure of web pages using markup. HTML elements are the building blocks of HTML pages. They are represented by tags.

Definition

HTML is used to structure content on the web. It consists of a set of elements that can be nested and combined to create various types of content.

History

HTML was invented by Tim Berners-Lee in 1991. It has evolved over the years, with HTML5 being the latest version.

Basic Structure

An HTML document typically includes a `` declaration, ``, ``, and `` tags. The `` contains metadata, while the `` contains the content of the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

1.2 Setting Up Your Development Environment

Before you start coding in HTML, you'll need to set up your development environment. This typically includes installing a text editor and a web browser.

Installing VS Code

Visual Studio Code (VS Code) is a popular code editor that provides features such as syntax highlighting, code completion, and debugging tools.

Using AI Chatbots

AI chatbots like ChatGPT can assist with coding questions and provide code snippets and explanations.

Environment Setup

Set up a workspace in VS Code, create a new folder for your project, and start writing HTML files. Familiarize yourself with the VS Code interface and extensions for HTML development.

1.3 Your First HTML Page

Now that you have set up your environment, it’s time to create your first HTML page. This involves writing basic HTML code and viewing it in your browser.

Creating a Page

Create a new HTML file in VS Code. Save it with a `.html` extension and start writing your HTML code.

Using ChatGPT for Tips

Ask ChatGPT for tips and best practices as you write your HTML code. It can help you with syntax, structure, and debugging.

Hands-On Exercise

Write a simple HTML page that includes headings, paragraphs, and links. Practice using different HTML elements and attributes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example</a>
  </body>
</html>

2.1 Basic HTML Elements

HTML elements are the building blocks of web pages. They include headings, paragraphs, links, and images.

Headings

Headings are defined using the <h1> to <h6> tags, with <h1> being the highest level and <h6> the lowest.

Paragraphs

Paragraphs are defined using the <p> tag. They are used to group related sentences and text.

Links

Links are created using the <a> tag, with the href attribute specifying the URL.

Images

Images are embedded using the <img> tag, with the src attribute pointing to the image file.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Basic HTML Elements</title>
          </head>
          <body>
            <h1>Main Heading</h1>
            <p>This is a paragraph of text.</p>
            <a href="https://www.example.com">Visit Example</a>
            <img src="image.jpg" alt="Sample Image">
          </body>
        </html>

2.2 HTML Attributes

Attributes provide additional information about HTML elements and are defined within the opening tag of an element.

Common Attributes

Some common attributes include id, class, and style. They are used to add identifiers, group elements, and apply inline styles.

Using Attributes

Attributes are written as name-value pairs, such as class="my-class" or id="unique-id".

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>HTML Attributes</title>
          </head>
          <body>
            <div id="container" class="main">
              <p style="color: red;">Styled text</p>
            </div>
          </body>
        </html>

2.3 Lists and Tables

Lists and tables are used to organize and display data in a structured format.

Lists

Lists can be ordered (<ol>) or unordered (<ul>). List items are defined with the <li> tag.

Tables

Tables are created using the <table> tag, with rows defined by <tr> and cells by <td>.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Lists and Tables</title>
          </head>
          <body>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
            <table>
              <tr>
                <th>Header 1</th>
                <th>Header 2</th>
              </tr>
              <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
              </tr>
            </table>
          </body>
        </html>

3.1 Forms and Input

Forms are a critical part of HTML that allow users to submit data to a server. They are used for various purposes such as user registration, feedback collection, and search functionalities.

Creating Forms

Forms are defined using the <form> tag. Within this tag, you can include various form controls like text fields, checkboxes, radio buttons, and submit buttons.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Forms Example</title>
          </head>
          <body>
            <form action="/submit" method="post">
              <label for="name">Name:</label>
              <input type="text" id="name" name="name" required>
              
              <label for="email">Email:</label>
              <input type="email" id="email" name="email">
              
              <label for="message">Message:</label>
              <textarea id="message" name="message"></textarea>
              
              <input type="submit" value="Submit">
            </form>
          </body>
        </html>

Validation

Form validation can be performed using HTML attributes such as required, pattern, and minlength. For more complex validation, JavaScript or server-side validation can be used.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Form Validation</title>
          </head>
          <body>
            <form action="/submit" method="post">
              <label for="age">Age (must be 18 or older):</label>
              <input type="number" id="age" name="age" min="18" required>
              
              <input type="submit" value="Submit">
            </form>
          </body>
        </html>

3.2 Semantic HTML

Semantic HTML uses elements that clearly describe their meaning in a human- and machine-readable way. This helps with accessibility, SEO, and code clarity.

Semantic Elements

Semantic elements include <header>, <footer>, <article>, <section>, <nav>, and <aside>. These elements provide more context and meaning to the content they contain.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Semantic HTML Example</title>
          </head>
          <body>
            <header>
              <h1>Website Title</h1>
              <nav>
                <a href="#home">Home</a>
                <a href="#about">About</a>
              </nav>
            </header>
        
            <main>
              <article>
                <h2>Article Title</h2>
                <p>Article content goes here.</p>
              </article>
        
              <aside>
                <h3>Related Links</h3>
                <p>Links related to the article.</p>
              </aside>
            </main>
        
            <footer>
              <p>© 2024 Your Company</p>
            </footer>
          </body>
        </html>

Best Practices

Use semantic elements to structure your HTML documents properly. This improves readability and helps screen readers and search engines understand your content better.

3.3 Multimedia Elements

HTML allows you to embed multimedia content like images, audio, and video. This enhances the user experience by providing richer content.

Embedding Images

Images are embedded using the <img> tag. The src attribute specifies the image file, and the alt attribute provides alternative text for accessibility.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Image Example</title>
          </head>
          <body>
            <img src="image.jpg" alt="Description of image">
          </body>
        </html>

Embedding Audio and Video

Audio and video are embedded using the <audio> and <video> tags, respectively. You can include controls for playback and provide multiple sources for compatibility.

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Audio and Video Example</title>
          </head>
          <body>
            <audio controls>
              <source src="audio.mp3" type="audio/mpeg">
              Your browser does not support the audio element.
            </audio>
        
            <video controls width="600">
              <source src="video.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>
          </body>
        </html>

Troubleshooting Media

If media does not display correctly, ensure that:

  • The src attribute is correctly pointing to the file location.
  • The file format is supported by the browser.
  • The file is accessible and not restricted by permissions.

4.1 Basic CSS Syntax and Selectors

Cascading Style Sheets (CSS) is used to style HTML documents. CSS allows you to control the layout, colors, fonts, and overall appearance of your web pages.

Basic Syntax

CSS rules are defined by selectors and declarations. A selector targets an HTML element, and a declaration block specifies the styles to apply.

selector {
          property: value;
        }

Example

This example changes the color and font size of all <h1> elements:

h1 {
          color: #3498db;
          font-size: 3rem;
        }

Selecting Elements

Selectors can be simple (like element selectors) or complex (like class and ID selectors).

/* Element Selector */
        p {
          color: #333;
        }
        
        /* Class Selector */
        .button {
          background-color: #ff5722;
        }
        
        /* ID Selector */
        #header {
          font-size: 2rem;
        }

ChatGPT Resources

Use ChatGPT to generate CSS code snippets, understand selectors, and debug CSS issues by providing specific prompts related to styling challenges.

4.2 Styling Text and Layouts

CSS provides powerful tools for styling text and layouts. This includes adjusting font properties, colors, text alignment, and managing page layout.

Text Styles

Common text properties include color, font-family, font-size, font-weight, and text-align.

/* Text Color */
        p {
          color: #555;
        }
        
        /* Font Size and Weight */
        h2 {
          font-size: 2rem;
          font-weight: bold;
        }
        
        /* Text Alignment */
        .center-text {
          text-align: center;
        }

Layouts

CSS layout techniques include Flexbox and Grid, which are used for creating responsive and flexible layouts.

Flexbox

Flexbox is ideal for one-dimensional layouts (either rows or columns).

.container {
          display: flex;
          justify-content: space-between;
        }
        
        /* Flex Items */
        .item {
          flex: 1;
          margin: 10px;
        }
Grid

CSS Grid is suitable for two-dimensional layouts (rows and columns).

.grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }
        
        /* Grid Items */
        .grid-item {
          background-color: #f4f4f4;
          padding: 20px;
        }

ChatGPT Resources

Ask ChatGPT for design tips, layout ideas, and specific CSS properties to achieve desired styles and layouts.

4.3 Responsive Design

Responsive design ensures your web pages look good on all devices, from desktops to mobile phones. This is achieved through flexible grids, layouts, and media queries.

Media Queries

Media queries apply different styles based on the device's characteristics, such as width and orientation.

@media (max-width: 768px) {
          .container {
            flex-direction: column;
          }
        }

Fluid Layouts

Use relative units like percentages and viewport units to create fluid layouts that adjust to different screen sizes.

.container {
          width: 80%;
          margin: 0 auto;
        }

Flexible Images

Ensure images are responsive by setting their maximum width to 100%.

img {
          max-width: 100%;
          height: auto;
        }

ChatGPT Resources

Utilize ChatGPT to learn about responsive design principles, generate media query examples, and troubleshoot layout issues.

5.1 Generating HTML Code with ChatGPT

ChatGPT can assist you in generating HTML code by providing specific prompts related to your needs. You can use it to create basic HTML structures, generate content, and handle more complex HTML tasks.

Prompt Examples

Here are some example prompts you can use with ChatGPT:

Prompt: "Generate a basic HTML template with a header, main content area, and footer."
Prompt: "Create an HTML form with fields for name, email, and a submit button."

Hands-On Exercise

Try generating a complete HTML page using ChatGPT. For example, ask it to create a landing page with a navigation bar, hero section, and contact form.

5.2 Generating CSS Code with ChatGPT

ChatGPT can help generate CSS styles based on your design requirements. You can ask it to create styles for specific elements, layouts, and themes.

Prompt Examples

Here are some example prompts you can use with ChatGPT:

Prompt: "Generate CSS styles for a responsive navigation bar with a hover effect."
Prompt: "Create CSS for a card layout with a shadow effect and rounded corners."

Hands-On Exercise

Ask ChatGPT to style a simple HTML page. For instance, request CSS for a blog post layout that includes a header, content section, and sidebar.

5.3 Debugging with ChatGPT

ChatGPT can assist in debugging your HTML and CSS by helping you identify issues and providing suggestions for fixes. You can describe your problem, and ChatGPT can offer solutions.

Prompt Examples

Here are some example prompts you can use with ChatGPT:

Prompt: "I'm having trouble with my CSS layout; the sidebar is not aligning correctly. How can I fix this?"
Prompt: "My HTML form is not displaying correctly in the browser. Can you help me debug the code?"

Hands-On Exercise

Provide ChatGPT with a snippet of problematic HTML or CSS code and ask it to help identify and resolve the issues. For example, give it a code snippet where the styling isn't applied as expected and seek advice on corrections.