Git Product home page Git Product logo

spicehutcanada's Introduction

Website Project Part 2: Build

Objectives

You will use the HTML and CSS you are learning in the course to build the website that you described in your proposal. Halfway through your build, you will discuss your progress with your instructor and, at the end, you will perform the testing launch tasks and present your finished website to the class.

Suggested Timelines

You have five weeks to complete part 2. Below is a suggested timeline. Only the part 2 deadline included in the project overview is firm. Remember to make regular commits and pushes, and write appropriate commit messages!

  • Part 2 Week 1: Accept the project invitation and clone your remote repository to your local computer. Create the structure for the site (pages with HTML semantic structure and nav, external css stylesheet) / Sign up for the GitHub Student Development Pack. Publish your repo as a website. Refer to the GitHub Reference Guide “Publish an assignment repository as a website” for instructions.
  • Part 2 Week 2: Write your content / Add your content to the HTML
  • Part 2 Week 3: Style the page layout for mobile with CSS. Don't start writing your CSS until you have learned about responsive layouts (Thursday March 9). / Check in with your instructor on progress (instructions will be provided)
  • Part 2 Week 4: Add CSS breakpoints and add CSS styling for the larger screens / Add your form
    • CVS students: Prepare to present your website in class on Thursday March 30th
  • Part 2 Week 5: Add table or media, add transitions / Fine-tune and validate code, test and fix bugs / Prepare submission documents
    • DLU students: Record and post presentation video in discussion forum

Project Requirements

Website Content

  • 5 pages minimum
  • Either multimedia or a web table
  • A web form that includes at least 3 types of form controls (inputs).
  • You can include a little lorem ipsum if you don't have access to all the body content that you need but all your headlines and links must be English and functional.
  • Images should not be pixelated and their proportions should not be distorted.
  • Add the following disclaimer in the footer of your website: “This is a fictional website that was designed and coded as an educational exercise. It is not intended to be seen outside of the class environment. None of the content and images were approved by the business owner.”

Wesite Code

  • All styles must be coded in external stylesheet(s)
  • At least 2 Google fonts must be used (you can use as many font variants as you like)
  • The code throughout the site must demonstrate a good understanding of flexbox (no Bootstrap).
  • All pages should perform well on all screen sizes and not be broken in between sizes. CSS must be coded mobile-first and use at least two breakpoints, you can use the content-first logic or the device-first logic to choose your breakpoints.
  • All coding best practices must be implemented (semantic HTML, efficient and organized CSS, well-formatted coding, comments to point out features and explain the code).

Website Testing

Project Presentation

Students must present their website to the rest of the class as though they are presenting the finished website to the project's client. The purpose of this presentation is to explain to the client why this new website is a good solution for them.

  • Presentation is between 4 and 6 minutes in length
  • Includes a visual tour of website that highlights the different features
  • Includes audio/in-person narration

Tip: Refer to your original proposal document to help you plan your presentation.

  • CVS students will present in class before the submission deadline (website may not be completely finished). CVS students will access their website online in class (make sure you know your published website’s URL. If you need any other visuals then bring them on a USB drive.)
  • DLU students must record a video of their presentation.

6. Submit your work

  1. Commit and push your final changes to GitHub.
  2. Post your website URL and your GitHub repo URL in the discussion thread that you created for part 1 of this project.
  • DLU students: Include your video in your post.
  1. Submit PDFs of your completed part 2 rubric and the final testing results listed above to the Project Part 2: Website Build assignment area in Brightspace.

Deadlines

Assignments must be submitted before the end of the week but they will only be graded at the end of every unit. Late assignments will not be accepted and will receive an F. You can complete and submit a contract that allows you to extend the deadline for an assignment but you must email it to your instructor a minimum of 48 hrs before the deadline. Deadline extensions are only allowed for those unplanned, unexpected emergencies that life sometimes throws at us, and they will only be approved by your instructor if you follow the correct process. See the Course Info folder in BrightSpace for more info.

spicehutcanada's People

Contributors

yogeshmanni avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.