##1. If you were to describe semantic HTML to the next cohort of students, what would you say?
Instead of having a "div", you can specify what type of information is it
##2. Name two big differences between display: block; and display: inline;.
block will have some whitespace, inline will basically "shrink-wrap" the elements
inline elements cant change their size, blocks can
##3. What are the 4 areas of the box model?
Margin, border, padding, content
##4. While using flexbox, what axis does the following property work on: align-items: center?
Without overriding the direction (default: row) that would be the main axis
##5. Explain why git is valuable to a team of developers. They can simultaneously work on different aspects of a project, while also maintaining previous versions (incase you want to revert to an old version for any reason). But one thing i like especially is the branches. Branches allow you to modify ONLY specific things and test before merging
##Bonus Questions #What did you find difficult about the Sprint? Not being able to ask questions or work with other students is a challenge most people face, because it tests us on how we handle little-to-no supervision/guidance on projects and shows we can do it on our own
#What did you find easy about the Sprint? The MVP was very easy in my opinion, because there was very little to change and we've had extensive practice with flex thus far
#Is there anything that you could not complete on today's Sprint? I decided against doing the media query stretch goal because it's something we havent talked about literally at all, and I didn't want to jump into that yet
#Are there any concepts that you find that you don't understand that was taught from the week? Nope! I think my outcome is really nice and clean and I think the training was great!
This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. This Sprint explored User Interface and Git. During this Sprint, you studied Semantic HTML, CSS Fundamentals, CSS Flexbox Module, and Git. In your challenge this week, you will demonstrate proficiency by creating a multi page website that has some missing HTML elements as well as CSS specificity problems that need to be solved. You will also create an additional web page that will be linked to from a navigation you will build.
Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.
This is an individual assessment. All work must be your own. Your challenge 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 Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your PM and Instructor in your cohort help channel on Slack. Your work reflects your proficiency in user interface and your command of the concepts and techniques in semantic HTML, CSS fundamentals, CSS flexbox module, and git.
You have three hours to complete this challenge. Plan your time accordingly.
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 project manager.
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.
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:
Click here for the home page example
Click here for the about page example
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?
Instead of having a "div", you can specify what type of information is it
-
Name two big differences between
display: block;anddisplay: inline;. block will have some whitespace, inline will basically "shrink-wrap" the elements inline elements cant change their size, blocks can -
What are the 4 areas of the box model?
Margin, border, padding, content
- While using flexbox, what axis does the following property work on:
align-items: center?
Without overriding the direction (default: row) that would be the main axis
- Explain why git is valuable to a team of developers.
They can simultaneously work on different aspects of a project, while also maintaining previous versions (incase you want to revert to an old version for any reason). But one thing i like especially is the branches. Branches allow you to modify ONLY specific things and test before merging
You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section will prevent you from passing this challenge.
- Create a forked copy of this project.
- Add your project manager as collaborator on Github.
- 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 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
- Add your project manager as a reviewer on the pull-request
- Your project manager will count the project as complete by merging the branch back into master.
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:
- box1:
teal - box2:
gold - box3:
cadetblue - box4:
coral - box5:
crimson - box6:
forestgreen - box7:
darkorchid - box8:
hotpink - box9:
indigo - box10:
dodgerblue
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.
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:
- 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
- Add responsive breakpoints to your code by using media queries