WD 1: Introduction to HTML and CSS

Beginners tutorial to learn about the basics of HTML and CSS

HTML and CSS: The Building Blocks of Web Design

Start learning HTML and CSS for web design today. HTML provides the structure for your site, while CSS allows you to style and customize it. Master these foundational skills to create functional and visually appealing websites.

Introduction to HTML/CSS

Created by : @freeCodeCamp.org

Introduction to Grid

Created by : @Jesse Showalter

How to use 12 column Grid for website

Created by : @DesignerWisdom

1. Understanding HTML (HyperText Markup Language)

HTML forms the backbone of every webpage by structuring its content.

  • Definition:HTML uses tags to mark up different sections of a webpage. These tags define headings, paragraphs, images, links, tables, and more.
  • Key Elements:
    • Headings: Represent titles or subtitles using <h1> to <h6>.
    • Paragraphs: Represented by <p> tags for text.
    • Links: Hyperlinks created using the <a> tag to connect web pages.
  • Advantages of HTML:
    • Cross-browser compatibility ensures consistent behavior.
    • Simplifies multimedia embedding through tags like <audio> and <video>.

2. CSS (Cascading Style Sheets): Adding Design to the Web

CSS enhances the visual appeal of a webpage.

  • Definition:CSS applies styles like color, font, and layout to HTML content.
  • Types of CSS:
    • Inline CSS: Styles written directly within the HTML tag.Example: <p style="color: red;">This is red text.</p>
    • Internal CSS: Styles defined within the <style> tag in the <head>.
    • External CSS: A separate .css file linked to the HTML document.
  • Common Styling Properties:
    • Colors: Control text, background, and border colors.Example: color: #333; background-color: #f0f0f0;
    • Fonts: Customize size, typeface, and weight.Example: font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;
    • Layouts: Use Flexbox or Grid for arranging content.

3. Relationship Between HTML and CSS

HTML and CSS complement each other to create functional and visually appealing websites.

  • HTML’s Role: Provides structure and semantic meaning.
  • CSS’s Role: Defines how the content appears (e.g., color, spacing).
  • Benefits of Integration:
    • Easier maintenance with external stylesheets.
    • Enhances user experience by separating content and design.

4. Key Concepts in HTML

  • Semantic Elements:
    Tags like <header>, <footer>, and <article> convey meaning to browsers and search engines. 
    <article>
    <h2>Introduction to Web Development</h2>
    <p>This article explains the basics of HTML and CSS.</p>
</article>
  • Forms and Input Fields:
    HTML supports user interaction through form elements like text fields, checkboxes, and dropdowns. 
    <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>
  • Media Embedding:
    Embed images using <img> and videos using <video>.Example: <img src="image.jpg" alt="Descriptive Text">

5. Core Principles of CSS

  • Selectors: CSS selectors are used to target HTML elements for styling.
  • Box Model: Every element is treated as a box, which includes content, padding, border, and margin.
  • Cascading Order: CSS rules cascade from top to bottom, with the last defined rule taking precedence.
  • Specificity: More specific selectors (like class or ID) override less specific ones (like element tags).
  • Flexbox: A layout model that aligns elements easily with flexible boxes.
  • Grid Layout: A layout system that divides the page into rows and columns for precise control over design.

Report abusive, offending, missing or broken link report@prodesignschool.com

Resources
Code pen

The best place to build, test, and discover front-end code.

More Reading List
Introduction to HTML

Getting started with HTML

Join Our Mail List

To get latest updates on courses and news regarding education.