Today’s goals:
- Complete webpage project milestones #1 and #2- come up with a topic and sketch an outline/plan
- Review project requirements
- Coming up (next milestones): suggested project timeline and code support
Today’s featured site:
- https://30-seconds.github.io/30-seconds-of-css/ – You’ll definitely want to spend more than 30 seconds checking out these code snippets!
Webpage Project Milestone #1
- Come up with a topic
- You are going to create a couple of webpages that link to each other (a home page and one sub-page, so a total of two pages). You can either create a webpage on a topic of your choice OR attempt to re-create an existing webpage that you really like (and you can try to make it look similar or different).
- Come up with an idea today and let me know.
- Student examples for inspiration:
Webpage Project Milestone #2
- Plan your site’s layout and content and sketch an outline on paper. I will need to see this at least once before you move forward!
- Example website outlines (wireframes):
user profile page
homepage and sub-page for a business
page layout sketch with images
online radio station homepage
news page
page with logo and several types of navigation
personal webpage - Website wireframes include images, menus, some text, and a basic page layout. They are a rough plan and are useful to organize your thoughts and content. It’s ok if your final webpages don’t look exactly like your wireframe!!
- Sketch out a plan for your home page and for your sub-page. Each page should have the same menu in the same location.
- What content (text, images, video) will be on the home page? What content will be on the sub-page?
- What will your page layout look like? Will you have a header, a footer, and/or a sidebar? How will you arrange, layout, or position the content on your page?
- What other pages will be listed in your menu? Where will your menu go (top of site, along side, vertical, horizontal)? Even though you are only creating two pages you should have a menu that lists other pages you would include on your site. For example, if you do a site about the Patriots, you would design the homepage and a sub-page, such as their roster page. Your menu would include the homepage, roster, game schedule, tickets, merchandise, etc. even though you aren’t creating all of those pages.
- Example website outlines (wireframes):
Project requirements
- 2 COMPLETE pages– a homepage and a sub-page that are linked together
- A vertical or horizontal menu. This should include a list of other pages on your site even though you’re only doing two pages. For example, the menu could include Home, About, Contact, Latest News even though you’re only doing the homepage and the about page.
- A background color, background image, or gradient background for each page
- A CSS layout– you can use the box model properties (margins, borders, and padding); the position property (absolute, fixed, relative, static); floats; or flexbox. You’re encouraged to use the code from past pages you’ve created; you don’t have to reinvent the wheel!
- At least one animated element, using either Animate.css, the animation property and @keyframes rule, or Animista.net
- At least one button (use the button tag and style with CSS)
- A Google Font used on both pages
- Must use the hover pseudo class at least once, either to style links or for another purpose.
- Student models: