Contents

• section header
• section content /paragraph
• a button labeled "discover more"
• two photos in 2 columns
  HTML
• section tag
• section header h2
• img tags
• button

CSS

• use class to identify section
• use width and height to define image dimensions
• use styling for the button and section header

This section is found below the landing page where its talks about the student opportunities

• label with title "Our program" and a brief info of what the topic is talking about
• image at the right side of the frame section

HTML

• create section id and name it ' section3 '
• use ' h3 ' for the subtitle
• use 'label' or 'span' as or 'p' for the intro

CSS

• format items on two side
• use blue text color on h3
• use gray black on text (p,span,label)

Contents
Page title
Logo
Navigation bar

HTML:

• use nav html tag to define the navbar on top of each page
• use navigation links to move through pages.

CSS:

• use class to organize each section.

This section is found below the 'Our Core Values' section where its talks about the success stories of the graduates

• label with title "Our Success Stories" and a brief info of what the topic is talking about

HTML

• use 'section' tag to wrap section with class name 'success-stories'
• use 'h2' for the title of section
• use 'div' tag to contain 4 success story boxes
• use 'div' tag for each of 4 success story boxes
• use 'p' for the text inside success story boxes
• use appropriate class names for all 'div' tags
• use 'img' tag for the photos inside success story boxes

CSS

• use dark blue color on 'h2'
• use black color on 'p'
• use 'text-align: center' for 'div' that contains 'h2', 'p' and 'img'
• use 'display: grid' for 'div' that wraps 4 success story boxes
• use 'box-shadow' for 4 success story boxes 'div' class
• use 'border-radius: 50%' for 4 success story boxes 'div' class
• use 'transform: scale(1.5)' for the 'img' class inside success story boxes
• use 'hover' for success story boxes 'div' classes
• use 'transform: scale(1.7)' for each success story boxes 'div' class when 'hover'
• use 'position: relative' for each success story boxes 'div' class when 'hover'

HTML

• [ ]
• [ ]

CSS

• [ ]
• [ ]

This section is found below 'Our Program' where its talks about the statistical information

• label with title "Our Impact" and a brief info of what the topic is talking about

HTML

• use 'section' tag to wrap section with class name 'impact'
• use 'h2' for the title of section
• use 'div' tag to contain intro text
• use 'p' for the intro and info boxes text
• use 'div' tag to wrap 3 info boxes
• use 'div' tag for each of 3 info boxes
• use appropriate class name for all 'div' tags

CSS

• use dark blue color on 'h2'
• use black color on 'p'
• use 'text-align: center' for 'h2' and 'p'
• use 'display: flex' for 'div' that wraps 3 info boxes
• use blue color for background of 3 info boxes
• use white color for 'h2' and 'p' inside 3 info boxes

This section is found below the 'Our Success Stories' section where partner logos are located

• label with title 'Our Partners'

HTML

• use 'section' tag to wrap section with class name 'partners'
• use 'h2' for the title of section
• use 'div' tag to contain 12 partner logo 'div's
• use 'div' tag for each of 12 partner logos
• use appropriate class names for all 'div' tags
• use 'img' tag for the logos

CSS

• use dark blue color on 'h2'
• use 'text-align: center' for 'div' that contains 'h2'
• use 'display: grid' for 'div' that wraps 12 partner logo 'div's

Planning progress

• backlog
• communication
• constraints
• development-strategy
• user-personas
• wireframe design
• adding retrospective

HTML

• [ ]
• [ ]

CSS

• [ ]
• [ ]

Contents
Page title
Logo
Navigation bar

HTML:

• use nav html tag to define the navbar on top of each page
• use navigation links to move through pages.

CSS:

• Nav-bar responsive
• use blue color on h1
• use black color on p

This section is found below the 'Our Impact' section where its talks about the core values of the program

• label with title "Our Core Values" and a brief info of what the topic is talking about

HTML

• use 'section' tag to wrap section with class name 'core-values'
• use 'h2' for the title of section
• use 'div' tag to contain 4 core values boxes
• use 'div' tag for each of 4 core values boxes
• use 'p' for the text inside core values boxes
• use appropriate class names for all 'div' tags
• use 'img' tag for icons inside core values boxes

CSS

• use dark blue color on 'h2'
• use black color on 'p'
• use 'text-align: center' for 'h2' and 'p'
• use 'display: grid' for 'div' that wraps 4 core values boxes
• use white color for background of 4 core values boxes
• use 'box-shadow' for 4 core values boxes

HTML

• add <div> tag with logo class
• add the logo using the <img> tag

CSS

• add float :left; style