Project 1 - Static Website

In this first major project you will be creating a static website using HTML and CSS. Follow the notes below in creating your website.

General Overview

• The structure of your website will include an index.html (home) page along with 2-3 additional pages as appropriate for your subject.
• The subject for your website will be chosen by you, but must be selected from:
  • a Social Justice topic, or
  • a subject related to your "This I Believe" speech, or
  • one or more of the United Nations' Sustainable Development Goals.
• Before getting too far into your project, make sure to have a conversation with the instructor and get approval for your subject.

The pages on your website will be developed and designed by you, and may depend upon the topic you've selected. As a personal example, if I decided to create a website to support teaching physics to students who are currently underrepresented in that field (women, people of color), I might have:

1. A home page explaining the purpose of the site (with an image)
2. A page documenting the current state of diversity in the field of physics
3. A page listing opportunities for students, or with action items that they could consider
4. An About page with some biographical information about myself and what my interests are (personal, but not too personal).

Specific Requirements

The final version of your website will:

1. consist of 3-4 .html files, one for each page of the website
2. use a single style.css file for consistent styling across the pages of the website
3. have consistently styled headers and footers on all pages of the website
4. include a copyright notice with your name in the footer of each page (© is the HTML code for a copyright symbol)
5. include a link in the footer of each page that can be used to email you
   Example: <a href="mailto:yourname@pfspasadena.org">Email me!<a>
6. use the CSS hover tag to make links change color and background when hovered over or activated
7. use consistent logical structures across the entire site:
   
   <header> </header> <nav> </nav> <main> </main> <footer> </footer>
8. have all the files for your site contained in a single project folder called Project1

Assignment Notes

1. Before building a website, you need some content to put on the website. Identify for yourself what the purpose of your website will be, based on one of the two contexts given above (social justice or UN Sustained Development goals). You need to have a pretty specific idea of what you want your website to be focused on. Give it some thought. Some possibilities:
• Providing employment opportunities for undocumented immigrants
• The rise (and fall?) of the feminist movement
• Explaining / supporting the Black Lives Matter movement
• Documenting / explaining issues around global climate change
• Documenting / explaining racial bias in modern society (stop-and-frisk? driving while Black?)
• Explaining voter rights, and/or documenting voter suppression
• An exploration of LGBTQ+ issues in modern society
• Diversity issues in higher education, technology fields, housing, employment, or wealth/income
• Supporting local-owned/family-owned businesses
2. As you consider what your website is going to be focused on, you may naturally start to think about what the site will look like: colors you want to use, layout design, etc. Don't worry about that at this point. Think about the site, maybe some photos or visuals that you might like to include, but most importantly, think about the content.
3. Because your site is going to have multiple pages, you can also think about how you want to organize your content onto different pages. Go ahead and write out the content for each of those pages as well.
4. Once you think you have some idea of what the content might look like, use HTML code to write the "home page" of the site in a file called index.html. Make sure you use <h1> and <p> tags to organize that content.
5. On the index.html page, organize the material on the page. Include header, nav, main, and footer divisions.

   See a sample index.html here, and see what it looks like in the browser.

6. Once you've got the basic home page content put together, let's start trying to give it some color, some style, some layout. In the style.css file, include descriptors for all the different elements of your page. You'll want to give styles to:
• body and html - default settings for the page
• header, nav, main, and footer sections
• h1, h2, p, img

You can see a sample style.css page here, and what the styled page looks like now with those settings.

Extensions

This basic website is a good start. Consider implementing these extensions to make it even better.

1. Responsive Design
   Your initial website should look good in a "portrait" mobile phone display, but we'd also like it to adapt to being presented in a horizontal, "landscape" computer display. A website that adjusts to its presentation mode is said to be responsive. Give your website a bit of a responsive feel by adding the following code to the style.css file:
   /* Desktop-friendly "responsive" styling for wider browser windows */ @media (min-width: 600px) { nav li { border: 0; width: 33%; // This is an important change } nav li#here { padding: 0.5em 0; background: #F3A812; color: #703FC6; display: block; } }
   Test your website with this new CSS styling to see how your website adapts to different screens.
2. content1 and content2
   Once your website has become responsive, consider splitting some of your content on each page up into two parts, content1 on the left side of the screen and content2 on the right. Add styling that allows those two content areas to be viewed side-by-side on a desktop screen, and one-on-top-of-the-other when viewed on a phone.
3. Upload project folder to a webserver
   You've been developing your webpage on your computer, and this local version of the site is only visible on your machine. Talk to the instructor about using a terminal to copy your website onto a server where it can be viewed on the World Wide Web.