Flexbox Module Challenge

The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor.

User Interface and Git

Objectives

• implement a CSS reset and understand why it’s important for cross-browser development
• identify and explain all properties in the box model
• describe and understand that flexbox is a module
• demonstrate understanding of flex container properties in flex box

Introduction

In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today.

Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless.

Instructions

Task 1: Set Up The Project With Git

Follow these steps to set up and work on your project:

• Fork and clone this repository.
• Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
• DO NOT MAKE A BRANCH! You will be pushing to main/master today.
• cd into your repository on the command line and use code . to open VS Code.
• Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
• Complete your work making regular commits; your submitted URL will always reflect your most recent work.

Task 2: Minimum Viable Product

Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. You may choose any of the three wireframes in the "Wireframe Options" folder above. Your complete project should look similar to the wireframe you chose, and include all of the following elements:

• A navigation bar with About, Projects, and Contact that link to the corresponding pages
• Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
• Information about you in place of the given placeholder
• A My Projects button that links to the projects page
• A Contact Me button that links to the contact page
• Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page

Task 3: Stretch Goals

The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today.

• Make your webpage work at different browser widths, including mobile
• Add CSS animations
• Design and execute your own wireframe for About, Projects, and Contact pages
• Host your website on Netlify.com

FAQs

What is a wireframe? How do I use one?

Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.

Resources

👋 Assignment help: A Complete Guide to Flexbox

👀 Explore a Curated Gallery of Professional Portfolios

🌼 From Wireframes to Code

Submission format

• Connect your repository by copy-pasting its Github URL into the submission slot.
• Your submitted URL will always reflect your most recent work pushed to Github.