COLEGIO DE LA INMACULADA CONCEPCION, INC.

Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Learning Plan
Computer Grade 9
Third Quarter: Week 1 and 2

Topic: Working with Tables and Lists in Cascading Style Sheets

Grade Level: Grade 9

Learning Objectives:

 create tables and lists on a web page using Cascading Style Sheets
 create lists on a webpage using CSS
 show confidence while working in CSS

Materials:

 Computer with internet access

 Text editor
 Web browser

Explore

 Introduce the topic of working with tables and lists in CSS by explaining that they are
commonly used in web design to organize and present information.
 Show examples of tables and lists in web pages and discuss the importance of styling them to
improve the readability and visual appeal.
 Demonstrate how to create a basic table and list in HTML.
 Explain how CSS can be used to style tables and lists, including changing the background color,
font size and color, border, and padding.

Firm-Up

 Review the HTML code for creating a table and list.

 Demonstrate how to apply CSS styling to the table and list, including using the CSS property
selectors, such as id and class.
 Discuss the different types of selectors in CSS and how they can be used to target specific
elements in the table and list.
 Show examples of CSS styles for tables and lists and explain how they affect the layout and
presentation of the content.

Deepen

 Introduce the concept of responsive web design and how CSS can be used to create a
responsive layout.
 Demonstrate how to use CSS media queries to apply different styles to tables and lists based
on the screen size.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

 Discuss the importance of accessibility and how to use CSS to improve the accessibility of
tables and lists.
 Show examples of CSS styles for accessible tables and lists, including using descriptive headers
and captions.

Transfer

 Assign a task to create a web page that includes a table and list.
 Provide guidelines for the design and layout of the table and list, including the use of CSS for
styling and accessibility.
 Encourage students to experiment with different CSS styles and layouts to create a visually
appealing and responsive web page.
 Review and discuss the completed projects as a group, highlighting the effective use of CSS for
tables and lists.

Assessment: The assessment will be based on the completion of the task assigned in the Transfer
section, as well as the effective use of CSS for tables and lists, including responsive design and
accessibility.

Prepared by

DWIGHT JUSTINE B. BRASELINO

Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Learning Plan
Computer Grade 9
Third Quarter: Week 3

Topic: Adding Styles to Elements in Cascading Style Sheets

Grade Level: Grade 9

Learning Targets:

 add styles to elements, such as borders and padding

 practice correct organization and management of files working in CSS.
 apply the knowledge to create a simple and visually appealing web page

Materials:

 Computer with internet access

 Text editor
 Web browser

Explore

 Introduce the topic of adding styles to elements in CSS by explaining that CSS is used to
change the appearance of HTML elements.
 Show examples of HTML elements such as headings, paragraphs, and images.
 Demonstrate how to create a basic HTML document with headings, paragraphs, and images.
 Explain how CSS can be used to style these elements, including changing the font, color, and
background.

Firm-Up

 Review the HTML code for the document created in the Explore section.
 Demonstrate how to apply CSS styling to the headings, paragraphs, and images using CSS
properties.
 Discuss the different types of CSS selectors, including element, class, and ID selectors, and how
they can be used to target specific elements.
 Show examples of CSS styles for headings, paragraphs, and images and explain how they affect
the appearance of the content.

Deepen

 Introduce the concept of CSS box model and how it can be used to control the layout and
spacing of elements.
 Demonstrate how to use CSS box model properties such as padding, margin, and border to
add spacing and borders to elements.
 Discuss the importance of responsive design and how CSS can be used to create a responsive
layout.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

 Show examples of CSS styles for responsive design, including using media queries to change
the styles based on screen size.

Transfer

 Assign a task to create a simple web page that includes headings, paragraphs, and images.
 Provide guidelines for the design and layout of the web page, including the use of CSS for
styling and responsive design.
 Encourage students to experiment with different CSS styles and layouts to create a visually
appealing and responsive web page.
 Review and discuss the completed projects as a group, highlighting the effective use of CSS for
styling and responsive design.

Assessment: The assessment will be based on the completion of the task assigned in the Transfer
section, as well as the effective use of CSS for styling and responsive design

Prepared by

DWIGHT JUSTINE B. BRASELINO

Computer Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator

Learning Plan
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Computer Grade 9
Third Quarter: Week 4

Topic: Using the Box Model in Cascading Style Sheets

Grade Level: Grade 9

Learning Targets:

 Use the <div> tag

 Modify borders, margins, padding, height, and weight
 Explain how the different parts of the box model differ from one another.

