Web Design 1-Bell | Fall 2021 - 2022 Assignments

You are to create a portfolio project based on the criteria below.  Be sure to utilize layoutit & the template provided in previous projects to better demonstrate what you have learned this semester.

Run the WAVE analyzer on your visual literacy project (all pages). Fill out the Google Doc with your information on your initial viewing, then make changes to reduce the number of errors and warnings.  Submit a link to your assignment as well as filling out this Google Doc.

Chapter 9 on CodeHS has information about the design process.  I would like you to watch the videos on this process and jot down some notes on the important aspects of the videos.  Check out the "assessment" at the end of this unit  - take it once you have watched all of the videos and taken notes, but it isn't graded on how you do, just on completion.


6 videos, 1 assessment


**** Design Process Notes 2 has updated working links.  ****

Mrs Szeluga offered her likeness for our PhotoShop Contest.  The rules are attached, you have until the Friday we get back after break to put this together.  Make sure to keep your images school appropriate.  Submit your files here for approval.


Prizes awarded for the top images!


Some images from previous competitions are included here.

You are to create an image to be included in your company website.  make sure it demonstrates your abilities in PhotoShop and should include an image (or part of one), background, and/or text. Make sure it fits in your layout - either in the navigation or jumbotron is recommended.

Use the link as your default template.  Fork it so you have a copy, and then you can edit it.  Use Layoutit to set up your site's layout, then copy the HTML into the correct location.


Review the document to see criteria for the website you are to create.

Utilize the material and code provided in codeHS for Bootstrap.  Remake your favorite animal project with mobile friendly Bootstrap involved.  Make sure you are using the following:
Bootstrap's stylesheet plus your own.  Make sure to update at least 3 tags and/or classes of tag
Jumbotron 
Grid system - be sure to check your accuracy by resizing your window
Nav Bar - there are some good options, make sure all of your pages are listed in your navigation, but only the ones you can leave the page to go to will be links
at least 2 other components from Bootstrap (buttons, glyphicons, tables, thumbnails, etc.)

Bootstrap is a generous CSS library free to use by everyone and can help with our website design.  Unit 7 in our Picasso class online has details about it.  I would like you to view the videos in 7.1 and check out the class example and real world example.  Answer the questions in 7.14 and 7.15.  


Once you finish that up, check out the video in 7.2 and we are going to begin exploring some of the codes in Bootstrap with containers, basic skeletons and photos.  Complete the 7.2 checkpoint quiz.

I only need one contract for each project so if you are working together you will only need to print out one copy for all three of us to sign.

Watch the following videos.  Create a Google Doc to submit on this assignment to take notes in: list your top 3 most important takeaways from each video.  It could be a shocking piece of data, something that you didn't know before the video, something you think is the most interesting/important idea within your world.


Code HS -  What is the Web? Section
What is the Internet? (complete the check for understanding questions after completion)
How does the Internet Work? 

(complete the check for understanding questions after completion)
Meet a Web Developer

What is your favorite animal?  Your next project is to build a website about that animal.  Using external style sheets is the main focus of this project.  Each webpage will have different content, but will have matching layouts and styles so develop your outline first, build a template webpage and then make copies to create your site of at least 4 pages.  Below is the minimum of what your pages should contain.


page 1 - intro - 1 paragraph about the animal, one paragraph about why it is your favorite. 1 picture of the animal.  Navigation to other pages
page 2 - babies - image of baby animal, 1 paragraph about home/den/nest or where they live, how big a family may be, etc.  Navigation to other page(s)
page 3 - food source - what food do they eat, what eats them, image(s) & navigation
page 4 - source page - navigation to other page(s) and links for sources for your images and your information each open in a new window

Create a new folder for this assignment on CodeHS.  Put any html file you create for this project in that folder.  See description for details.

Complete this Scavenger hunt using the CHS website as the grounds you are looking in.  Of the people who have the most correct answers, the person with the earliest submission will win a prize from the Mystery Prize Box of Mystery.

Please fill in this survey to give me a better idea about you.  Use the last question to give me any additional information about yourself that you think I may need.


**There may be a few things you need to find on the HS website, like who contributes to the site, or what advice you have been given**