week 01 - day 02 - expand your world - intro to css
Closed this issue · 2 comments
ads6495 commented
Expanding Your World
In this assignment, you will end up with a simple styled web page, published on the web.
Create a new website that shows some basic styling and formatting using HTML and CSS. This website should help share some information for one of your favorite hobbies.
Objectives
- Practice using your tools text editor
- Explore new CSS properties
- Publish a web page
Requirements
- Have
git
,hub
, andnode
installed. We should have done this together in class.
Explorer Mode
- Follow all of the setup instructions (See "Assignment Setup").
- Create a new
app-app
project. - 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:
- Add a second page about your hobby with (at least) 2 pictures and with other facts about your hobby.
- Add a menu to your site so a user can go back and forth between the new pages.
- Between the 2 pages, use at least 5 tag selectors, 5 id selectors, and 5 class selectors to style content on your page.
- 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 animate all elements on your page to some extent. Make it ridiculous.
Additional Resources
CSS
- Cool game to learn CSS selectors
- Introduction to CSS
- Getting Started with CSS Rules
- All the CSS properties
- pseudo-classes and pseudo-elements
- http://www.csszengarden.com/
HTML
ads6495 commented
Your homework week 01 - day 02 - expand your world - intro to css was marked: Meets Expectations
“With LASERS”
— via Jason L Perry