Materials:

 Computer with internet access

 Text editor
 Web browser

Explore

 Introduce the topic of the CSS box model by explaining that it is a fundamental concept in CSS
that defines how the size, spacing, and borders of elements are calculated.
 Show examples of elements with different sizes, margins, padding, and borders.
 Demonstrate how to use the box-sizing property to control the calculation of the element size,
including the content-box and border-box values.
 Explain how CSS can be used to control the size, spacing, and borders of elements using the
width, height, margin, padding, and border properties.

Firm-Up

 Review the HTML code for a basic web page with different elements.
 Demonstrate how to apply CSS styles to the elements using the width, height, margin, padding,
and border properties.
 Discuss the different types of units in CSS, including pixels, percentages, and em, and how they
can be used to specify the size and spacing of elements.
 Show examples of CSS styles for different types of elements, including text, images, and
containers.

Deepen

 Introduce the concept of responsive design and how CSS can be used to create a responsive
layout.
 Demonstrate how to use media queries to apply different styles to elements based on the
screen size.
 Discuss the importance of accessibility and how to use CSS to improve the accessibility of
elements.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

 Show examples of CSS styles for accessible elements, including using contrast, font sizes, and
descriptive text for links and images.

Transfer

 Assign a task to create a responsive web page that includes different types of elements.
 Provide guidelines for the design and layout of the web page, including the use of CSS for
sizing, spacing, and borders.
 Encourage students to experiment with different CSS styles and layouts to create a visually
appealing and responsive web page.
 Review and discuss the completed projects as a group, highlighting the effective use of CSS for
sizing, spacing, and borders.

Assessment: The assessment will be based on the completion of the task assigned in the Transfer
section, as well as the effective use of CSS for sizing, spacing, and borders, including responsive
design and accessibility.

Prepared by

DWIGHT JUSTINE B. BRASELINO

Computer Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator

Learning Plan
Computer Grade 9
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Third Quarter: Week 5

Topic: Controlling the Layout in Cascading Style Sheets

Grade Level: Grade 9

Learning Targets:

 Control the layout, using the display, max-width, and position properties
 Demonstrate ease in using the properties and their values

Materials:

 Computer with internet access

 Text editor
 Web browser

Explore

 Introduce the topic of controlling layout in CSS by explaining that it is a fundamental concept
in web design that defines how elements are positioned and displayed on a web page.
 Show examples of different types of layouts, including static, fixed, and responsive.
 Demonstrate how to use CSS to control the positioning of elements using the position
property and its values, including static, relative, absolute, and fixed.
 Explain how CSS can be used to control the display and float of elements using the display and
float properties.

Firm-Up

 Review the HTML code for a basic web page with different types of elements.
 Demonstrate how to apply CSS styles to the elements to control their positioning and display,
including using the position, display, and float properties.
 Discuss the different types of layouts, including fixed, fluid, and responsive, and how they can
be used to create different designs.
 Show examples of CSS styles for different types of layouts, including using flexbox and grid
layouts.

Deepen

 Introduce the concept of responsive design and how CSS can be used to create a responsive
layout.
 Demonstrate how to use media queries to apply different styles to elements based on the
screen size.
 Discuss the importance of accessibility and how to use CSS to improve the accessibility of
elements.
 Show examples of CSS styles for accessible elements, including using contrast, font sizes, and
descriptive text for links and images.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Transfer

 Assign a task to create a responsive web page that includes different types of layouts.
 Provide guidelines for the design and layout of the web page, including the use of CSS for
positioning, display, and float.
 Encourage students to experiment with different CSS styles and layouts to create a visually
appealing and responsive web page.
 Review and discuss the completed projects as a group, highlighting the effective use of CSS for
controlling layout.

Assessment: The assessment will be based on the completion of the task assigned in the Transfer
section, as well as the effective use of CSS for controlling layout, including responsive design and
accessibility.

Prepared by

DWIGHT JUSTINE B. BRASELINO

Computer Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Learning Plan
Computer Grade 9
Third Quarter: Week 6

Topic: Styling Navigation Bar in Cascading Style Sheets

Grade Level: Grade 9

Learning Targets:

 create and style navigation bar

 show self-reliance when designing web pages
 apply the knowledge to create a visually appealing and functional navigation bar for a website

Materials:

 Computer with internet access

 Text editor
 Web browser

Explore

 Introduce the topic of styling navigation bars in CSS by explaining that navigation bars are an
important element in web design that provide easy navigation for users.
 Show examples of different types of navigation bars, including horizontal and vertical menus,
