Scribd
Upload
43 views4 pages

Project Guide - Website For A Purpose

This document outlines the planning process for a web design project focused on shoebills, detailing the structure of the website with three pages: an index page, a reference page, and a videos page. It includes specifications for HTML tags, class styles, and Flexbox layout properties, as well as instructions for sourcing and documenting images. The project aims to demonstrate skills in web development, including HTML coding, linking pages, and styling elements.

Uploaded by

shinthantphoowai1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views4 pages

Project Guide - Website For A Purpose

This document outlines the planning process for a web design project focused on shoebills, detailing the structure of the website with three pages: an index page, a reference page, and a videos page. It includes specifications for HTML tags, class styles, and Flexbox layout properties, as well as instructions for sourcing and documenting images. The project aims to demonstrate skills in web development, including HTML coding, linking pages, and styling elements.

Uploaded by

shinthantphoowai1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Development - Lesson 19

Name: Kate Shin Thant Phoo Wai

Website for a Purpose - Prepare


Overview
In this activity guide, you will begin planning your final web design
project.

This project will show that you can…

❏ Develop and use a plan


❏ Write readable HTML code and use good file names
❏ Link between multiple pages on a website
❏ Use classes and Flexbox to style elements on a page

Step 1: Design Your Site


Describe each page on your site. There is a minimum of three different pages.

Page Name Description

This page will briefly talk about shoebills which are a kind of bird.
It will have links that move to other pages in the code.

index.html

This page is the reference for all the information I got to make
this code.

reference.ht
ml

This page will include the links to videos related to shoebills.

videos.html
Web Development - Lesson 19

Step 2: Describe your Tag and Class Styles


First, decide the tags you will use on your page and how each tag will be styled.

Tag Style Description

This tag is for the paragraphs and text that are slightly
smaller than average.

This tag is exclusively for the title only.

h1

This tag will be exclusively for the text slightly larger than p
but smaller than h1.

h3

This tag is exclusively for the links included in the text. It's
either the ones that send the user to another page, a website
or a video.
a

Next, decide items that will be placed in a container for Flexbox layout and which Flex properties you will need to get
the desired layout.

Items Flex Layout Description

This is specifically and solely for the use of unique and different
background colors.
Web Development - Lesson 19

head

This is specifically and solely for the use of unique and different
background colors.

intro

This is specifically and solely for the use of customizing the


height, margin, border and width.

Image-style

This is specifically and solely for the use of fixing the mistake
of my code.

error

Finally, decide the classes you will use on your page and how each class will be styled.

Class Style Description

This is solely for the purpose of designing how the image looks
like and how it's structured.

error

Step 3: Find Your Images


Next, find all the images needed and save them somewhere you can find them. Rename each image and write the
file name here. Be sure to write down all the information about the image, such as the author, title, source, and
license it is covered under.

Image File Name Image Information (Author, Title, Source, License, etc.)

Shoebill1.jpg Author: Nadine Aro-Ace UK


Web Development - Lesson 19

Title:
Source: https://www.pinterest.com/pin/6614730697953600/
License: https://www.pinterest.com/pin/6614730697953600/

Shoebill2.jpg Author: Nico Van Den Berg


Title: Shoebill
Source: https://www.pinterest.com/pin/33706697194436755/
License: https://www.pinterest.com/pin/33706697194436755/

Shoebill3.jpg Author: Flickr


Title: Shoebill
Source: https://www.pinterest.com/pin/534802524513749509/
License: https://www.pinterest.com/pin/534802524513749509/

Shoebill4.jpg Author: Christine Themas

Title: baby Shoebill Pelicans - of the "ugliest" cute birds

Source: https://www.pinterest.com/pin/35958497013311575/
License: https://www.pinterest.com/pin/35958497013311575/

You might also like