W3_Bootstrap_Portfolio

Portfolio developed using HTML, CSS, with the addition of Bootstrap features

HTML & CSS Portfolio

Description

This portfolio uses HTML, CSS (inc. flexboxes, grids, id and class formatting), and media queries for different sizes of screen.

• The Task
• Acceptance Criteria
• Requirements
• Review
• Helpful Resources
• Installation
• Usage
• Credits
• License

Task

Preview of and Link to my Completed Task

Link to live URL: https://dev-shai.github.io/Bootstrap_Portfolio/

Instructions

Acceptance_Criteria

1. Create a new GitHub repositories and name it Bootstrap-Portfolio.

2. Clone this repository to your computer.

3. 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.

4. Using Bootstrap, recreate your portfolio site with the following items:

   The website should include the following bootstrap components:

   • 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: https://placehold.co/

     • 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.

• 5. Your Bootstrap solution should minimize use of media queries.

• 6. Deploy your new Bootstrap-powered portfolio to GitHub Pages.

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.

Personal todos:

• Add alt text to image

• Reduce use of media queries where possible

• Remove Lorem text and add actual text

• Clean up class labels and check they are relevant and make sense

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.

Helpful_Resources

• Bootstrap Documentation

• Responsive Web Design - How to Create Media Queries

• Media Queries 101 by CSS Tricks

• Media Query Documentation

• Github Pages Guide

  • Choose "Project Site" and "Start from Scratch" to get correct instructions.

Installation

N/A

Usage

This landing page has been used as a task to practice and be assessed on code refactoring. It also features the use of CSS, HTML, a nav bar, classes, ids, float functions, and basic website layout, as well as supporting accessibility, and using images with alternative text (for accessibility and search engine development).

Credits

N/A

License

MIT licence - please refer to the LICENCE in the repo.

---

Badges

N/A