Web Design Basics (HTML/CSS)

Week 1: Introduction to Web Design
What is Web Design?
- Understanding websites and how they work.
- Exploring different types of websites.
- Introduction to HTML and CSS: The building blocks of web design.
Setting Up the Environment
- Installing a simple text editor (e.g., Notepad++, VS Code).
- Overview of web browsers and how they display websites.
- Creating your first HTML file.
Week 2: Getting Started with HTML
Basic HTML Structure
- Understanding the structure of an HTML document: (!DOCTYPE, html, head, and body. )
- Creating and saving an HTML file.
Creating Your First Webpage
- Adding headings (h1 to h6), paragraphs (p), and links (a).
- Inserting images (img).
- Creating lists: Ordered (ol) and unordered (ul) lists.
Week 3: Diving Deeper into HTML
Working with Tables and Forms
- Creating tables: table, tr, th, td.
- Building a basic form: Text fields, checkboxes, radio buttons, and submit buttons.
Understanding Semantic HTML
- Introduction to semantic elements: header, nav, section, article, footer.
- Structuring content for better readability and accessibility.
Week 4: Introduction to CSS
What is CSS?
- Understanding the purpose of CSS in web design.
- How to link CSS to an HTML document: Inline, internal, and external styles.
Basic CSS Syntax
- Writing your first CSS rules: Selectors, properties, and values.
- Changing text color, font, and size.
- Adding backgrounds and borders.
Week 5: Styling Your Webpage
Working with Colors and Fonts
- Using color names, HEX codes, and RGB values.
- Applying different fonts and text styles.
- Introduction to Google Fonts.
Layout Basics
- Understanding the box model: Margin, padding, border, and content.
- Using width and height properties.
- Creating simple layouts with float and display properties.
Week 6: Advanced CSS Techniques
Positioning and Alignment
- Positioning elements with position: Static, relative, absolute, and fixed.
- Centering elements vertically and horizontally.
Responsive Design Basics
- Introduction to media queries.
- Making your webpage responsive: Adapting to different screen sizes.
Week 7: Creating a Mini Project
Designing a Personal Webpage
- Planning the structure of your webpage.
- Creating and styling a homepage with HTML and CSS.
- Adding a simple navigation menu.
Enhancing Your Webpage
- Adding images, links, and multimedia.
- Creating a contact form.
Week 8: Final Project and Presentation
Building a Simple Website
- Designing and creating a multi-page website (e.g., a personal portfolio or a simple blog).
- Implementing the concepts learned throughout the course.
Testing and Launching
- Testing the website in different browsers.
- Sharing the website with classmates.
Presentation
- Presenting the final project to the class.
- Discussing what was learned and how to improve.