FINAL PROJECT

For your final project, you will design and build your own web application using your knowledge of frontend web development and applying everything you have learned in this course. You could create: a portfolio website, a landing page for a startup or business, or a prototype for a simple web-app. Work with the instructors to create project goals that are realistic given the scope and timing of the class. Take a look at the GA Gallery for examples of past student work.

Real World Applications

Use your creativity and knowledge gained during this course to build a website from scratch. The instructional team will validate feasibility and help manage scope. You should strive to demonstrate an understanding of all topics covered during this course:

Structure, design, and style your app with HTML and CSS

Use JavaScript to make your app interactive

Combine technical and design skills to create a responsive website that is compatible with mobile devices

Timeline

DUE DATE DELIVERABLE
October 22nd Project Proposal
October 29th Wireframes
November 5th HTML / CSS Draft
November 14th JavaScript
November 19tth Responsive Web Design
November 28th In-Class Final Presentations

Evaluation / Submission

Students will create a new repository on GitHub for their final project and push their code to this repo when they are ready to submit. The instructional team will grade each technical requirement and provide a numeric grade on a scale: does not meet expectations (0); meets expectations (1); exceeds expectations (2).

TECHNICAL REQUIREMENTS

1. Submit all deliverables by their due dates:

  • Project Proposal
  • Wireframes
  • Draft of HTML / CSS
  • JavaScript Pseudocode
  • JavaScript Draft

2. Use HTML to correctly structure the DOM:

  • Use HTML5 structural elements (header, footer, nav, footer)
  • Demonstrate a correct use of classes and IDs
  • Select the appropriate tags to markup content

3. Use CSS to style the page:

  • Apply fonts, color and styles to elements and the page
  • Demonstrate use of floats, inline-block, and the box model

4. Use JavaScript to make pages interactive

BEST PRACTICES

While not technically required, you should keep these best practices in mind:

  • Clean And Readable Code. The instructional team should be able to read and follow your code easily. Maintain clean and readable code including: consistent indentation, code commenting (e.g. when closing tags, demarcating sections of code, describing possibly ambiguous code choices) and use of proper and consistent naming conventions.
  • Search Engine Optimization (SEO). Implement SEO best practices related to HTML markup, and content optimization.
  • Avoid deprecated tags. Use best practices and build using only supported HTML and CSS tags.

Hosting

You can host your final project, for free, using GitHub pages. If you run into any problems with GitHub pages, the instructional team will help you troubleshoot.

Watch GitHub video tutorial