DEV Community

Rahul Patel
Rahul Patel

Posted on

Learn Full-Stack Development: Part 1 - Mastering HTML and CSS in 10 Days

This course is part of a complete full-stack development program, focusing on HTML and CSS. You'll learn the essential skills to build and style websites and apply your knowledge through practical tasks.

Day 1: Introduction to HTML

  • Topics Covered:

    • What is HTML and its role in web development.
    • Basic structure of an HTML document: <!DOCTYPE html>, <html>, <head>, <body>.
    • Explanation of elements and tags.
    • Basic HTML tags:
    • Headings (<h1> to <h6>), paragraphs (<p>), line breaks (<br>), and horizontal rules (<hr>).
    • Metadata: <title>, <meta>, <link>, and the importance of the <head> section.
    • Setting up your development environment:
    • Introduction to code editors like VS Code or Sublime.
    • Creating and viewing your first HTML file in a browser.

  • Task: Create a Personal Introduction Page

    1. Create a basic HTML document with a proper structure.
    2. Add a title and a heading introducing yourself.
    3. Use paragraphs to describe your hobbies and interests.
    4. Add a horizontal line and line breaks where necessary.

Day 2: HTML Text Formatting and Semantic HTML

  • Topics Covered:

    • Text formatting tags:
    • <b>, <i>, <u>, <strong>, <em>, <mark>, <code>.
    • Grouping content with <div> and <span>.
    • Lists:
    • Ordered Lists (<ol>), Unordered Lists (<ul>), and Description Lists (<dl>).
    • Semantic HTML elements:
    • <header>, <footer>, <article>, <section>, <aside>, <nav>, <main>.

  • Task: Semantic Blog Post Layout

    1. Create a blog post structure using semantic tags like <header>, <article>, <section>, and <footer>.
    2. Format the content using <b>, <i>, <mark>, <code>, and other text formatting tags.
    3. Include an ordered list of your favorite books and an unordered list of your favorite movies.

Day 3: HTML Links, Navigation, and Media

  • Topics Covered:

    • Creating links with <a>: absolute vs. relative URLs, and using target="_blank".
    • Embedding media:
    • Adding images with <img> and embedding YouTube videos using <iframe>.

  • Task: Create a Portfolio with Navigation and Media

    1. Create a simple portfolio page.
    2. Add navigation links (Home, About, Contact) using <a>.
    3. Insert an image of yourself using <img> and embed a YouTube video about web development using <iframe>.

Day 4: HTML Forms and Form Elements

  • Topics Covered:

    • Structure of a form: <form>, action, method.
    • Input types: text, email, radio, checkbox, date, etc.
    • Adding labels for inputs and buttons for submission.

  • Task: Feedback Form

    1. Create a feedback form with various input types (text, email, radio, checkbox, and date).
    2. Add labels for each input field.
    3. Include a Submit button and apply basic HTML5 form validation.

Day 5: HTML Tables and Attributes

  • Topics Covered:

    • Creating tables with <table>, <tr>, <td>, <th>.
    • Using <thead>, <tbody>, <tfoot> for better structure.
    • Applying attributes like id, class, title, and lang.

  • Task: Build a Simple Pricing Table

    1. Create a table for a pricing plan with columns like Plan Name, Features, and Price.
    2. Add a header row and use <thead>, <tbody>, and <tfoot>.
    3. Use attributes like id and class for future styling.

Day 6: Introduction to CSS and Selectors

  • Topics Covered:

    • What is CSS, and how it separates content from style.
    • Applying inline, internal, and external CSS.
    • Basic CSS syntax: selectors, properties, and values.

  • Task: Apply Styling to Your Portfolio

    1. Link an external CSS file to your portfolio from Day 3.
    2. Style the navigation bar using id and class selectors.
    3. Change the background color of the page and apply custom font styles using font-family.

Day 7: CSS Colors, Backgrounds, and Fonts

  • Topics Covered:

    • Working with colors in HEX, RGB, HSL formats.
    • Background properties: background-color, background-image, etc.
    • Styling fonts: font-family, font-size, and using custom fonts.

  • Task: Fun Color Palette Page

    1. Create a page showcasing different color palettes.
    2. Use colored boxes to display each palette using background-color.
    3. Include the color codes inside each box using styled text.

Day 8: CSS Box Model and Layout Techniques

  • Topics Covered:

    • Understanding the box model: padding, border, and margin.
    • Positioning elements using float, clear, and the position property.

  • Task: Box Model Debugging Game

    1. Create a simple card layout for displaying user profiles.
    2. Use padding, margin, and borders to adjust spacing and appearance.
    3. Add a button that expands the card when clicked, demonstrating box-sizing.

Day 9: CSS Flexbox and Grid Layout

  • Topics Covered:

    • Flexbox properties: justify-content, align-items, etc.
    • CSS Grid for defining grid containers and placing items.

  • Task: Flexbox Tic-Tac-Toe Game Board

    1. Create a 3x3 Tic-Tac-Toe game board using CSS Flexbox.
    2. Align the cells to be perfectly centered and responsive.
    3. Add hover effects to change the background color of each cell when hovered.

Day 10: Responsive Design and CSS Animations

  • Topics Covered:

    • Using media queries for responsive design.
    • Adding CSS transitions and animations.

  • Task: Responsive Portfolio with Animations

    1. Make your portfolio from Day 3 responsive using media queries.
    2. Add transitions to your navigation links (e.g., smooth color changes on hover).
    3. Include a simple animation for your profile picture that rotates or scales on page load.

Final Task: Build a Personal Website with All Learnings

  • Objective: Create a complete personal website that includes:
    1. Home Page: Introduces you with headings, paragraphs, and media (images/videos).
    2. Portfolio Section: Showcases your projects with a responsive grid layout.
    3. Contact Form: Allows visitors to send feedback.
    4. Responsive Design: Optimized for both desktop and mobile using media queries.
    5. Animations and Transitions: Enhance the site with subtle animations and transitions.

Top comments (0)