├── style
└── index.css
├── Wireframe Options
├── Option 1.png
├── Option 2.png
├── Option 3.png
└── ReadMe.md
├── index.html
├── about.html
├── projects.html
├── contact.html
└── ReadMe.md
/style/index.css:
--------------------------------------------------------------------------------
1 | /* Add CSS styling here */
--------------------------------------------------------------------------------
/Wireframe Options/Option 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/web-module-challenge-css-layouts/HEAD/Wireframe Options/Option 1.png
--------------------------------------------------------------------------------
/Wireframe Options/Option 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/web-module-challenge-css-layouts/HEAD/Wireframe Options/Option 2.png
--------------------------------------------------------------------------------
/Wireframe Options/Option 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/web-module-challenge-css-layouts/HEAD/Wireframe Options/Option 3.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | ABOUT
10 |
11 |
--------------------------------------------------------------------------------
/projects.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | PROJECTS
10 |
11 |
--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | CONTACT
10 |
11 |
--------------------------------------------------------------------------------
/Wireframe Options/ReadMe.md:
--------------------------------------------------------------------------------
1 | # Wireframes
2 |
3 | From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include:
4 |
5 | - [ ] A navigation bar with `About`, `Projects`, and `Contact` pages
6 | - [ ] 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.
7 | - [ ] Information about you in place of the given placeholder
8 | - [ ] A `My Projects` button (doesn't need to be functional)
9 | - [ ] A `Contact Me` button (doesn't need to be functional)
10 | - [ ] Link navigation items to new HTML pages
11 |
12 | Some choices are easier than others, pick something that feels right to you.
--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
1 | # Flexbox Module Challenge
2 |
3 | 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.
4 |
5 | ## User Interface and Git
6 |
7 | ## Objectives
8 |
9 | - implement a CSS reset and understand why it’s important for cross-browser development
10 | - identify and explain all properties in the box model
11 | - describe and understand that flexbox is a module
12 | - demonstrate understanding of flex container properties in flex box
13 |
14 | ## Introduction
15 |
16 | In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today.
17 |
18 | 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.
19 |
20 | ## Instructions
21 |
22 | ### Task 1: Set Up The Project With Git
23 |
24 | Follow these steps to set up and work on your project:
25 |
26 | - [ ] Fork and clone this repository.
27 | - [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
28 | - [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
29 | - [ ] cd into your repository on the command line and use code . to open VS Code.
30 | - [ ] 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.
31 | - [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work.
32 |
33 | ### Task 2: Minimum Viable Product
34 |
35 | 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:
36 |
37 | - [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
38 | - [ ] 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
39 | - [ ] Information about you in place of the given placeholder
40 | - [ ] A `My Projects` button that links to the projects page
41 | - [ ] A `Contact Me` button that links to the contact page
42 | - [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
43 |
44 | ### Task 3: Stretch Goals
45 |
46 | The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today.
47 |
48 | - [ ] Make your webpage work at different browser widths, including mobile
49 | - [ ] Add CSS animations
50 | - [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages
51 | - [ ] Host your website on Netlify.com
52 |
53 | ## FAQs
54 |
55 | **What is a wireframe? How do I use one?**
56 |
57 | *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.*
58 |
59 | 
60 |
61 | ## Resources
62 |
63 | 👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
64 |
65 | 👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev)
66 |
67 | 🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php)
68 |
69 | ## Submission format
70 |
71 | - [ ] Connect your repository by copy-pasting its Github URL into the submission slot.
72 | - [ ] Your submitted URL will always reflect your most recent work pushed to Github.
73 |
74 |
--------------------------------------------------------------------------------