Project C Instructions
In this project, we get into advanced CSS*. WE are going to create a RESPONSIVE Vertical website. This will be a one-page website with multiple sections. The operative thought is that this will be a SINGLE-page website with modern design. (Vertical sometimes confuses people.)
This is NOT optional. In this project, web pages are equivalent to the sections in this long web page. This is a departure from the linear model we have been using, but it is a great opportunity for students to experiment with a new type of website.
Hint: Use content from your module B website if it’s usable. You can copy and paste useful parts of the code.
As an example of iterative SDLC, students will create and improve their creative website through each Part of the course (HTML5, CSS3 and JS). For Project C, CSS must permeate the website AND it must be responsive. The student will create, validate, and submit the following website:
Overall Coding Requirements
- Use HTML5 in all that you do. Do NOT use deprecated tags or techniques. (-2 per deprecated tags)
- CSS to use* (20 rules/purposes)**
- Control Page layout, flow, grid, etc.
- CSS controlled Navigation
- CSS columns
- CSS responsive form
- Table controlled by CSS
- You need ten images total
- Apply at least three of these CSS styles to some of your 10 images.
- 2D and 3D transformations.
- Translate and scale 2D shapes.
- Rotate and skew 2D and 3D shapes.
- Animation using CSS
- Apply at least three of these to some of your 10 images:
- Rounded corners
- Borders/border images
- Responsive CSS Website
- Media Query
- CSS comments. Tag the sections of code to let me know what you are doing.
*For our purposes, this website will look like a single web page with multiple sections that look different and have different topics and purposes. Think Contrast Rebellion or Barrel and Barc. When you visit these sites, be a spy and look at the code. You will need to use targets (anchor tags) in your menu to be able to navigate through your vertical website(page;-}).
Components and Structure
These components need to be in your web to be on your way to earning full credit.
|6 sections for your vertical web page.||
Section Name: section name should reflect the purpose of each section: for a family reunion web site-aunts, cousins, sibling or #home, #images, # videos, etc. Or
Each section should look different from the other, you can alternate styles, but consider contrastrebellion.com as a good example.
There needs to be padding or white space between the sections.
There needs to be white space/padding away from the sides of the browser window. Again, look at Contrast Rebellion, Keith’s Cakes, or some of the websites listed below.
Use a background positioned image in at least once of the sections.
Each section should have a name, like every HTML file should have a page name (Yes, I mentioned this twice.)
Create 20 CSS “rules” or “uses”. The reactive navigation bar or dropdown menu counts for 5.
Home section (equivalent to home page)
Should fulfill the definition of the home page. The home section should be the introduction to your website, and its anchor. The home page facilitates the navigation.
There needs to be multiple uses of graphics, images, etc.. In fact, you can put “additional” items in any section in your web. If you make a banner, use icons, images, canvas, SVG: these count for your graphics.
Use CSS as described in the list above to control your images.
Images (10) – accessible. You can create a CSS image gallery.
Ten points extra credit for using CANVAS. But you must use it in a meaningful way – It must be integrated into your page design. Examples could be a “business card”, advertisement area, banner decoration, banner, footer, e.g, add to the page style.
Coded with HTML5 and CSS3
Use CSS to style.
Table is ADA accessible.
Table should have data that explains what CSS code you are using in your site. *
Put this table in the end section.
Table with table attributes – accessible – create table relevant to theme. Do NOT use tables for layout for content OR navigation. As in the previous project, use the table requirement, if you like to list all the type of CSS code you used for what purpose, where it is located, and site where you go it from. Be sure to list this location table in your navigation so I can get to it easily.
Use CSS to style. Color change on whether form field in filled out or not. (CSS focus selector is an example of color change.)
Use a variety of 6 form fields
Eight form fields.
Form validates/self verifies – this form is a part of the interactive web page user’s feedback. Use CSS to control the look and behavior of a form.
Link in main menu/navigation goes to every section.
Menu bar is positioned to stay in the same relative place in the page no matter how much you scroll.
There needs to be a back to top link in every section in a logical place.
Create You-are-here navigation, a CSS controlled dropdown menu, or a hamburger menu (this counts as part of your CSS requirements).
Many CSS and other requirements for you to do. Make these a part of your design. See below.
Navigation should stay at the top of the window when the user scrolls. You can use CSS in many ways, not just for having reactive links but to use style for the menu or nav area.
16. Follow web convention
|See above section.|
Integrate the content from your theme on each page. Your website can have more than one example of any of the above, but the above table will be what I am looking for! Simple pages include to emulate, but change them, otherwise it’s plagiarism.
*In the above website make sure to use at least 20 CSS rules/applications. The navigation counts but only as 4 required CSS tasks. You can add background/hover/action rules,e tc.
You need to use CSS from each chapter. Detail what you are doing in the code table
*Place your different rules in: an in line style, internal stylesheet, and external stylesheet. Do NOT use an embedded stylesheet (in the head section) when you could use an external stylesheet. I don’t want to see identical codes when it would be more efficient to use an external stylesheet. You will keep points for coding efficiently.
Check out the CSS examples in the W3 Schools website. Want to know if it’s okay to do A, B, or C? Drop me a line in the instructor’s forum. Things you have already been doing, like you-are-here navigation and page or section color or controlling font size count towards the requirement.
Create an @ media rule that demonstrates responsive web design. Control for width, or background color, etc….if it doesn’t work for what you have created, e.g. used pixels for width instead of relatives measurements, state so in the comments. Be very specific about what is not working with the @media rule. For example, my images or my banner/footer were X pixels wide.
Project C discussions and Examples
Example vertical websites discussed:
Examples of two vertical websites
User: n/a – Added: 3/14/18
YouTube URL: http://www.youtube.com/watch?v=QUi-PsiOb4k
Here’s another example: https://www.google.com/amp/s/www.webdesignerdepot.com/2014/12/how-to-design-the-perfect-single-page-website/amp/ (this page also has example webs on it.)