Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.
This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. During this Sprint, you studied semantic HTML, CSS, git, responsive design and some Javascript. In your project this week, you will demonstrate proficiency by creating a fully responsive website that has some missing sections as well as some Javascript problems that need to be solved.
This is an individual assignment. All work must be your own. Your project score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
You are not allowed to collaborate during the Sprint Project. However, you are encouraged to follow the twenty-minute rule and seek support from your GL or instructor if you need direction.
You have four hours to complete this challenge. Plan your time accordingly.
In this project, you build a missing header (navigation and image) on the home page, update some CSS styling on the index.css, and make your page responsive for mobile. You will be working with a pre-existing web page, allowing you to get a taste of what it is like to inherit code from someone else, as will regularly happen on the job.
In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version.
Click here for home page example
Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your group lead.
Demonstrate your understanding of this week's concepts by answering the following free-form questions.
Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager
-
If you were to describe semantic HTML to the next cohort of students, what would you say?
-
What are the 4 areas of the box model?
-
What command do you use in git to copy files from Github?
-
Explain why git is valuable to a team of developers.
-
What is the difference between Git and Github?.
You are expected to be able to answer all these questions. Your responses contribute to your Sprint Project grade. Skipping this section will prevent you from passing this challenge.
- Create a forked copy of this project
- Add your group lead or instructor as collaborator on Github
- Clone your OWN version of the repository
- Create a new branch: git checkout -b
<YourfirstName-YourlastName>. - Implement the project on your newly created
<YourfirstName-YourlastName>branch, committing changes regularly - Push commits: git push origin
<YourfirstName-YourlastName>
Your finished project must include all of the following requirements:
Review the provided design files. Notice the navigation and hero images are missing in the starter code.
- Build the HTML and CSS to create the missing navigation and header
- Read the instructions in The Javascript file
- Make your design responsive such that it is accessible on mobile(500px)and matches the mobile wireframe.
- Add responsive breakpoints to your code by using media queries
In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not.
After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
- Make your design responsive such that it is accessible on tablet(800 px) and matches the tablet wireframe.
- Build a page of your choosing from the navigation items. Come up with content and images that fit the theme.
- Introduce CSS animations to your site.
- Build a contact page and create a form with several inputs of your choosing
📚Best Practices for Responsive Design
🤝W3 Schools - Responsive Design
Follow these steps for completing your project.
- Submit a Pull-Request to merge Branch into master (student's Repo). Please don't merge your own pull request
- Add your team lead as a reviewer on the pull-request
- Your team lead will count the project as complete by merging the branch back into master