Skip to main content

Syllabus

Course Title: Basic Web Development: HTML and CSS​

Course Duration: 8 weeks (2 hours per week)

Week 1​

  • Introduction to web development
  • Understanding the structure of a web page
  • Introduction to HTML tags and elements
  • Creating a basic HTML document
  • Working with headings, paragraphs, and line breaks

Week 2​

  • Formatting text with HTML tags
  • Creating lists (ordered and unordered)
  • Adding links and anchors
  • Working with images and image attributes
  • Creating tables and table attributes

Week 3​

  • Introduction to CSS
  • Inline CSS, internal CSS, and external CSS
  • Selectors and basic styling properties
  • Changing text properties (color, size, font)
  • Modifying backgrounds (color, image, repeat)

Week 4​

  • Box model concept (margins, borders, padding)
  • Working with divs and spans
  • Positioning elements (static, relative, absolute)
  • Floating elements and clearing floats
  • Introduction to responsive web design

Week 5​

  • Building navigation menus
  • Creating CSS-based layouts (grid, flexbox)
  • Adding borders, shadows, and gradients
  • Working with CSS3 transitions and animations
  • Introduction to CSS frameworks (e.g., Bootstrap)

Week 6​

  • Understanding CSS preprocessors (e.g., SASS, LESS)
  • Managing stylesheets with preprocessors
  • Using variables and mixins
  • Creating nested selectors and parent references
  • Compiling and integrating preprocessors into a project

Week 7​

  • Introduction to CSS libraries (e.g., Font Awesome)
  • Optimizing web performance (minification, compression)
  • Working with vendor prefixes and browser compatibility
  • Introduction to debugging and browser developer tools
  • Best practices for organizing and maintaining CSS code

Week 8​

  • Final project: Creating a multi-page website
  • Applying HTML structure and CSS styling
  • Incorporating responsive design principles
  • Testing and debugging the website
  • Deployment options for hosting the website

Please note that this syllabus provides a basic outline for a web development course focusing on HTML and CSS. You can customize it further based on your specific requirements, pace, and additional topics you'd like to cover, such as JavaScript, responsive frameworks, or advanced CSS techniques.