Agenda

Logistics

<aside> 📌 Reminders

• Submit lab by September 15, 2024 </aside>

Contact: [email protected]

Practical → review material + time to complete lab

Introduction to HTML & CSS

1. Setting up the Web Application

• Use HTML to create the basic structure of your webpage.
• Apply CSS to style your webpage.
• Key CSS Concepts:

  • Use max-width and margin: auto; to centre your content:

    body {
        max-width: 60%;
        margin: auto;
    }
    
    

2. Working with HTML Forms

• HTML forms are used to collect user input.

• Modify the form to include a textarea for posting messages and a submit button.

• Example of adding a textarea:

  <textarea class="form_element" placeholder="Enter your message"></textarea>
  
  

• Example of adding a submit button:

  <input type="submit" class="btn" value="Submit">
  
  

3. Building an HTML Structure

• Define a structure to display messages below the form.

• Include elements like user name, profile picture, message content, and action icons.

• Example HTML structure for a message:

  <div class="message">
  		<!-- TODO -->
      <div class="actions">
          <!-- TODO -->
      </div>
  </div>
  
  

4. Understanding CSS

• Use CSS to style your HTML elements and make your app visually appealing.