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.
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
- 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.”
- 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).
- Validate your HTML for all pages: https://validator.w3.org
- Validate your external stylesheet (by file upload): https://jigsaw.w3.org/css-validator
- Check your homepage is accessible: https://wave.webaim.org
- Check your homepage’s page speed: https://developers.google.com/speed/pagespeed/insights/
- Check your responsive web page is mobile-friendly: https://search.google.com/test/mobile-friendly
- We won’t perform cross-browser testing for your website.
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.
- Commit and push your final changes to GitHub.
- 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.
- 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.
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.