Shape of the Day:
- What you have learned so far
- Project Topic
- Planning the website layout
- Project Requirements
Website of the Day:
https://css.30secondsofcode.org/ – Some funky cool ways to make your website more interactive. Each snippet comes with code you can copy and an explanation if you want to customize it.
1. What have you learned so far (holy smokes it’s a lot!):
- How the internet works, web hosting, and domain registration
- What browsers are and built-in tools to help with web development
- Basic HTML– how to set up a basic webpage, how to add images, links, text
- Computer and internet security basics
- Basic CSS– how to add a background image and color, how to change the text font, color, and size, how to add a text-shadow
- How to use a text editor like Brackets
- Where to find high quality, free stock images
- How to edit images using Pixlr.com
- Basic graphic design techniques
- What WordPress is and how to use it
- How to add a web font like Google Fonts to your website
- CSS Box Model and box model properties (margins, borders, padding) and box-sizing (how browsers compute the width of content) (link)
- Opacity property (link)
- CSS selectors– type, .class, and #ID (link)
- Line-height property (link)
- Box-shadow property (link)
- Position property (link)
- Z-index property (link)
- CSS floats (link)
- Display property and values of block, inline, and inline-block (link)
- How to create horizontal and vertical website menus (link)
- Flexbox (or flexible box) layout (link)
- Border-radius property (link)
- Filter property (link)
- CSS animations: Animate.css (ready made animations to add to your site); @keyframes rule and animation property; Animista.net (web-based tool to create animations)
- Web typography (use of typography in web design) (link)
- How to create buttons with the button tag (link)
2. Website Project! First thing – Project Topic
- What would you like to create 3 pages of a website about? What interests you? If you were to re-imagine or re-create a website, what would it be?
- Let me know the topic you choose through this form. First come first serve and you may not repeat what someone else is doing. I will let you know if a topic is taken.
- I will show you some examples of websites to identify what’s good and maybe not so good
3. Plan your site’s layout
- You must plan the layout of your site on PAPER (wow I know!). Once you have sketched this outline, you must show me before you move on to creating it.
- Here are some example outlines:
- We call these Website Wireframes – the point is to include images, menus, some text and a basic page layout. It’s a rough plan and is very helpful for organizing thoughts and content. If your final webpage looks different that’s okay, it means you are adjusting or trying to make things better than what you originally thought you wanted to do.
- Sketch the following:
- Home page
- Sub pages (2)
- Ensure menus are in the same spot for all pages
- Add all pages that “would be” included on your website. You only need to make 3 pages total (Home plus two sub pages) but on the menu you should include anything else that would be included.
- Decide what content will be on the pages and where
- Decide whether you want a header or a sidebar, every site should have some kind of footer.
4. Project Requirements
- 3 Complete pages – All pages should be linked together
- A vertical or horizontal menu
- A background color, image, or gradient background for each page.
- A CSS layout – box model properties; position property; floats; or flexbox
- At least one animated element – utilize Animate.css (this will only work with the previously used stylesheet), the animation property and @keyframes rule or Animista.net
- At least one button (using the button tag and style it with CSS)
- A google font must be used on all pages
- The hover pseudo class must be used at least once to style a link or for another purpose