This is a guideline on how to focus your efforts. Generally, you should do these in order. You may find that doing things in a bit of a different order works for you.
For the Grading Rubric, page content, due date etc, visit the Final Project post.
Update: the Concrete Examples content is now in the content folder.
To view people’s Final Projects view the Final Projects Page.
0: Planning
It’s important to have an idea of what you’re going for before you get deep into writing HTML and CSS. There are two assignments that you should complete or update related to this:
Assignment 7: Site Style Basics.
After your midterm project you may want to update this for your plan for your final project. Either way, make sure that you have a plan for what fonts, colors and other style basics you will use for your project.
Assignment 9: Final Project Wireframes
Wireframes allow you to visualize the way you are going to lay out your content for each page at each of the different screen sizes for your final (this is why you were asked to do 9 wireframes).
All of these steps assume that you have done your wireframes and have some ideas on the colors, type and overall feel and look that you’re going for in your site. If you don’t have these things then it will be much slower to implement the steps and harder to ask for help. The better you know what you’re doing the easier it is to get it done. If, when you do it, you change your mind, that’s OK. Just make sure you know how you want to change it and then work to do that.
1: File Structure
Grading Rubric Area: Deploy: Structure 5 points
You should have files from your work on the midterm. Still it’s a good idea to check that you have a good structure. The link below also has some files that you can copy and use as a starting point.
2: Create HTML files
Grading Rubric Areas:
Content: Structure, 7 points
Content: Quality and Attribution, 8 points
HTML: 10 points
Accessibility: 5 points
First you will need to add the content to your pages. The content can be found here:
Final Project Content: view Dropbox folder
Convert to HTML
Then you will need to convert that content to HTML. This video walks through converting content to HTML.
Choosing the right element
I created the HTML5 Periodic Table of Elements to help see the elements and choose them.
- Core: These are the 31 most used HTML elements. If you know these, you know most of what you need.
- Core Text: These are elements that have to do with displaying text
- Core Media: elements to put media on the page (not including things like embedded video).
- Page Structure: These are the elements that contain other elements and should be used for the major areas of your page.
- Setup: These are the elements that describe your page and link to outside CSS and JS resources. They are included in the Base Responsive Page we used in class.
Match HTML to wireframes
You also need to make sure that there is HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table above) to match the page areas that you have outlined in your wireframes. Remember that for both CSS Grid and Flexbox there needs to be a containing element where the grid or flex is applied.
This video walks through a couple of examples.
https://cuny907-my.sharepoint.com/:v:/g/personal/christopher_stein48_login_cuny_edu/Eftkv7QZZO1Kg48XqPY4M6UBZb1QM4rMBMdKIR6ucRAofg?e=yhhQ9D
Site-wide Content
Don’t forget
- Same header on each page, including the site title Smart Study Skills
- Same navigation on each page
- same footer on each page with Creative Commons license and Designed by credit for you.
Attribution
Remember to include the following attributions:
- Creative Commons, Non-commercial, attribution, share-alike license in footer
- credit for and links to any images, media, css, html, or JavaScript you use. My files I give don’t need to be attributed. You can either do this directly on the media (like captioning images) or you can include a list of credits on the about page (this would be additional content for the page that you need to add. If you create images for the site, give yourself credit.
3: Layout
Grading Rubric:
CSS: Grid Layout, 5 points
Responsive: Media Queries, 15 points
Layout is important and requires HTML, CSS Grid and Media Queries to work. It also helps if you have a plan about what you want to do.
Visit the Layout Page for more information.
4: Responsive Navigation
Grding Rubric: Interaction Design, 5 points
For the final project you will need a responsive navigation. This page has a number of examples that you can use. Note that you may (most likely) will need to set pay attention to the breakpoints for when the navigation change from the mobile version to the full version. You only need one breakpoint as there are really only two nav layouts. Many of the navigation examples required HTML, CSS and JS to implement so make sure you add all of that to the appropriate files.
I suggest that you put the CSS in a separate nav.css file and that you put the JavaScript in your main.js file or, if they provide an entire file, that you add it to the vendor folder and include it from there.
View Responsive Navigation page.
5: Visual Design
Grading Rubric: Visual Design: Overall, 15 points
Visual design is about matching the visual elements of the site (color, line, text, layout, media) to the content of the site and the goals of your audience (and the client paying for the site.
Visit the Visual Design page for an overview.
Typography.
Grading Rubric: Visual Design: Typography, 10 points
Because text makes up most of the web Typography is an important part of visual design. View the typography page for information on setting up a set of base typographic styles, picking fonts and making a typographic hierarchy.
6: Deploy on GitHub
Grading Rubric Area: Deploy: GitHub Pages 5 points
This is important to both your daily workflow and publishing your site. I have a few videos that walk through the process. Remember that once you get your GitHub Site set up and have git working in Brackets your general daily routine is:
- Pull: this pulls down any changes to the files from GitHub
- Commit: Make changes to your files and commit those changes when a related chunk of work is done.
- Push: this pushes your changes back to GitHub for safe keeping.
Video Tutorials
- Brackets Git: Install
- Brackets Git: Clone repository from GitHub
- Brackets Git: Workflow
- Publish GitHub Pages also this post.
