Project #1: Professional Website

Standups

Overview

For your first project, you're going to build a professional website! What kind of website will this be? That's up to you! We will need to approve your website before moving forward.

What should your website focus on....?

• An imaginary business?
• A charity or non-profit group?
• A website for a product?
• Your personal brand/contact me page?
• An event website? Perhaps a wedding RSVP site?

Project Hosting

This first project should be hosted on your Github pages account under the project1 resource/sub-directory. (http://your-username.github.io/project1). This will be in your Github pages repository (such as https://github.com/code-for-coffee/code-for-coffee.github.io). We will make exceptions for students who choose to host their application on their own server; however, we will not be able to assist with non Github-pages resources until we cover them in class (we discuss server hosting in the coming weeks).

Technical Requirements

Your website must must:

• Be hosted on Github Pages and be available to the web
• Contain an organization structure for HTML, CSS, and Javascript
• Utilize vanilla Javascript OR jQuery for DOM manipulation
• Adequately represent your project scope; ie: a product website should contain product information.
• Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles
• Use TWO media queries/breakpoints for Responsive Design
• Use ONE $.ajax calls to external APIs and render data from them

Bonus Requirements

• Include a Contact Form that works in real-time!
• Include a Google Map on you website to show the location of the service(s) provided
• Include multiple pages that follow the same design/layout as others
• Use Sass in your project for CSS variables, nesting, and more!\
• Use jQuery Animations or CSS Key Frames to make your page come to life!

Necessary Deliverables

• A working professional website, built by you, hosted on Github Pages
• A link to your hosted working website in the URL section of your Github repo
• A git repository hosted on Github, with a link to your hosted website, and frequent commits dating back to the very beginning of the project
• A readme.md file with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Some Suggestions from the GA Team

• Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
• Use your Development Tools (console.log, inspector, alert statements, etc) to debug and solve problems
• Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your website each night, instead of, you know... procrastinating.
• Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
• Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
• Don’t be afraid to write code that you know you will have to remove later. Create temporary elements (buttons, links, etc) that trigger events if real data is not available.

Project Feedback + Evaluation

• Project Workflow: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in?

• Technical Requirements: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?

• Creativity: Did you added a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)?

• Code Quality: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?

• Problem Solving: Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations?

• Total: Your instructors will give you a total score on your project between:

  Score | Expectations ----- | ------------ 0 | Does not meet expectations. 1 | Meets expectactions, good job! 2 | Exceeds expectations, you wonderful creature, you!

  This will serve as a helpful overall gauge of whether you met the project goals, but the more important scores are the individual ones above, which can help you identify where to focus your efforts for the next project!