For this Challenge no zip file.
| Module | Mac 🍎 | Duration | Window 🖼️ | Duration |
|---|---|---|---|---|
| 03 | Video 📺 | 00:00 ⏲️ | Video 📺 | 00:00 ⏲️ |
In this assignment, you’ll be building your portfolio layout using the Bootstrap CSS Framework from scratch.
UX and Advanced CSS: Bootstrap Portfolio You’ve learned a ton of material: HTML, CSS, GitHub, GitHub Pages, and Bootstrap. If you feel like you’re falling behind, there’s no need to panic. You’ll have plenty of time to digest and master this material.
We’re diving into JavaScript next unit, and HTML/CSS will start receiving less focus. Still, you’ll find that a basic knowledge of HTML/CSS will help you understand JavaScript, especially when we use it to manipulate web pages.
Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code.
Committing often is a signal to employers that you are actively working on your code and learning:
We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it!
Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong.
Be clear and descriptive in your commit messaging.
When writing a commit message, avoid vague messages like “fixed.” Be descriptive so that you and anyone else looking at your repository knows what happened with each commit.
We would like you to have well over 200 commits by graduation, so commit early and often!
Create a new GitHub repository and name it Bootstrap-Portfolio.
Inside your Bootstrap-Portfolio repo, create the folder structure for the webpage.
Create a folder structure.
Create a index.html.
Create a css folder.
Inside create a style.css file.
Create an images folder.
Place all your images in this folder. Using Bootstrap, recreate your portfolio site with the following items:
A navigation bar
A navigation menu at the top. Feel free to use Bootstrap’s navbar or create your own.
Include links that are applicable to your portfolio.
Links should navigate to the appropriate sections
A hero section
A jumbotron featuring your picture, your name, and any other information you’d like to include. A work section
A section displaying your work in grid.
If you need to use placeholder image use placehold.coLinks to an external site.
Use Bootstrap cards for each project.
The description should give a brief overview of the work.
Each project will eventually link to your class project work!
A skills section
List out the skills you expect to learn from the bootcamp. An about/contact section
An About Me section in the same row. A footer section
All hyperlinks should have a hover effect.
All buttons should display a box shadow upon hover.
Your Bootstrap solution should minimize use of media queries.
Deploy your new Bootstrap-powered portfolio to GitHub Pages.
Helpful Resources Bootstrap DocumentationLinks to an external site.
Responsive Web Design * How to Create Media QueriesLinks to an external site.
Media Queries 101 by CSS TricksLinks to an external site.
Media Query DocumentationLinks to an external site.
Github Pages GuideLinks to an external site.
Choose “Project Site” and “Start from Scratch” to get correct instructions. Grading Requirements NOTE If a Challenge assignment submission is marked as “0”, it is considered incomplete and will not count towards your graduation requirements. Examples of incomplete submissions include the following:
A repository that has no code
A repository that includes a unique name but nothing else
A repository that includes only a README file but nothing else
A repository that only includes starter code
This homework is graded based on the following criteria:
Technical Acceptance Criteria: 40% Satisfies all of the above acceptance criteria. Deployment: 32% Application deployed at live URL.
Application loads with no errors.
Application GitHub URL submitted.
GitHub repository contains application code.
Application Quality: 15% Application resembles the functionality of their previous portfolio. Repository Quality: 12% Repository has a unique name.
Repository follows best practices for file structure and naming conventions.
Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
Repository contains multiple descriptive commit messages.
Repository contains quality readme with description, screenshot, link to deployed application.
Review You are required to submit BOTH of the following for review:
The URL of the deployed application.
The URL of the GitHub repository that contains your code. Give the repository a unique name and include a README file that describes the project.
You are allowed to miss up to three Challenge assignments and still earn your certificate. If you complete all Challenge assignments, your lowest three grades will be dropped. If you wish to skip this assignment, click Next, and move on to the next Module.