Skip to content

Instantly share code, notes, and snippets.

@hrithikwins

hrithikwins/syllabus.md

Created August 17, 2024 18:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hrithikwins/7690f82dc4fb388a6504734dc63d6798 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hrithikwins/7690f82dc4fb388a6504734dc63d6798 to your computer and use it in GitHub Desktop.
Download ZIP
HTML syllabus
Raw
syllabus.md

HTML Learning Syllabus.

Week 1: HTML Fundamentals

  • Introduction to Web Development:
    • Overview of web technologies (HTML, CSS, JavaScript).
    • Setting up the development environment (code editor, browser).
  • Basic HTML Structure:
    • Understanding the structure of an HTML document (<!DOCTYPE html>, <html>, <head>, <body>).
    • Common HTML tags: headings (<h1> - <h6>), paragraphs (<p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>).
  • HTML Forms:
    • Creating forms with form elements (<form>, <input>, <textarea>, <button>, <select>, <option>).
    • Understanding form attributes and validation.
  • HTML Semantics and Accessibility:
    • Using semantic elements (<header>, <footer>, <article>, <section>) for better structure.
    • Introduction to accessibility best practices to create inclusive web content.
  • Project:
    • Build a simple personal profile page using HTML, incorporating all learned elements.

Week 2: CSS Fundamentals

  • Introduction to CSS:
    • Understanding the different ways to apply CSS (inline, internal, external).
    • CSS selectors and properties (class, ID, element selectors).
  • Text Styling and Layout:
    • Working with text properties (font-family, font-size, text-align, color).
    • Understanding the CSS box model (margin, padding, border, width, height).
  • CSS Positioning and Flexbox:
    • Introduction to different positioning methods (static, relative, absolute, fixed, sticky).
    • Basics of Flexbox for layout design (display: flex, justify-content, align-items).
  • CSS Grid Layout:
    • Introduction to CSS Grid for creating complex layouts.
    • Understanding grid properties (grid-template-columns, grid-template-rows, grid-area).
  • Project:
    • Style the personal profile page created in Week 1 using CSS, focusing on layout and design.

Week 3: Advanced CSS and Responsive Design

  • Advanced CSS Features:
    • Working with transitions, animations, and transformations for dynamic effects.
    • Using pseudo-classes and pseudo-elements for advanced styling.
  • Responsive Design Principles:
    • Introduction to responsive design and mobile-first development.
    • Using media queries to create layouts that adapt to different screen sizes.
  • Mobile-First Design:
    • Designing and implementing layouts starting with mobile devices.
    • Utilizing responsive units (em, rem, %, vw, vh) and responsive images.
  • CSS Preprocessors:
    • Introduction to SASS/SCSS for more powerful and maintainable CSS.
    • Working with variables, nesting, and mixins in SASS/SCSS.
  • Project:
    • Make the personal profile page responsive, ensuring it works well on both mobile and desktop devices.

Week 4: JavaScript Fundamentals

  • Basics of JavaScript:
    • Introduction to JavaScript syntax and basic programming concepts.
    • Understanding variables (var, let, const), data types, and operators.
  • Control Flow and Functions:
    • Working with conditional statements (if, else, switch) and loops (for, while, do...while).
    • Understanding functions, function scope, and best practices for writing clean code.
  • DOM Manipulation:
    • Introduction to the Document Object Model (DOM).
    • Selecting and modifying DOM elements using JavaScript.
    • Handling user events (clicks, keypresses, etc.) and updating the DOM in response.
  • Introduction to JSON and Fetch API:
    • Understanding JSON (JavaScript Object Notation) and its use in data exchange.
    • Using the Fetch API to make HTTP requests and handle responses.
  • Project:
    • Add interactivity to the personal profile page using JavaScript, such as form validation and dynamic content updates.

Week 5: Advanced JavaScript and Development Tools

  • Advanced JavaScript Concepts:
    • Exploring closures and their use cases in JavaScript.
    • Working with asynchronous JavaScript, including setTimeout, Promises, and async/await.
  • JavaScript ES6+ Features:
    • Introduction to modern JavaScript features like arrow functions, template literals, and destructuring assignments.
  • Version Control with Git:
    • Introduction to Git and version control best practices.
    • Working with Git commands (git init, git add, git commit, git push) and understanding branching and merging.
  • Build Tools and Task Runners:
    • Introduction to npm and package management.
    • Setting up basic build tools like Webpack for bundling JavaScript files.
  • Project:
    • Build a small JavaScript-based web application (e.g., a to-do list app) that incorporates ES6+ features and version control with Git.

Week 6: Final Project and Review

  • Final Project Planning:
    • Define the final project requirements based on the cumulative knowledge from previous weeks.
    • Plan and design the final project, focusing on real-world application.
  • Project Development:
    • Develop the final project, applying HTML, CSS, and JavaScript skills.
    • Implement responsive design, interactivity, and clean code practices.
  • Project Presentation and Feedback:
    • Present the final project to the cohort, demonstrating key features and the development process.
    • Participate in peer review, providing and receiving constructive feedback.
  • Course Review and Wrap-Up:
    • Review all key concepts covered in the course.
    • Discuss next steps, additional resources for continued learning, and career development tips.

This plan ensures a comprehensive learning experience over six weeks, with hands-on projects that reinforce theoretical knowledge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment