Ultimate HTML and CSS Series: Part 1 Fundamentals

Jul 3, 2024

Ultimate HTML and CSS Series: Part 1 Fundamentals 💻

Course Overview

  • Series Goal: Teach essential skills to build fast and beautiful websites from scratch.
  • Part 1: Fundamentals of web development with HTML and CSS.
  • Part 2: Advanced concepts.
  • Part 3: Build a complete, responsive, and fast website for an imaginary cloud hosting company, Mashify.
  • Instructor: Ash Hamadani.

Tools and Setup

Required Tools

  1. Code Editor: Recommended VS Code.
    • Alternatives: Sublime Text, Atom, etc.
  2. Extensions for VS Code:
    • Prettier - Code Formatter: Automatically formats code. (9M+ downloads)
    • Live Server: Launches a development web server. (8M+ downloads)
  3. Browser: Recommended Google Chrome for consistency in following the course.

Extension Installation

  • Open VS Code, go to Extensions panel.
  • Search and install Prettier - Code formatter and Live Server.
  • Configure VS Code to use Prettier for code formatting and Live Server for launching development web server.

Fundamentals of Web Development

Frontend vs Backend

  1. Frontend:
    • What users interact with in the browser (visual aspects).
    • Tools: HTML, CSS, JavaScript.
  2. Backend:
    • Powers the frontend (data storage and retrieval).

Key Languages

  1. HTML (HyperText Markup Language): Structure of webpages.
  2. CSS (Cascading Style Sheets): Styling webpages.
  3. JavaScript: Adding functionality to webpages.

Development Roadmap

  1. HTML & CSS: 1-1.5 months.
  2. JavaScript: Additional 6 weeks.
  3. Front-end Frameworks/Libraries: E.g., React (another 1-2 months).
  4. Version Control Systems: Git (2 weeks).

Frontend Frameworks/Libraries

  • Widely used to build applications faster.
  • Popular choices: React, Angular, Vue.
  • Recommendation: Start with React.

How the Web Works

Client-Server Model

  • Client: Browser (requests service).
  • Server: Hosts website (provides service).
  • Communication happens through HTTP/HTTPS protocol.

HTTP Requests and Responses

  1. HTTP Request: Browser requests a resource (e.g., index.html).
  2. HTTP Response: Server responds with the requested resource (e.g., HTML document).

Viewing HTTP Traffic

  • Use Chrome DevTools to inspect network traffic.
  • Access via View > Developer > Developer Tools or its shortcut.

Building a Simple Webpage

Creating an HTML Document

  • Create a folder.
  • Open folder in VS Code.
  • Create index.html. 
    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="images/mosh.jpg" alt="Image of Mosh">
        <p>@moshhamadani</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>
  • Launch with Live Server.

Styling with CSS

  • Adding CSS within <style> tag inside <head>. 
    <style>
    img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
    }
    .username {
        font-weight: bold;
    }
</style>

Using Prettier

  • Format code using Prettier for consistent style.
  • Enable format on save in VS Code settings.

Inspecting and Validating Pages

HTML Elements

Text Elements

  • <p>: Paragraphs
  • <em>: Emphasized text (typically italicized)
  • <strong>: Strongly emphasized text (typically bold)
  • Headings: <h1> to <h6> – create a hierarchy.

Special Characters in HTML

  • Use HTML entities for reserved characters.
    • < : &lt;
    • > : &gt;
    • © : &copy;
    • Non-breaking space: &nbsp;

Links

  • Use <a> tag with href attribute for hyperlinks. 
    <a href="about.html">About Me</a>
<a href="/company/about.html">About Company</a>
<a href="https://google.com" target="_blank">Google</a>
<a href="mailto:example@example.com">Email Me</a>

Images

  • Use <img> tag with src and alt attributes. 
    <img src="images/coffee.jpg" alt="Coffee Mug on a Table">
  • Use CSS to style images.

Validation

Next Steps

  • Proceed to learn more detailed HTML elements (text, links, images, lists, tables, containers/semantic elements).
  • Continue applying best practices for structuring and styling webpages.