Summer 2024 Youth Enrichment Program
Course Overview:
This course aims to introduce students to the fundamentals of web development through HTML and CSS. Students will learn how to create and style web pages using HTML for structure and CSS for design. Through hands-on projects and activities, they will develop the skills needed to build their own websites.
Course Duration: 16 hours (4 days, 4 hours per day)
Course Outline:
Day 1: Introduction to Web Development and HTML
- Introduction to web development and the role of HTML and CSS
- Understanding the structure of a web page
- Getting started with HTML: basic syntax, tags, and elements
- Creating a simple web page: adding headings, paragraphs, and lists
Day 2: HTML Continued and Introduction to CSS
- Review of HTML basics
- Working with links and images
- Introduction to CSS: styling web pages
- Understanding CSS syntax, selectors, and properties
- Applying styles to HTML elements: text, colors, backgrounds
Day 3: CSS Layouts and Responsive Design
- Introduction to CSS layouts: block vs. inline elements, box model
- Building layout structures: using divs and spans
- Creating responsive designs: media queries and viewport settings
- Introduction to Flexbox and Grid layout
Day 4: Advanced CSS and Final Projects
- Review of CSS concepts
- Styling forms and tables
- CSS transitions and animations
- Introduction to CSS frameworks (optional)
- Final projects: students work on building their own website using HTML and CSS
Teaching Methodology:
- Hands-on Learning: Emphasize practical exercises and projects to reinforce learning.
- Interactive Discussions: Encourage students to ask questions and participate in discussions about web development concepts.
- Group Activities: Incorporate group projects and peer collaboration to foster teamwork and problem-solving skills.
- Real-World Examples: Provide examples of websites and web design trends to inspire creativity and showcase real-world applications of HTML and CSS.
Assessment and Evaluation:
- Project-Based Assessment: Evaluate students based on their completion of assigned projects and their ability to apply HTML and CSS concepts effectively.
- Quizzes and Exercises: Use short quizzes and exercises to assess understanding of key concepts throughout the course.
- Peer Review: Encourage peer review of final projects to promote constructive feedback and collaboration among students.
Resources:
- Textbooks or online resources for HTML and CSS
- Code editors (e.g., Visual Studio Code, Sublime Text)
- Online tutorials and interactive coding platforms
- Sample code snippets and templates for reference
By following this structured outline, students will gain a solid foundation in HTML and CSS, empowering them to continue exploring web development and design on their own.
