Unit 7 – Web Design 

Unit 6 – Networks | Unit 8 – Programming

Daily Lesson Plans 

This material contains a comprehensive collection of 90-minute lesson plans for a semester’s worth of instruction in AP Computer Science Principles to serve as a companion to this textbook. Each lesson plan includes clear objectives, related requirements, a list of necessary materials, a detailed procedure, an assessment method, and a reflection section. The lessons are designed to be engaging and interactive, incorporating a variety of teaching techniques to help students understand and apply the key concepts of computer science. In order to modify the course for a year-long course with approximately 180 instruction days, each lesson plan can easily be spread across two days of instruction. 

Textbook 

Computer Science Principles: The Foundational Concepts of Computer Science, 5th Edition, Kevin Hare – Yellow Dart Publishing – 2024

Daily Practice Questions

Enjoy complimentary access to a daily selection of 5 random questions from our extensive pool of over 500 thoughtfully crafted questions – even if you’re not a member. Dive into the excitement of learning with these free, rotating questions that change every 24 hours, offering a taste of the variety and depth our content and book have to offer.

Lessons:

• Lesson 44 | 7.0 – Intro to Web Design & 7.1 – Intro to HTML & CSS 
• Lesson 45 | 7.2 – CSS Selectors & Rules 
• Lesson 46 | 7.3 – Media Queries/Responsiveness 
• Lesson 47 | Paired Programming Activity 
• Lesson 48 | Independent Web Design Project Time 

Unit Duration:

• 7.5 hours | 5 class periods (90-minutes)
  

Project, Test, and Quiz Resources:

• Available with life-time membership

Lesson 44 | 7.0 – Intro to Web Design & 7.1 – Intro to HTML & CSS 

Lesson Objectives: 

• Understand the basics of HTML and CSS 
• Identify and use HTML tags and attributes 
• Link an external CSS stylesheet to an HTML document 
• Understand the concept of the box model in CSS 

Related Requirements: 

• Basic computer skills 
• Familiarity with text editors 

Lesson Materials: 

• Computers with text editors installed or online editor (e.g. Replit) 
• Access to online resources for HTML and CSS reference 
• Sample HTML and CSS files 

Lesson Procedure: 

1. Introduction (5 minutes): Introduce the topic of HTML and CSS, and explain how they are used to create websites. Provide an overview of what will be covered in the lesson.
2. HTML Tags and Attributes (20 minutes): Explain the basic structure of an HTML document, and introduce some common HTML tags and attributes. Demonstrate how to create headings, paragraphs, links, and images in HTML. Have students follow along on their computers and create their own HTML documents with these elements.
3. Linking External CSS (20 minutes): Introduce the concept of CSS, and explain how it is used to style HTML elements. Demonstrate how to link an external CSS stylesheet to an HTML document, and how to apply basic styles to elements using CSS. Have students follow along and create a separate CSS file to style the HTML document they created in the previous section. 
4. The Box Model (20 minutes): Explain the concept of the box model in CSS, and how it is used to control the layout and spacing of elements on a web page. Demonstrate how to use CSS properties such as margin, padding, and border to adjust the box model. Have students experiment with different box model properties to see how they affect the layout of their HTML document. 
5. Activity (20 minutes): Assign students to write three paragraphs about themselves that will be turned into a website. Provide a list of requirements for the paragraphs, such as word count and topic, and encourage students to be creative in their writing. 
6. Assessment (5 minutes): Have students share their completed HTML and CSS files with the class, and give feedback on each other’s work. Assess their understanding of the lesson objectives by reviewing their HTML and CSS files, and providing feedback on how well they applied the concepts covered in the lesson. 
7. Lesson Reflection (5 minutes): Ask students to reflect on what they learned during the lesson, and how they might apply it in the future. Encourage them to think about how they might use HTML and CSS to create their own websites or improve existing ones. 

Assessment Method: 

• Assessment will be based on the students’ completion of the activity, as well as their HTML and CSS files. 
• Students will be assessed on their understanding and application of the lesson objectives, as well as their ability to follow instructions and be creative in their writing. 

Lesson Reflection: 

• What did you learn during the lesson about HTML and CSS? 
• How might you apply the concepts and skills you learned in this lesson in the future?
• What did you find most challenging or interesting about the activity where you wrote paragraphs about yourself and turned them into a website? 
• How confident do you feel about your ability to create HTML and CSS files after completing this lesson? 
• What could be improved about the lesson to make it more effective or engaging for students? 

Mapped Standards:

Lesson 45 | 7.2 – CSS Selectors & Rules 

Lesson Objectives: 

• Understand the importance of using HTML IDs and CSS ID selectors to target specific elements on a webpage 
• Understand the differences between CSS selectors (element, id, class) and how to use them effectively 
• Learn how to use span tags to target specific parts of text within a webpage
• Learn how to use multiple and descendant selectors to target groups of elements
• Understand the role of div tags in structuring a webpage 
• Apply the concepts learned to create a personalized webpage 

