Week 01 - Day 2 - Expanding Your World

[gstark]

In this assignment you will end up with a simple styled web page, published on the web.

Objectives

• Practice using your tools text editor
• Explore new CSS properties
• Publish a web page

Requirements

• Have git, hub, and node installed. We should have done this together in class.

Explorer Mode

• [x] Follow all of the setup instructions (See "Assignment Setup").
• [x] Using CSS, style your page to imitate some of the classic designs of the web. Feel free to make this look as "bad" as you want. Here are some sites to gain inspiration:
  • 10 90s websites designs you won’t believe existed
• [x] Add a second page about your hobby with (at least) 2 pictures and with other facts about your hobby.
• [x] Add a menu to the your site so a user can go back and forth between the new pages.
• [x] Between the 2 pages, use at least 5 tag selectors, 5 id selectors, and 5 class selectors to style content on your page.
• [x] Deploy your site.

Adventure Mode

• [ ] use pseudo-classes to style elements when you hover the mouse over them
• [ ] Add a third page, that has a table. Create this table to have alternating colored rows, and a hover over color.
• [ ] Make a nav bar that sticks to the top of the page (see the nav bar here for example: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
• [ ] Make a footer that always sticks to the bottom of the page

Epic Mode

• [ ] Explore CSS animations and add some life to your static page. Feel free to really dig into these and try to animated all elements on your page to some extent

Additional Resources

CSS

• Introduction to CSS
• Getting Started with CSS Rules
• All the CSS properties
• pseudo-classes and pseudo-elements

HTML

• HTML Tags
• Evolution of the Web

Reading Material

To prep for tomorrow's lesson, you can read about flexbox.

[StPeteFrank]

Hi Gavin. Here is my URL for the Expand Your World HW. Looking forward to following up on margins, borders, padding, and flex. I was just getting used to the GitHub processes today and feel that it slowed me down on those items. See you tomorrow. Thank you!

http://expanding-frankdiaz.surge.sh

and

expanding-frankdiaz.surge.sh

[gstark]

Hi Frank, you gave the surge link twice. I need the github.com link. This is the URL for this repository if you visit your personal page on github.com and find the expanding repository.

[StPeteFrank]

https://github.com/StPeteFrank/expanding/commit/f4af6452708515cc9ed5cee382c8ae5cca65d84b

Gavin, is this he right URL?

Thx

[gstark]

No, the link should just be the URL at the top of the page when looking at the main page of your repository.

The link above is fine, for now.

[gstark]

Your homework was marked: Meets Expectations

“Gavin Approved!” — via Jason L Perry