and explain their use in web design.
 Demonstrate how to use CSS to style navigation menus, links, and buttons, including using the
background-color, color, and font-size properties.
 Explain how CSS can be used to create hover and active states for links and buttons.

Firm-Up

 Review the HTML code for a basic navigation bar with different types of elements, including
unordered lists and anchor tags.
 Demonstrate how to apply CSS styles to the elements to style the navigation bar, including
using the background-color, color, and font-size properties.
 Discuss the use of CSS to create hover and active states for links and buttons, and show
examples of CSS styles for these states.
 Show examples of different types of navigation bars, including using dropdown menus, and
explain how to use CSS to style them.

Deepen

 Introduce the concept of responsive design and how CSS can be used to create a responsive
navigation bar.
 Demonstrate how to use media queries to apply different styles to the navigation bar based on
the screen size.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

 Discuss the importance of accessibility and how to use CSS to improve the accessibility of the
navigation bar.
 Show examples of CSS styles for accessible navigation bars, including using contrast, font sizes,
and descriptive text for links and buttons.

Transfer

 Assign a task to create a responsive navigation bar for a website.

 Provide guidelines for the design and layout of the navigation bar, including the use of CSS for
styling and responsive design.
 Encourage students to experiment with different CSS styles and layouts to create a visually
appealing and functional navigation bar.
 Review and discuss the completed projects as a group, highlighting the effective use of CSS for
styling and responsive design.

Assessment: The assessment will be based on the completion of the task assigned in the Transfer
section, as well as the effective use of CSS for styling and responsive design, including accessibility

Prepared by

DWIGHT JUSTINE B. BRASELINO

Computer Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

Learning Plan
Computer Grade 9
Fourth Quarter: Week 2 and 3

Topic: Using Online Website Builders

Grade Level: Grade 9

Learning Targets:

 Define an online website builder

 Differentiate an online website builder from a web hosting
 Explain how an online website builder works
 Determine the advantages and disadvantages of an online website builder.

Target Value: Resourcefulness and Digital Creativity

Materials
 Computers or laptops
 Internet access
 Online website builder platform (e.g., Wix, Squarespace, Weebly)
 PowerPoint Presentation (slide presentation)

Explore:

1. Introduction (10 minutes): Begin by introducing the topic of website building and explain how online
website builders work. Share examples of websites built using online website builders.
2. Discussion
 Discuss how online website builder works
 Discuss website hosting services
 Differentiate online website builders from web hosting
 Enumerate and explain the pros and cons of using online website builders
 Encourage the students to give more advantages and disadvantages to test their criticsl
thinking skills.
3. Choose the website builder (10 minutes): Introduce students to a few website builders and allow them
to explore each one to choose the one they feel most comfortable with.

Firm-Up:

1. Review (10 minutes): Ask students to share their experiences with the website builder and address any
issues they encountered.
2. Customize website (40 minutes): Provide handouts or online tutorials to guide students in
customizing their website's design and layout. Encourage them to experiment with different color
schemes, fonts, and images to create a visually appealing website.
 COLEGIO DE LA INMACULADA CONCEPCION, INC.
Hijas de Jesus
San Jose St.,Pototan, Iloilo
Tatak Hijas:Kapatid sa Kapwa

3. Add content (40 minutes): Guide students in creating content for their website pages, including text,
images, and videos. Emphasize the importance of creating high-quality content that is engaging and
relevant to their website's purpose.

Week 3

Deepen

1. Review (10 minutes): Ask students to share their final websites and provide constructive feedback to
their peers.
2. Publish websites (40 minutes): Guide students in publishing their websites and making them publicly
accessible. Remind them to check for any errors or broken links before publishing.
3. Reflection (40 minutes): Ask students to reflect on their experience creating a website using an online
website builder. Encourage them to think about the strengths and limitations of the website builder
they used and how they could improve their website if given more time.

Transfer:

1. Extension activity: Challenge students to create a website for a fictional business or organization.
Encourage them to incorporate advanced features, such as e-commerce functionality or social media
integration.
2. Real-world application: Discuss the importance of having a professional website for businesses and
organizations. Encourage students to research local businesses or organizations that may benefit from
having a website and offer to create one for them.

Assessment: Evaluate student websites based on their design, content, and functionality. Use a rubric
to ensure consistency in grading.

Prepared by

DWIGHT JUSTINE B. BRASELINO

Computer Teacher

Checked by

LANE M. SUMAGAYSAY
Academic Coordinator