Related Requirements: 

• Basic knowledge of HTML and CSS
• Access to a code editor and a web browser 

Lesson Materials: 

• Computer with internet access 
• Code editor (such as Sublime Text, Atom, or Replit) 
• Web browser (such as Chrome or Firefox) 

Lesson Procedure: 

1. Introduction (10 minutes): 
   • Greet the students and introduce the topic of the lesson: HTML IDs & CSS ID selectors, CSS rules: selectors (element, id, class) & properties, span HTML tags, Multiple & Descendant selector (comma & space), and Div tags. 
   • Explain why these concepts are important in web development and how they can improve the structure and design of a webpage. 
2. Instruction (60 minutes): 
   • Provide an overview of each concept (HTML IDs, CSS selectors, span tags, multiple and descendant selectors, div tags) and demonstrate how they are used in a webpage. 
   • Give examples of each concept and explain how they can be applied to different parts of a webpage. 
   • Provide opportunities for students to practice each concept through guided exercises and examples. 
3. Activity (20 minutes): 
   • Instruct students to apply the concepts learned to enhance their personalized web page. 
   • Provide a template or guidelines for the webpage and encourage students to use their creativity and design skills. 
   • Walk around the room to answer any questions and provide feedback to the students. 

Assessment Method: 

• Observe students during the activity and provide feedback on their progress.
• Review students’ completed webpages to ensure they have implemented the concepts learned in the lesson. 
• Administer a short quiz at the end of the lesson to test students’ understanding of the concepts. 

Lesson Reflection: 

• Ask students to reflect on what they have learned and how they plan to apply these concepts in future web development projects. 
• Encourage students to share their experiences and ask any remaining questions they may have.

Mapped Standards:

Lesson 46 | 7.3 – Media Queries/Responsiveness 

Lesson Objectives: 

• Students will understand the concept of responsiveness in web design.
• Students will be able to write @media queries in CSS to apply different styles to web pages based on screen size. 
• Students will be able to apply @media queries to their own web site projects using the break points: 1200px, 992px, and 768px. 

Related Requirements: 

• Students should have a basic understanding of HTML and CSS. 
• Students should have an ongoing web site project that they can apply @media queries to. 

Lesson Materials: 

• Computers with internet access and text editor software. 
• Handouts with @media query syntax and break points. 

Lesson Procedure: 

1. Introduction (10 minutes) 
   • Introduce the concept of responsiveness in web design and why it is important.
   • Show examples of responsive and non-responsive web sites. 
   • Discuss how @media queries are used to make websites responsive.
2. @Media Queries Overview (20 minutes) 
   • Explain the syntax of @media queries and how they work in CSS. 
   • Introduce the concept of break points and how they are used to determine when @media queries are applied. 
   • Show examples of different @media query breakpoints and how they affect the display of web sites. 
3. Applying @Media Queries to Projects (40 minutes) 
   • Provide handouts with @media query syntax and break points. 
   • Instruct students to open their ongoing web site projects and add @media queries to make their designs responsive. 
   • Assist students as needed with syntax and troubleshooting. 
4. Activity: Peer Review (15 minutes) 
   • Instruct students to pair up and review each other’s web site projects.
   • Encourage students to provide constructive feedback on the responsiveness and usability of their partner’s designs. 
5. Assessment: Quiz (5 minutes) 
   • Administer a short quiz to test students’ understanding of @media queries and responsiveness in web design. 
6. Conclusion and Reflection (10 minutes) 
   • Recap the lesson and ask students to reflect on what they learned and how they can apply it to their future web design projects.
   • Provide resources and recommendations for further learning. 

Assessment Method: 

• Final student made web pages 
• Quiz on @media queries and responsiveness in web design 

Lesson Reflection: 

• What went well in the lesson? 
• What could have been improved? 
• How can the lesson be adapted for future use? 

Mapped Standards:

Lesson 47 | Paired Programming Activity 

Lesson Objectives: 

• Students will learn how to replicate a website’s CSS. 
• Students will learn how to work effectively in a paired programming setting.
• Students will develop their skills in HTML and CSS. 

Related Requirements: 

• Students should have prior knowledge of HTML and CSS. 
• Students should be comfortable using a text editor to write code. 

Lesson Materials: 

• A computer with internet access. 
• Text editor software, such as Notepad++, Sublime Text, Visual Studio Code, or Replit
• An HTML file with images for the website to be replicated. 
• An image of the website with CSS applied. 

Lesson Procedure: 

1. Introduction (10 minutes): 
   • Introduce the concept of replicating a website’s CSS and the benefits of working in a paired programming setting. 
   • Discuss the importance of attention to detail when replicating a website’s CSS.
   • Show examples of websites with and without CSS applied. 
