Advanced CSS Challenge: Professional Portfolio Welcome to this week's Challenge! This is an even-numbered week, so you won't be given any starter code. Instead, you'll create a web application from...

Advanced CSS Challenge: Professional Portfolio

Welcome to this week's Challenge! This is an even-numbered week, so you won't be given any starter code. Instead, you'll create a web application from scratch! This week, you'll build a portfolio page, which you can add to as the course progresses.

A portfolio of work can showcase your skills and talents to employers looking to fill a part-time or full-time position. An effective portfolio highlights your strongest work as well as the thought processes behind it. Students who have portfolios with deployed web applications (meaning they are live on the web) are typically very successful in their career search after the boot camp. This last point can't be stressed enough: having several deployed projects is a minimum requirement to receive an initial interview at many companies.

With these points in mind, in this Challenge you'll set yourself up for future success by applying the core skills you've recently learned: flexbox, media queries, and CSS variables. You'll get to practice your new skills while creating something that you'll use during your job search. It's a win-win that you'll likely be grateful for in the future!


If you don't have enough web applications to showcase at this point, use placeholder images and names. You can change them to real applications as you create them later in the course.

Let's look at what a user story written from the perspective of a hiring manager might look like. As you might remember, we follow the AS AN / I WANT / SO THAT format.

User Story

AS AN employer I WANT to view a potential employee's deployed portfolio of work samples SO THAT I can review samples of their work and assess whether they're a good candidate for an open position

Acceptance Criteria

Here are the critical requirements necessary to develop a portfolio that satisfies a typical hiring manager's needs:

GIVEN I need to sample a potential employee's previous work WHEN I load their portfolio THEN I am presented with the developer's name, a recent photo or avatar, and links to sections about them, their work, and how to contact them WHEN I click one of the links in the navigation THEN the UI scrolls to the corresponding section WHEN I click on the link to the section about their work THEN the UI scrolls to a section with titled images of the developer's applications WHEN I am presented with the developer's first application THEN that application's image should be larger in size than the others WHEN I click on the images of the applications THEN I am taken to that deployed application WHEN I resize the page or view the site on various screens and devices THEN I am presented with a responsive layout that adapts to my viewport


The following animation shows the web application's appearance and functionality:

A video displays a sample portfolio.

How to Complete the Challenge

Follow these steps to complete the challenge:

  1. Use the Acceptance Criteria as a guide for how you'll plan deadlines, sketch, and code your portfolio.

  2. Ensure that your work meets the Acceptance Criteria and the full list of grading requirements.

  3. Reach out to your instructional support team throughout the week for help.

  4. Follow submission instructions.

Grading Requirements


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 Challenge is graded based on the following criteria:

Technical Acceptance Criteria: 40%

  • Satisfies all of the preceding 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 mock-up functionality provided in the Challenge instructions.

Repository Quality: 13%

  • 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 a quality readme with description, screenshot, link to deployed application.

Jul 12, 2022

Get Answer To This Question

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here