This course is designed to provide students with an introduction to Hypertext Markup Language (HTML) and Cascading Stylesheet (CSS) used in designing and creating web pages. Students will have a complete and wide array of customization freedom in the creation of their own web pages! Through project-based lessons, students will become proficient in basic website design and formatting. Our project-based lessons allow students to practice key HTML concepts while expressing their creativity. For the final project, students will create their own website using the skills they have learned and share their results with the class. There will be some reinforcement quizzes for students to complete after lessons, along with review games that will be played in the final class meetings to ensure students remember material and are prepared to take the next steps in their programming adventures.
Syllabus
Lesson 1: Setup and Preparation
Designed to provide students with an introduction to the environment used for this class and provide a more in-depth description of HTML/CSS/JS and how they are used.
Task: Environment Setup
Set up and explore the environment. Use the browser inspector to show HTML of websites.
Lesson 2: HTML Basics
Introduction to HTML, including background, description of tags, and use of entry-level tags.
Task: Wishlist Page
Students develop a Wishlist using HTML lists and images.
Lesson 3: CSS Basics
Introduction to CSS, including background, examples, and use of basic styling in web pages.
Lesson 4: Advanced HTML Tags
Students learn how to create more complex Webpages through the use of advanced tags.
Task: Creating a Recipe Book
Student Create a Webpage full of recipes with pictures , internal link , tables, and basic styling.
Lesson 5: Advanced CSS Styling
Students learn about more complex styling of webpages through the use of different fonts formats.
Task : creating a stylesheet reference page
Student create a page with examples of fonts and font
Sizes that they can refer to when creating future projects.
Lesson 6: CSS Page Layout
Students learn more about using CSS for web design, including positioning, margins, padding, and borders.
Task: Design the layout of a website
Students add CSS styling to a template website to come up with their own design.
Lesson 7: Buttons
Nested Elements for better organization and layout design. Buttons to add extra functionality and links to other webpages. Exploring extra CSS resources to create attractive websites easier.
Lesson 8: Advanced WordPress
Students learn more about WordPress features and apply this to the creation of a website with multiple pages.
Task: Add a WordPress Page
Add and design a page in WordPress to link to the page that was created in class
Lesson 9: Review and Final Project Workshop
Review course concepts through competitive live review games. Class time is dedicated to helping students apply concepts from class to their final project websites.
60 mins online live lesson
Lesson 10: Final Project Presentations
Allow students to share their final projects and get feedback.