2. Activity (60 minutes): 
   • Divide students into pairs and have them choose one computer to work on.
   • Provide each pair with an HTML file and an image of the website with CSS applied. 
   • Instruct students to switch roles every 5 minutes, with one student coding and the other providing feedback and guidance. 
   • Encourage students to work collaboratively, discussing their ideas and decisions with each other.
   • Remind students to pay attention to details such as font size, color, and positioning of elements. 
   • Monitor progress and provide support and guidance as needed. 
3. Assessment (15 minutes): 
   • Have each pair present their replicated website to the class. 
   • Ask the class to compare the replicated website to the original website with CSS applied. 
   • Ask each student to reflect on their experience working in a paired programming setting and share what they learned. 
4. Lesson Reflection (5 minutes): 
   • Discuss what worked well and what could be improved in the lesson.
   • Ask students for feedback on the activity and what they would change in the future. 
   • Summarize the key takeaways from the lesson. 

Lesson Reflection: 

• What were the most important takeaways from the activity? How did it help you develop your skills in HTML and CSS? 
• In what ways did working with a partner impact your learning experience? What were some of the benefits and challenges of this approach? 
• What were some of the most challenging aspects of replicating the website’s CSS, and how did you overcome them? What role did attention to detail play in this process?
• How did the feedback and guidance you received from your partner help you improve your skills in HTML and CSS? What did you learn from your partner during the activity?
• Looking back on the lesson, what suggestions do you have for making the activity more engaging or effective for future students? What other topics or activities related to web development would you like to explore in future lessons? 

Mapped Standards:

Lesson 48 | Independent Web Design Project Time 

Lesson Objectives: 

• Students will be able to apply their knowledge of HTML and CSS to develop and enhance their ongoing web design projects. 
• Students will be able to identify online resources to add web design features that go beyond the minimum requirements of their project. 

Related Requirements: 

• Students should have prior knowledge of HTML and CSS. 
• Students should have an ongoing web design project that they can work on during the lesson.

Lesson Materials: 

• Computers with internet access 
• Text editor software (such as Notepad++ or Replit) 
• Online resources for web design (such as W3Schools, CodePen, and CSS-Tricks) 

Lesson Procedure: 

1. Introduction (10 minutes) 
   • Welcome the students to the class and provide a brief overview of the lesson plan. 
   • Remind students of the ongoing web design project they have been working on in previous classes. 
   • Explain the purpose of the lesson: to help students apply their knowledge of HTML and CSS to enhance their web design projects by using online resources.
2. Review of HTML and CSS (20 minutes) 
   • Conduct a brief review of HTML and CSS to ensure that all students have a solid foundation of these skills. 
   • Answer any questions that students may have about HTML and CSS.
3. Online Resource Exploration (20 minutes) 
   • Demonstrate how to use online resources for web design, such as W3Schools, CodePen, and CSS-Tricks. 
   • Encourage students to explore these resources and find new design features that they can apply to their ongoing web design projects. 
4. Work Time (30 minutes) 
   • Allow students to work on their ongoing web design projects, applying the new design features they found during the online resource exploration phase.
   • Circulate around the classroom, providing support and answering any questions students may have. 
5. Share and Reflect (10 minutes) 
   • Ask students to share their projects with the class, highlighting the new design features they added. 
   • Facilitate a brief discussion on the challenges and successes students experienced during the lesson. 

Assessment Method: 

• The teacher will assess student understanding through observation and engagement during the work time phase. 
• The teacher will also evaluate the final projects of the students and determine if they successfully applied the new design features learned from the online resource exploration phase. 

Lesson Reflection: 

• After the lesson, reflect on what worked well and what could be improved for future lessons.
• Consider how to continue to provide opportunities for students to explore and apply new design features to their web design projects. 

Mapped Standards:

---

Unit 6 – Networks | Unit 8 – Programming

---

Membership

For those hungry for more, our membership unlocks the full spectrum of over 500 questions, providing a comprehensive exploration of the diverse topics covered in our content and book. Delve deeper into the world of computer science, enhance your understanding, and master the principles that matter. Our membership also grants you exclusive access to detailed units from the comprehensive book and on our website. From foundational concepts to advanced topics, our units offer invaluable resources to support your learning journey. Elevate your exploration of computer science and make the most of your membership!

Ready to take the plunge into the world of computer science? Start Your Membership Today and enjoy free daily questions along with a treasure trove of over 500 more!

Explore Membership

---

Subscribe to our Newsletter

Email Address*

Name

Your e-mail address is only used to send you our newsletter and information about the activities of CS++. You can always use the unsubscribe link included in the newsletter.

I accept the terms and conditions

AP Computer Science Principles/Teacher Certification Prep Course

Get full access to:

• Comprehensive explanations of the concepts
• 500+ Practice multiple choice questions
• Customizable Test Generator
• 90+ Curated videos
• 15 Projects, Tests, and Quizzes (includes all à la carte items)
  
• 12 Units of materials
• Built-in Block-to-JavaScript practice tool
• All future resources and questions for life!

$19.99

Shop now

---

Unit 6 – Networks | Unit 8 – Programming

---