At BloomTech, teachers who are working web developers design Sprint Challenges to put students through realistic on-the-job scenarios, solving problems by applying the material covered in the curriculum for this unit: user interface and your command of the concepts and techniques in semantic HTML, CSS fundamentals, CSS flexbox module, and git.
I was not permitted to collaborate with other students during this Sprint Challenge.
Sprint Challenges must pass reviews before students can move on to new material. For more information on the review process click here.
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)
In this challenge, you build a missing header (navigation and image) on the home page, update some CSS styling on the home page, and create an additional page (About) which will link from the navigation you created. You will also need to make both pages responsive for 500px.
In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home and about pages (found in the design-files folder):
Click here for the home page example
Click here for home page mobile example
Click here for the about page example
Click here for about page mobile example
- Create a forked copy of this project.
- Clone your OWN version of the repository (Not Lambda's by mistake!).
- Create a new branch: git checkout -b
<firstName-lastName>. - Implement the project on your newly created
<firstName-lastName>branch, committing changes regularly. - Push commits: git push -u origin
<firstName-lastName>.
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
Your finished project must include all of the following requirements:
Review the provided design file for the home page. Notice the navigation and header images are missing.
- Build the HTML and CSS to create the missing navigation and header.
- Link the
Aboutnavigation item to the about.html page
You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box (Note: inline styles are not acceptable. All styles should be written in your index.css file):
- box1:
teal - box2:
gold - box3:
cadetblue - box4:
coral - box5:
crimson - box6:
forestgreen - box7:
darkorchid - box8:
hotpink - box9:
indigo - box10:
dodgerblue - footer and line color:
#ff4b00
Review the provided design file for the about page. You have been provided the HTML wrapper, footer, and page content for the about page. Create the rest of the missing HTML and CSS to match the design file.
- Copy and paste your home page navigation and header into the about page
- Update the header image with the about page image
- Link the
Homenavigation item back to theindex.htmlpage. - Build the rest of the about page layout to match the design
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.
Note: Please make sure you are using flexbox to layout your website. Floats, inline-block, tables, etc, should not be used for layout.
Before you jump in, take 10 minutes to review your code. Take time to see how the home page about about page was built. During this time, Review the provided design files.
Ensure your website is responsive at 500px such that your styles match the mobile design file for the home and about pages.
Please submit the url to your pull request in Canvas