├── .gitattributes ├── .github └── workflows │ └── gatsby.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── assets └── README.md ├── csv.js ├── day-1-flexbox ├── 1-flexbox-intro │ ├── Flexbox Properties.txt │ ├── day1.pdf │ ├── flexbox notes.txt │ └── instructions.txt ├── 2-flexbox-grid │ ├── fem-2c-lg.png │ ├── fem-2c-sm.png │ └── instructions.txt ├── 3-figure-figcaption │ ├── finished.png │ └── instructions.txt ├── 4-flexbox-exercises │ ├── 4a-collections │ │ ├── begin │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── desktop.png │ │ ├── end │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── mobile.png │ │ └── tablet.png │ ├── 4b-mission │ │ ├── begin │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── end-alt │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── facebook-icon.svg │ │ │ │ ├── instagram-icon.svg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── logo.png │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── end │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── mission text.txt │ │ └── screenshots │ │ │ ├── desktop-alt.png │ │ │ ├── desktop.png │ │ │ ├── mobile-alt.png │ │ │ ├── mobile.png │ │ │ ├── tablet-alt.png │ │ │ └── tablet.png │ ├── 4c-footer │ │ ├── begin │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── end │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── facebook-icon.svg │ │ │ │ ├── instagram-icon.svg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── facebook-icon.svg │ │ ├── instagram-icon.svg │ │ └── screenshots │ │ │ ├── desktop.png │ │ │ ├── mobile.png │ │ │ └── tablet.png │ └── instructions.txt ├── 5-header-navbar │ ├── begin │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ ├── abstract.jpg │ │ │ ├── facebook-icon.svg │ │ │ ├── instagram-icon.svg │ │ │ ├── landscape.jpg │ │ │ ├── logo2.png │ │ │ ├── music.jpg │ │ │ ├── pop-art.jpg │ │ │ ├── vehicles.jpg │ │ │ └── vivid.jpg │ │ └── index.html │ ├── end │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ ├── abstract.jpg │ │ │ ├── facebook-icon.svg │ │ │ ├── header-logo.svg │ │ │ ├── instagram-icon.svg │ │ │ ├── landscape.jpg │ │ │ ├── logo2.png │ │ │ ├── music.jpg │ │ │ ├── pop-art.jpg │ │ │ ├── vehicles.jpg │ │ │ └── vivid.jpg │ │ └── index.html │ ├── header-logo.svg │ ├── instructions.txt │ └── screenshots │ │ ├── desktop.png │ │ ├── mobile.png │ │ └── tablet.png ├── 6-responsive-images │ ├── banner demo │ │ ├── banners.html │ │ └── banners │ │ │ ├── banner-1084.png │ │ │ ├── banner-1200.png │ │ │ ├── banner-300.png │ │ │ ├── banner-583.png │ │ │ ├── banner-788.png │ │ │ └── banner-958.png │ ├── begin │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ ├── abstract.jpg │ │ │ ├── facebook-icon.svg │ │ │ ├── header-logo.svg │ │ │ ├── instagram-icon.svg │ │ │ ├── landscape.jpg │ │ │ ├── logo2.png │ │ │ ├── music.jpg │ │ │ ├── pop-art.jpg │ │ │ ├── vehicles.jpg │ │ │ └── vivid.jpg │ │ └── index.html │ ├── end │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ ├── abstract.jpg │ │ │ ├── facebook-icon.svg │ │ │ ├── header-logo.svg │ │ │ ├── hero-1200.png │ │ │ ├── hero-300.png │ │ │ ├── hero-838.png │ │ │ ├── instagram-icon.svg │ │ │ ├── landscape.jpg │ │ │ ├── logo2.png │ │ │ ├── music.jpg │ │ │ ├── pop-art.jpg │ │ │ ├── too-cool-1058.jpg │ │ │ ├── too-cool-1200.jpg │ │ │ ├── too-cool-300.jpg │ │ │ ├── too-cool-740.jpg │ │ │ ├── vehicles.jpg │ │ │ └── vivid.jpg │ │ └── index.html │ ├── hero.png │ ├── instructions.txt │ ├── responsive images.pdf │ ├── screenshots │ │ ├── desktop.png │ │ ├── mobile.png │ │ └── tablet.png │ └── too-cool.jpg └── 7-wrapup │ ├── begin │ ├── css │ │ └── style.css │ ├── img │ │ ├── abstract.jpg │ │ ├── facebook-icon.svg │ │ ├── header-logo.svg │ │ ├── hero-1200.png │ │ ├── hero-300.png │ │ ├── hero-838.png │ │ ├── instagram-icon.svg │ │ ├── landscape.jpg │ │ ├── logo2.png │ │ ├── music.jpg │ │ ├── pop-art.jpg │ │ ├── too-cool-1058.jpg │ │ ├── too-cool-1200.jpg │ │ ├── too-cool-300.jpg │ │ ├── too-cool-740.jpg │ │ ├── vehicles.jpg │ │ └── vivid.jpg │ └── index.html │ ├── end │ ├── css │ │ └── style.css │ ├── img │ │ ├── abstract.jpg │ │ ├── eyeing-you.jpg │ │ ├── facebook-icon.svg │ │ ├── fork-it-up.jpg │ │ ├── header-logo.svg │ │ ├── hero-1200.png │ │ ├── hero-300.png │ │ ├── hero-838.png │ │ ├── instagram-icon.svg │ │ ├── landscape.jpg │ │ ├── lets-scoot.jpg │ │ ├── logo2.png │ │ ├── music.jpg │ │ ├── pop-art.jpg │ │ ├── too-cool-1058.jpg │ │ ├── too-cool-1200.jpg │ │ ├── too-cool-300.jpg │ │ ├── too-cool-740.jpg │ │ ├── vehicles.jpg │ │ └── vivid.jpg │ └── index.html │ ├── eyeing-you.jpg │ ├── fork-it-up.jpg │ ├── instructions.txt │ ├── lets-scoot.jpg │ └── screenshots │ ├── desktop.png │ ├── mobile.png │ └── tablet.png ├── day-2-grid ├── 08-grid-intro │ ├── Grid Properties.txt │ └── day2.pdf ├── 09-mondrian-painting-demo │ └── instructions.txt ├── 10-grid-grid │ └── instructions.txt ├── 11-fig-figcaption │ └── instructions.txt ├── 12-challenge layout │ ├── 12a mosaic grid │ │ ├── begin │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── 1-place.jpg │ │ │ │ ├── 2-lippy.jpg │ │ │ │ ├── 3-skull.jpg │ │ │ │ ├── 4-yell.jpg │ │ │ │ ├── 5-fork.jpg │ │ │ │ ├── 6-drip.jpg │ │ │ │ ├── 7-invade.jpg │ │ │ │ ├── 8-school.jpg │ │ │ │ └── 9-doors.jpg │ │ │ └── index.html │ │ ├── end │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── 1-place.jpg │ │ │ │ ├── 2-lippy.jpg │ │ │ │ ├── 3-skull.jpg │ │ │ │ ├── 4-yell.jpg │ │ │ │ ├── 5-fork.jpg │ │ │ │ ├── 6-drip.jpg │ │ │ │ ├── 7-invade.jpg │ │ │ │ ├── 8-school.jpg │ │ │ │ └── 9-doors.jpg │ │ │ └── index.html │ │ ├── grid layout mobile.png │ │ └── grid layout-desktop.png │ ├── 12b home page │ │ ├── begin │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── abstract.jpg │ │ │ │ ├── eyeing-you.jpg │ │ │ │ ├── facebook-icon.svg │ │ │ │ ├── fork-it-up.jpg │ │ │ │ ├── header-logo.svg │ │ │ │ ├── hero-1200.png │ │ │ │ ├── hero-300.png │ │ │ │ ├── hero-838.png │ │ │ │ ├── instagram-icon.svg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── lets-scoot.jpg │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── too-cool-1058.jpg │ │ │ │ ├── too-cool-1200.jpg │ │ │ │ ├── too-cool-300.jpg │ │ │ │ ├── too-cool-740.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── desktop.png │ │ ├── end │ │ │ ├── css │ │ │ │ └── style.css │ │ │ ├── img │ │ │ │ ├── 1-place.jpg │ │ │ │ ├── 2-lippy.jpg │ │ │ │ ├── 3-skull.jpg │ │ │ │ ├── 4-yell.jpg │ │ │ │ ├── 5-fork.jpg │ │ │ │ ├── 6-drip.jpg │ │ │ │ ├── 7-invade.jpg │ │ │ │ ├── 8-school.jpg │ │ │ │ ├── 9-doors.jpg │ │ │ │ ├── abstract.jpg │ │ │ │ ├── eyeing-you.jpg │ │ │ │ ├── facebook-icon.svg │ │ │ │ ├── fork-it-up.jpg │ │ │ │ ├── header-logo.svg │ │ │ │ ├── hero-1200.png │ │ │ │ ├── hero-300.png │ │ │ │ ├── hero-838.png │ │ │ │ ├── instagram-icon.svg │ │ │ │ ├── landscape.jpg │ │ │ │ ├── lets-scoot.jpg │ │ │ │ ├── logo2.png │ │ │ │ ├── music.jpg │ │ │ │ ├── pop-art.jpg │ │ │ │ ├── too-cool-1058.jpg │ │ │ │ ├── too-cool-1200.jpg │ │ │ │ ├── too-cool-300.jpg │ │ │ │ ├── too-cool-740.jpg │ │ │ │ ├── vehicles.jpg │ │ │ │ └── vivid.jpg │ │ │ └── index.html │ │ ├── mobile.png │ │ └── tablet.png │ └── instructions.txt ├── 13-magazine │ └── instructions.txt ├── 14-cards │ └── instructions.txt └── 15-final-project │ ├── begin │ ├── css │ │ └── style.css │ ├── img │ │ ├── 1-place.jpg │ │ ├── 2-lippy.jpg │ │ ├── 3-skull.jpg │ │ ├── 4-yell.jpg │ │ ├── 5-fork.jpg │ │ ├── 6-drip.jpg │ │ ├── 7-invade.jpg │ │ ├── 8-school.jpg │ │ ├── 9-doors.jpg │ │ ├── abstract.jpg │ │ ├── eyeing-you.jpg │ │ ├── facebook-icon.svg │ │ ├── fork-it-up.jpg │ │ ├── header-logo.svg │ │ ├── hero-1200.png │ │ ├── hero-300.png │ │ ├── hero-838.png │ │ ├── instagram-icon.svg │ │ ├── landscape.jpg │ │ ├── lets-scoot.jpg │ │ ├── logo2.png │ │ ├── music.jpg │ │ ├── pop-art.jpg │ │ ├── too-cool-1058.jpg │ │ ├── too-cool-1200.jpg │ │ ├── too-cool-300.jpg │ │ ├── too-cool-740.jpg │ │ ├── vehicles.jpg │ │ └── vivid.jpg │ └── index.html │ ├── desktop.png │ ├── end │ ├── css │ │ └── style.css │ ├── img │ │ ├── 1-place.jpg │ │ ├── 2-lippy.jpg │ │ ├── 3-skull.jpg │ │ ├── 4-yell.jpg │ │ ├── 5-fork.jpg │ │ ├── 6-drip.jpg │ │ ├── 7-invade.jpg │ │ ├── 8-school.jpg │ │ ├── 9-doors.jpg │ │ ├── abstract.jpg │ │ ├── donut1.jpg │ │ ├── donut2.jpg │ │ ├── donut3.jpg │ │ ├── donut4.jpg │ │ ├── donut5.jpg │ │ ├── eyeing-you.jpg │ │ ├── facebook-icon.svg │ │ ├── fork-it-up.jpg │ │ ├── header-logo.svg │ │ ├── hero-1200.png │ │ ├── hero-300.png │ │ ├── hero-838.png │ │ ├── instagram-icon.svg │ │ ├── landscape.jpg │ │ ├── lets-scoot.jpg │ │ ├── logo2.png │ │ ├── music.jpg │ │ ├── pop-art.jpg │ │ ├── too-cool-1058.jpg │ │ ├── too-cool-1200.jpg │ │ ├── too-cool-300.jpg │ │ ├── too-cool-740.jpg │ │ ├── vehicles.jpg │ │ └── vivid.jpg │ └── index.html │ ├── instructions.txt │ ├── raw materials │ ├── pexels-sharon-mccutcheon-1191639.jpg │ ├── pexels-sharon-mccutcheon-1407346.jpg │ ├── pexels-sharon-mccutcheon-3779937.jpg │ ├── pexels-sharon-mccutcheon-3779945.jpg │ ├── pexels-sharon-mccutcheon-3784440.jpg │ └── text.txt │ └── tablet-mobile.png ├── gatsby-config.js ├── gatsby-node.js ├── lessons ├── card-layouts.md ├── css-grid-exercises.md ├── css-grid-intro.md ├── final-project.md ├── flexbox-exercises.md ├── flexbox-figure-figcaption.md ├── flexbox-grid-system.md ├── flexbox-wrapup.md ├── grid-figure-figcaption.md ├── grid-mondrian-exercise.md ├── grid-system-css-grid.md ├── header-navbar.md ├── intro.md ├── magazine-layouts.md └── responsive-images.md ├── package-lock.json ├── package.json ├── resources ├── Style Guide.png ├── Wall of Wonder Artist List.pdf └── resources.txt ├── src ├── components │ └── TOCCard.js ├── layouts │ ├── Footer.css │ ├── Footer.js │ ├── corner-image.svg │ ├── github-social.svg │ ├── index.css │ ├── index.js │ ├── linkedin-social.svg │ ├── twitter-social.svg │ └── variables.css ├── pages │ ├── 404.js │ └── index.js ├── templates │ └── lessonTemplate.js └── util │ └── helpers.js └── static ├── author.jpg ├── corner-image-active.svg ├── corner-image-inactive.svg ├── courseImage.jpg ├── courseImage.png └── posterframe.jpg /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/workflows/gatsby.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Gatsby Site to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@master 13 | - name: npm install, build, and csv 14 | run: | 15 | npm install 16 | npm run build 17 | npm run csv 18 | - name: Deploy site to gh-pages branch 19 | uses: crazy-max/ghaction-github-pages@v2 20 | with: 21 | target_branch: gh-pages 22 | build_dir: public 23 | env: 24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | node_modules 4 | .cache/ 5 | # Build directory 6 | public/ 7 | .DS_Store 8 | yarn-error.log 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Frontend Masters: CSS Grids and Flexbox in Responsive Web Design v2 3 |

4 | 5 | [![Frontend Masters](https://static.frontendmasters.com/assets/brand/logos/full.png)][fem] 6 | 7 | [Please click here][course] to head to the course website. 8 | 9 | # Issues and Pull Requests 10 | 11 | Please file issues and open pull requests here! Thank you! For issues with project files, either file issues on _this_ repo _or_ open a pull request on the projects repos. This repo itself is the course website. 12 | 13 | # License 14 | 15 | The content of this workshop is licensed under CC-BY-NC-4.0. Feel free to share freely but do not resell my content. 16 | 17 | The code, including the code of the site itself and the code in the exercises, are licensed under Apache 2.0. 18 | 19 | # Attributions 20 | 21 | Icons made by Freepik from www.flaticon.com 22 | 23 | [fem]: https://frontendmasters.com/ 24 | [course]: https://frontendmasters.github.io/grid-flexbox-v2 25 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Masters: CSS Grids and Flexbox in Responsive Web Design v2 2 | 3 | ## Workshop Files 4 | 5 | Taught August 18-19, 2021, at Frontend Masters 6 | -------------------------------------------------------------------------------- /csv.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs").promises; 2 | const path = require("path"); 3 | const fm = require("front-matter"); 4 | const isUrl = require("is-url-superb"); 5 | const parseLinks = require("parse-markdown-links"); 6 | const { sorter } = require("./src/util/helpers"); 7 | const mdDir = process.env.MARKDOWN_DIR || path.join(__dirname, "lessons/"); 8 | const outputPath = 9 | process.env.OUTPUT_CSV_PATH || path.join(__dirname, "public/lessons.csv"); 10 | const linksOutputPath = 11 | process.env.LINKS_CSV_PATH || path.join(__dirname, "public/links.csv"); 12 | 13 | async function createCsv() { 14 | console.log(`making the markdown files into a CSV from ${mdDir}`); 15 | 16 | // get paths 17 | const allFiles = await fs.readdir(mdDir); 18 | const files = allFiles.filter(filePath => filePath.endsWith(".md")); 19 | 20 | // read paths, get buffers 21 | const buffers = await Promise.all( 22 | files.map(filePath => fs.readFile(path.join(mdDir, filePath))) 23 | ); 24 | 25 | // make buffers strings 26 | const contents = buffers.map(content => content.toString()); 27 | 28 | // make strings objects 29 | let frontmatters = contents.map(fm); 30 | 31 | // find all attribute keys 32 | const seenAttributes = new Set(); 33 | frontmatters.forEach(item => { 34 | Object.keys(item.attributes).forEach(attr => seenAttributes.add(attr)); 35 | }); 36 | const attributes = Array.from(seenAttributes.values()); 37 | 38 | if (attributes.includes("order")) { 39 | frontmatters = frontmatters.sort(sorter); 40 | } 41 | 42 | // get all data into an array 43 | let rows = frontmatters.map(item => { 44 | const row = attributes.map(attr => 45 | item.attributes[attr] ? JSON.stringify(item.attributes[attr]) : "" 46 | ); 47 | return row; 48 | }); 49 | 50 | // header row must be first row 51 | rows.unshift(attributes); 52 | 53 | // join into CSV string 54 | const csv = rows.map(row => row.join(",")).join("\n"); 55 | 56 | // write file out 57 | await fs.writeFile(outputPath, csv); 58 | 59 | console.log(`Wrote ${rows.length} rows to ${outputPath}`); 60 | 61 | // make links csv 62 | let longestLength = 0; 63 | let linksArray = frontmatters.map(row => { 64 | const links = parseLinks(row.body).filter(isUrl); 65 | longestLength = longestLength > links.length ? longestLength : links.length; 66 | const newRow = [row.attributes.order, row.attributes.title, ...links]; 67 | return newRow; 68 | }); 69 | 70 | if (longestLength) { 71 | // add title row 72 | linksArray = linksArray.map(array => { 73 | const lengthToFill = longestLength + 2 - array.length; 74 | return array.concat(Array.from({ length: lengthToFill }).fill("")); 75 | }); 76 | 77 | linksArray.unshift( 78 | ["order", "title"].concat( 79 | Array.from({ length: longestLength }).map((_, index) => `link${index}`) 80 | ) 81 | ); 82 | 83 | // join into CSV string 84 | const linksCsv = linksArray.map(row => row.join(",")).join("\n"); 85 | 86 | // write file out 87 | await fs.writeFile(linksOutputPath, linksCsv); 88 | 89 | console.log(`Wrote ${linksArray.length} rows to ${linksOutputPath}`); 90 | } 91 | } 92 | 93 | createCsv(); 94 | -------------------------------------------------------------------------------- /day-1-flexbox/1-flexbox-intro/Flexbox Properties.txt: -------------------------------------------------------------------------------- 1 | Flexbox Properties 2 | 3 | A complete version of these tips with image explanations and links is available at CSS Tricks: 4 | https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 5 | 6 | 7 | Parent (Flex Container) 8 | display: flex | inline-flex; 9 | 10 | flex-direction: row | row-reverse | column | column-reverse; 11 | 12 | flex-wrap: wrap | nowrap | wrap-reverse; 13 | 14 | flex-flow (shorthand for flex-direction and flex-wrap) (flex-flow: row wrap;) 15 | 16 | 17 | These next two properties work similarly, just on their different axes. 18 | 19 | justify-content (main axis): flex-start | flex-end | center | space-between | space-around | space-evenly; 20 | 21 | align-items (cross axis): flex-start | flex-end | center | baseline | stretch; 22 | 23 | 24 | Align-content spans multiple line boxes. 25 | 26 | align-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly; 27 | 28 | 29 | 30 | Children (Flex Items) 31 | order: ; 32 | 33 | flex-grow: ; 34 | 35 | flex-shrink: ; 36 | 37 | flex-basis: | auto; 38 | 39 | flex: shorthand for grow, shrink, and basis (default: 0 1 auto) 40 | 41 | align-self: overrides alignment set on parent 42 | 43 | 44 | 45 | Main axis = the axis declared in flex-direction 46 | Cross axis = the other axis 47 | 48 | i.e. if flex-flow: row wrap; 49 | 50 | main axis = row 51 | cross axis = column 52 | 53 | if flex-flow: column nowrap; 54 | 55 | main axis = column 56 | cross axis = row -------------------------------------------------------------------------------- /day-1-flexbox/1-flexbox-intro/day1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/1-flexbox-intro/day1.pdf -------------------------------------------------------------------------------- /day-1-flexbox/1-flexbox-intro/instructions.txt: -------------------------------------------------------------------------------- 1 | 1-flexbox-intro Instructions 2 | 3 | 4 | 1A - Layout overview 5 | Jen will run through a few slides describing layout options in CSS. 6 | 7 | 8 | 1B- Flexbox intro to basic properties 9 | 10 | Jen will demonstrate the basic Flexbox properties from the flexbox notes.txt document. 11 | 12 | CodePen: https://codepen.io/jen4web/pen/yLbjKWm?editors=1100 13 | 14 | Flexbox Properties.txt is a useful document to have nearby when working in Flexbox. It explains which properties apply to parents and children, along with most of their possible values. 15 | 16 | You may also refer to CSS Tricks: 17 | https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -------------------------------------------------------------------------------- /day-1-flexbox/2-flexbox-grid/fem-2c-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/2-flexbox-grid/fem-2c-lg.png -------------------------------------------------------------------------------- /day-1-flexbox/2-flexbox-grid/fem-2c-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/2-flexbox-grid/fem-2c-sm.png -------------------------------------------------------------------------------- /day-1-flexbox/3-figure-figcaption/finished.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/3-figure-figcaption/finished.png -------------------------------------------------------------------------------- /day-1-flexbox/3-figure-figcaption/instructions.txt: -------------------------------------------------------------------------------- 1 | 3-figure-figcaption INSTRUCTIONS 2 | 3 | Starting CodePen: 4 | https://codepen.io/jen4web/pen/BaRVYRN?editors=1100 5 | 6 | Ending CodePen: 7 | https://codepen.io/jen4web/pen/ExmRQvL?editors=1100 8 | 9 | Flexbox may be applied to as many elements in the document as you wish. Remember to always manage parents (flex containers) and children (flex items) appropriately. 10 | 11 | In this case, if we declare display: flex on the figure, then the caption may be placed next to the image (row) or underneath it (column) very easily. 12 | 13 | Use relative and absolute positioning to move the caption onto the image. Change the color to include some transparency, or use the opacity property to manipulate the transparency. 14 | 15 | 16 | Changed CSS: 17 | 18 | figure { 19 | display: flex; 20 | flex-flow: column nowrap; 21 | position: relative; 22 | } 23 | figcaption { 24 | position: absolute; 25 | bottom: 0%; 26 | width: 100%; 27 | opacity: 0.7; 28 | } 29 | 30 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/css/style.css: -------------------------------------------------------------------------------- 1 | /* colors - see style guide for docs. 2 | Clearly there is more you could place in variables, up to you if you want to use them. My answer does not go beyond colors to keep the code easier to read. */ 3 | 4 | :root { 5 | --color1: #001219; 6 | --color2: #005f73; 7 | --color3: #3d9397; 8 | --color4: #94d28d; 9 | --color5: #e9d8a6; 10 | --color6: #ee9800; 11 | --color7: #ca6702; 12 | --color8: #bb3e03; 13 | --color9: #ae2012; 14 | --color10: #9b2226; 15 | } 16 | 17 | 18 | /* generic site styles */ 19 | 20 | html { 21 | box-sizing: border-box; 22 | } 23 | 24 | *, 25 | *::before, 26 | *::after { 27 | box-sizing: inherit; 28 | } 29 | 30 | body { 31 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 32 | background-color: #DBE5DE; 33 | padding: 0; 34 | margin: 0; 35 | } 36 | 37 | section { 38 | max-width: 1200px; 39 | margin: 0 auto; 40 | padding: 0 1rem; 41 | } 42 | 43 | section h2 { 44 | font-size: 2.5rem; 45 | } 46 | 47 | 48 | /* Initial mobile layout: a series of images stacked on top of each other with the figure caption over the image. */ 49 | 50 | 51 | /* At this breakpoint, transition to 2 figures per line */ 52 | 53 | @media (min-width: 550px) {} 54 | 55 | 56 | /* At this breakpoint, transition to 3 figures per line */ 57 | 58 | @media (min-width: 800px) {} -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Collections

15 |
    16 |
  • 17 |
    18 | Pop Art: This must be the place 19 |
    Pop Art
    20 |
    21 |
    • 22 |
  • 23 |
    24 | Abstract: grey and green squares. 25 |
    Abstract
    26 |
    27 |
    • 28 |
  • 29 |
    30 | Tree on island in lake with purple sunrise. 31 |
    Vivid
    32 |
    33 |
    • 34 |
  • 35 |
    36 | Music: guitar leaning against wall. 37 |
    Music
    38 |
    39 |
    • 40 |
  • 41 |
    42 | Vehicles: 1930's car on street. 43 |
    Vehicles
    44 |
    45 |
    • 46 |
  • 47 |
    48 | Landscape: moonrise over tree-covered mountains. 49 |
    Landscape
    50 |
    51 |
    • 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/end/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Collections

15 |
    16 |
  • 17 |
    18 | Pop Art: This must be the place 19 |
    Pop Art
    20 |
    21 |
    • 22 |
  • 23 |
    24 | Abstract: grey and green squares. 25 |
    Abstract
    26 |
    27 |
    • 28 |
  • 29 |
    30 | Tree on island in lake with purple sunrise. 31 |
    Vivid
    32 |
    33 |
    • 34 |
  • 35 |
    36 | Music: guitar leaning against wall. 37 |
    Music
    38 |
    39 |
    • 40 |
  • 41 |
    42 | Vehicles: 1930's car on street. 43 |
    Vehicles
    44 |
    45 |
    • 46 |
  • 47 |
    48 | Landscape: moonrise over tree-covered mountains. 49 |
    Landscape
    50 |
    51 |
    • 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4a-collections/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4a-collections/tablet.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Collections

15 |
    16 |
  • 17 |
    18 | Pop Art: This must be the place 19 |
    Pop Art
    20 |
    21 |
    • 22 |
  • 23 |
    24 | Abstract: grey and green squares. 25 |
    Abstract
    26 |
    27 |
    • 28 |
  • 29 |
    30 | Tree on island in lake with purple sunrise. 31 |
    Vivid
    32 |
    33 |
    • 34 |
  • 35 |
    36 | Music: guitar leaning against wall. 37 |
    Music
    38 |
    39 |
    • 40 |
  • 41 |
    42 | Vehicles: 1930's car on street. 43 |
    Vehicles
    44 |
    45 |
    • 46 |
  • 47 |
    48 | Landscape: moonrise over tree-covered mountains. 49 |
    Landscape
    50 |
    51 |
    • 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/logo.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end-alt/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/end/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Our Mission

15 |
16 |

17 | Logo for Wall of Wonder. We strive to bring people interesting and unique art that inspires them to be more creative and enjoy their homes. We know art can be expensive, so we work with 18 | a rotating set of artists and photographers to being you fantastic prints - all for free. We just ask that you donate what you think is fair, or share the site with someone who might like great art as much as you do. 19 |

20 |
21 |
22 |
23 |

Collections

24 |
    25 |
  • 26 |
    27 | Pop Art: This must be the place 28 |
    Pop Art
    29 |
    30 |
    • 31 |
  • 32 |
    33 | Abstract: grey and green squares. 34 |
    Abstract
    35 |
    36 |
    • 37 |
  • 38 |
    39 | Tree on island in lake with purple sunrise. 40 |
    Vivid
    41 |
    42 |
    • 43 |
  • 44 |
    45 | Music: guitar leaning against wall. 46 |
    Music
    47 |
    48 |
    • 49 |
  • 50 |
    51 | Vehicles: 1930's car on street. 52 |
    Vehicles
    53 |
    54 |
    • 55 |
  • 56 |
    57 | Landscape: moonrise over tree-covered mountains. 58 |
    Landscape
    59 |
    60 |
    • 61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/logo.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/mission text.txt: -------------------------------------------------------------------------------- 1 | 2 | Text: 3 | 4 | We strive to bring people interesting and unique art that inspires them to be more creative and enjoy their homes. We know art can be expensive, so we work with a rotating set of artists and photographers to being you fantastic prints - all for free. We just ask that you donate what you think is fair, or share the site with someone who might like great art as much as you do. -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/desktop-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/desktop-alt.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/mobile-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/mobile-alt.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/tablet-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/tablet-alt.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4b-mission/screenshots/tablet.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/4-flexbox-exercises/4c-footer/screenshots/tablet.png -------------------------------------------------------------------------------- /day-1-flexbox/4-flexbox-exercises/instructions.txt: -------------------------------------------------------------------------------- 1 | 4-flexbox-exercises 2 | 3 | We'll complete three parts to this exercise, depending on time. 4 | 5 | 4A: Create a collections layout section. 6 | 4B: Create a layout for the mission section. 7 | 4C: Create a footer section. 8 | 9 | 4A-Instructions 10 | 11 | This is the first section of a larger page we'll code over the course of today. 12 | 13 | Refer to desktop.png, tablet.png, and mobile.png for the look we want with this page. 14 | 15 | In the starting "begin" folder, you'll find HTML and CSS to get you started. 16 | 17 | Jen inserted only 6 classes, one per
element, to completely style this document. No additional elements should be necessary to style the page. 18 | 19 | 20 | 21 | 22 | 4B-Instructions 23 | You're given a logo and text for a mission section of the page. Lay this out in some way across the breakpoints. 24 | 25 | I've provided two suggestions -- the suggestion I'll use going forward (using a float and CSS shapes) and an alternative (using Flexbox). There are screenshots for all breakpoints for you to look at. 26 | 27 | SUGGESTION: 28 | 29 | Logo.png is the standard PNG logo file, cropped closely around the logo itself. This is useful if you put the image in one Flexbox cell and the text in another. 30 | 31 | Logo2.png has a wider background. You may want to use this if you'd like to experiment with CSS shapes. For example, make the text follow the diagonal slant of the logo side. 32 | 33 | If you take the approach with CSS shapes, you may need to float the image rather than placing it in its own Flexbox cell. Remember to clear your float! 34 | 35 | 36 | 37 | SUGGESTION FOR SHAPES: 38 | 39 | a. Visit MDN and copy the shape-outside code for a polygon: 40 | https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside 41 | 42 | shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 43 | 44 | 45 | b. Apply that to your image in the CSS and save. 46 | 47 | c. Open the page in Firefox (NOT CHROME) and use the devtools to manipulate the points on the shape to where you want them. 48 | 49 | d. Copy the finalized shape-outside CSS and paste to your CSS document. 50 | 51 | 52 | 53 | 4C-Instructions 54 | Lay out the footer with the markup given. I've given you two SVGs for social media images; feel free to add more if you wish. You may link these to the home pages for the social media sites or to your own pages. 55 | 56 | You may need to modify the HTML slightly to make this layout work. 57 | 58 | I've provided screenshots for how I did this. -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/screenshots/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/screenshots/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/screenshots/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/screenshots/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/5-header-navbar/screenshots/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/5-header-navbar/screenshots/tablet.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | Test hero banner. 20 | 21 | 22 | -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-1084.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-1084.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-1200.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-300.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-583.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-583.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-788.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-788.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/banner demo/banners/banner-958.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/banner demo/banners/banner-958.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/hero-1200.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/hero-300.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/hero-838.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/hero.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/instructions.txt: -------------------------------------------------------------------------------- 1 | 6-responsive-images Instructions 2 | 3 | A. Presentation on responsive images: , srcset, sizes, responsive background images. 4 | 5 | B. Jen will walk through using the website www.responsivebreakpoints.com, which generates a suite of images and srcset/sizes code to use on your page. 6 | 7 | She will also demonstrate the banner demo inside the site. 8 | 9 | REMEMBER: means YOU decide which image displays when. srcset/sizes means the BROWSER decides - and it doesn't always decide what you think it should! 10 | 11 | C. To our page, add a "featured print" and a "hero banner" section of the web page using the starting graphic and the screenshots provided. 12 | 13 | Starting graphics include hero.png and too-cool.jpg. You will need to create additional versions of these images and write the code to include them in the site. 14 | 15 | SUGGESTED: Use for the hero banner and srcset/sizes for the featured print. 16 | 17 | 18 | 19 | Hero image HTML: 20 |
21 | 22 | 23 | 24 | Rainbow hero image banner. 25 | 26 |
27 | 28 | Hero image CSS: 29 | /* hero styles */ 30 | 31 | #hero { 32 | background-color: var(--color7); 33 | text-align: center; 34 | max-width: 100%; 35 | padding: 0; 36 | margin: 0; 37 | } 38 | 39 | #hero img { 40 | max-width: 100%; 41 | max-height: 454px; 42 | } 43 | 44 | 45 | Featured print HTML: 46 | 47 | 61 | 62 | Featured Print CSS: 63 | 64 | /* featured image styles */ 65 | 66 | #featured figure { 67 | max-height: 650px; 68 | } 69 | 70 | #featured img { 71 | object-position: 0; 72 | } -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/responsive images.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/responsive images.pdf -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/screenshots/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/screenshots/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/screenshots/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/screenshots/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/screenshots/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/screenshots/tablet.png -------------------------------------------------------------------------------- /day-1-flexbox/6-responsive-images/too-cool.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/6-responsive-images/too-cool.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/hero-1200.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/hero-300.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/hero-838.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/eyeing-you.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/fork-it-up.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/hero-1200.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/hero-300.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/hero-838.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/lets-scoot.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/logo2.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/music.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/eyeing-you.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/fork-it-up.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/instructions.txt: -------------------------------------------------------------------------------- 1 | 7-wrapup Instructions 2 | 3 | a. Add a "popular prints" section of the web page, just after "our mission". See the screenshots for how this should look. Captions for the photos include: 4 | 5 | - Fork It Up (the fork) 6 | - Eyeing You (the car) 7 | - Let's Scoot (the vespa scooter) 8 | 9 | b. If you have time, clean up the formatting, comments, spacing and alignment, etc, to make it portfolio-worthy! 10 | 11 | 12 | Added HTML: 13 | 14 | 15 |
16 | 39 |
40 | 41 | 42 | Added CSS: 43 | section { 44 | margin: 0 auto 5rem auto; /* added a bit of margin at the bottom of each section */ 45 | 46 | } 47 | figure { 48 | height: 100%; 49 | max-height: 400px; 50 | } 51 | .stripe { 52 | background-color: var(--color2); 53 | color: white; 54 | padding: 1rem 0 2rem 0; 55 | } 56 | @media (min-width: 550px){ 57 | #popular li:last-child { 58 | flex-basis: 100%; 59 | } 60 | #popular li:last-child img { 61 | object-position: 0 -350px; 62 | } 63 | } 64 | @media (min-width: 800px) { 65 | 66 | section li, 67 | .social, 68 | #popular li:last-child { 69 | flex-basis: 32.5%; 70 | } 71 | #popular li:last-child img { 72 | object-position: 0; 73 | } 74 | } 75 | 76 | 77 | 78 | 79 | b. If you have time, build the "detail" page for the Eyeing You poster. You'll be able to reuse several elements from the home page, but you'll need to think through some more layout problems as well. 80 | 81 | Consider how the page will look with Flexbox and maybe some positioning. 82 | 83 | We will re-build the home page and inside page with Grid tomorrow. -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/lets-scoot.jpg -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/screenshots/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/screenshots/desktop.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/screenshots/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/screenshots/mobile.png -------------------------------------------------------------------------------- /day-1-flexbox/7-wrapup/screenshots/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-1-flexbox/7-wrapup/screenshots/tablet.png -------------------------------------------------------------------------------- /day-2-grid/08-grid-intro/Grid Properties.txt: -------------------------------------------------------------------------------- 1 | Grid Properties 2 | 3 | 4 | The best and latest grid properties are listed at: 5 | 6 | https://css-tricks.com/snippets/css/complete-guide-grid/ -------------------------------------------------------------------------------- /day-2-grid/08-grid-intro/day2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/08-grid-intro/day2.pdf -------------------------------------------------------------------------------- /day-2-grid/09-mondrian-painting-demo/instructions.txt: -------------------------------------------------------------------------------- 1 | 9-mondrian-painting-demo Instructions 2 | 3 | Jen will walk through an interactive demo in which you'll reconstruct a painting by Piet Mondrian in CSS Grid. Copy the painting as closely as possible, given what you know about CSS Grid. 4 | 5 | Note: You will not be 100% perfect -- the painting isn't 100% perfect! But you will be very close. 6 | 7 | 9A: Line-based grid layout 8 | Begin: https://codepen.io/jen4web/pen/mdmagoP?editors=1100 9 | End: https://codepen.io/jen4web/pen/vYmvMwN?editors=1100 10 | 11 | 9B: Line-based grid layout with span notation 12 | Begin: https://codepen.io/jen4web/pen/qBmLGqE 13 | End: https://codepen.io/jen4web/pen/VwbqObj?editors=1100 14 | 15 | 16 | Grid will always try to lay out information from the upper left to the lower right (at least in left-to-right systems), with each grid item occupying one row and one column. 17 | 18 | If you want to override that distribution, you must provide directions. 19 | 20 | In example 9A, we have called out the location of each element, row and column. 21 | 22 | In 9B, we reduce the number of declarations, using Grid's tendency to place most of our grid items correctly, and using our declarations to override only what's needed. -------------------------------------------------------------------------------- /day-2-grid/10-grid-grid/instructions.txt: -------------------------------------------------------------------------------- 1 | 10-grid-grid Instructions 2 | 3 | PART 10A: DESKTOP ONLY SYSTEM 4 | 5 | Starting CodePen: 6 | https://codepen.io/jen4web/pen/mdmaZVL 7 | 8 | Finished CodePen: 9 | https://codepen.io/jen4web/pen/gOWZNwd?editors=1100 10 | 11 | Next, we'll create a 4-column grid system. 12 | 13 | Same instructions as before -- the HTML will tell you how many boxes per row. There should be 4 columns, just as we did with Flexbox. 14 | 15 | However, this time, you should not need to mark each row individually. Because this is Grid, you should have enough markup here to set this up without adding extra divs. 16 | 17 | You may need to add some classes to designate how large each box should be. Consider what your default value is - those boxes may not need a class. 18 | 19 | 20 | PART 10B: RESPONSIVE SYSTEM 21 | Now we'll add media queries to make our grid system mobile-first. 22 | 23 | Starting CodePen (continues from the 10A finished state): 24 | https://codepen.io/jen4web/pen/abWPemK?editors=1100 25 | 26 | Finished CodePen: 27 | https://codepen.io/jen4web/pen/WNjLVoG?editors=1100 28 | 29 | 30 | -------------------------------------------------------------------------------- /day-2-grid/11-fig-figcaption/instructions.txt: -------------------------------------------------------------------------------- 1 | 11-fig-figcaption INSTRUCTIONS 2 | 3 | In the Flexbox unit, we used relative and absolute positioning to overlap the captions on the images. 4 | 5 | However, we can also use Grid to do this... and it's much easier. 6 | 7 | Start: 8 | https://codepen.io/jen4web/pen/yLbGmWj?editors=1100 9 | 10 | Finish: 11 | https://codepen.io/jen4web/pen/LYyqPPP?editors=1100 12 | 13 | 14 | BONUS: COMBINING GRID CELLS AND ANIMATION 15 | 16 | https://codepen.io/jen4web/pen/MWmRVbL?editors=1100 17 | 18 | Here we have two figures occupying the same grid cell. 19 | 20 | We can animate the top photo to fade in and out, revealing the photo underneath. 21 | 22 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/css/style.css: -------------------------------------------------------------------------------- 1 | /* colors - see style guide for docs 2 | clearly there is more you could place in variables */ 3 | 4 | :root { 5 | --color1: #001219; 6 | --color2: #005f73; 7 | --color3: #3d9397; 8 | --color4: #94d28d; 9 | --color5: #e9d8a6; 10 | --color6: #ee9800; 11 | --color7: #ca6702; 12 | --color8: #bb3e03; 13 | --color9: #ae2012; 14 | --color10: #9b2226; 15 | } 16 | 17 | html { 18 | box-sizing: border-box; 19 | } 20 | 21 | *, 22 | *::before, 23 | *::after { 24 | box-sizing: inherit; 25 | } 26 | 27 | body { 28 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 29 | background-color: #DBE5DE; 30 | } 31 | 32 | img { 33 | width: 100%; 34 | } 35 | 36 | section { 37 | max-width: 1200px; 38 | margin: 0 auto; 39 | } 40 | 41 | section h2 { 42 | font-size: 3.375rem; 43 | margin-left: 100px; 44 | } 45 | 46 | section ul { 47 | list-style-type: none; 48 | padding: 0; 49 | margin: 0; 50 | } 51 | 52 | 53 | /* figure and figure caption styling */ 54 | 55 | figure { 56 | padding: 0; 57 | margin: 0; 58 | border: 5px solid var(--color8); 59 | border-radius: 5px; 60 | } 61 | 62 | figcaption { 63 | background-color: rgba(255, 255, 255, 0.8); 64 | font-size: 1.875rem; 65 | width: 100%; 66 | margin: 0; 67 | padding: 0; 68 | } 69 | 70 | figcaption a { 71 | display: block; 72 | padding: 1rem; 73 | text-decoration: none; 74 | color: var(--color1); 75 | } 76 | 77 | figcaption a:hover { 78 | color: var(--color8); 79 | } 80 | 81 | @media (min-width: 550px) {} 82 | 83 | @media (min-width: 800px) {} -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/1-place.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/1-place.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/2-lippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/2-lippy.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/3-skull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/3-skull.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/4-yell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/4-yell.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/5-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/5-fork.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/6-drip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/6-drip.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/7-invade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/7-invade.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/8-school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/8-school.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/img/9-doors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/begin/img/9-doors.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Pop Art

15 | 71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/css/style.css: -------------------------------------------------------------------------------- 1 | /* colors - see style guide for docs 2 | clearly there is more you could place in variables */ 3 | 4 | :root { 5 | --color1: #001219; 6 | --color2: #005f73; 7 | --color3: #3d9397; 8 | --color4: #94d28d; 9 | --color5: #e9d8a6; 10 | --color6: #ee9800; 11 | --color7: #ca6702; 12 | --color8: #bb3e03; 13 | --color9: #ae2012; 14 | --color10: #9b2226; 15 | } 16 | 17 | html { 18 | box-sizing: border-box; 19 | } 20 | 21 | *, 22 | *::before, 23 | *::after { 24 | box-sizing: inherit; 25 | } 26 | 27 | body { 28 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 29 | background-color: #DBE5DE; 30 | } 31 | 32 | img { 33 | width: 100%; 34 | } 35 | 36 | section { 37 | max-width: 1200px; 38 | margin: 0 auto; 39 | } 40 | 41 | section h2 { 42 | font-size: 3.375rem; 43 | margin-left: 100px; 44 | } 45 | 46 | section ul { 47 | list-style-type: none; 48 | padding: 0; 49 | margin: 0; 50 | } 51 | 52 | 53 | /* figure and figcaption styling */ 54 | 55 | 56 | /* display grid here is to get the caption on top of the image */ 57 | 58 | figure { 59 | margin: 0 0 0.5rem 0; 60 | padding: 0; 61 | border: 5px solid var(--color8); 62 | border-radius: 5px; 63 | display: grid; 64 | grid-template-columns: 1fr; 65 | grid-template-rows: repeat(3, auto); 66 | } 67 | 68 | figure img { 69 | grid-row: 1/3; 70 | grid-column: 1/2; 71 | height: 100%; 72 | /* makes sure the image fills the figure - without this, most have a bit of empty space at the bottom */ 73 | } 74 | 75 | figcaption { 76 | background-color: rgba(255, 255, 255, 0.8); 77 | font-size: 1.875rem; 78 | width: 100%; 79 | margin: 0; 80 | padding: 0; 81 | grid-column: 1/2; 82 | grid-row: 2/3; 83 | } 84 | 85 | figcaption a { 86 | display: block; 87 | padding: 1rem; 88 | text-decoration: none; 89 | color: var(--color1); 90 | } 91 | 92 | figcaption a:hover { 93 | color: var(--color8); 94 | } 95 | 96 | 97 | /* Looks good until 550-ish, so there is only one breakpoint */ 98 | 99 | @media (min-width: 550px) { 100 | #popart ul { 101 | display: grid; 102 | grid-template-columns: repeat(3, 1fr); 103 | gap: 10px; 104 | } 105 | .colspan2 { 106 | grid-column: span 2; 107 | } 108 | .colspan3 { 109 | grid-column: span 3; 110 | } 111 | .rowspan2 { 112 | grid-row: span 2; 113 | } 114 | /* for some reason, the figures don't always fill their LI container. This keeps them evenly sized */ 115 | figure { 116 | height: 100%; 117 | } 118 | } -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/1-place.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/1-place.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/2-lippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/2-lippy.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/3-skull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/3-skull.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/4-yell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/4-yell.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/5-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/5-fork.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/6-drip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/6-drip.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/7-invade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/7-invade.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/8-school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/8-school.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/img/9-doors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/end/img/9-doors.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/end/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Collections 9 | 10 | 11 | 12 | 13 |
14 |

Pop Art

15 | 71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/grid layout mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/grid layout mobile.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12a mosaic grid/grid layout-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12a mosaic grid/grid layout-desktop.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/eyeing-you.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/fork-it-up.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/hero-1200.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/hero-300.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/hero-838.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/lets-scoot.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/logo2.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/music.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/desktop.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/1-place.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/1-place.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/2-lippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/2-lippy.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/3-skull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/3-skull.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/4-yell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/4-yell.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/5-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/5-fork.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/6-drip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/6-drip.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/7-invade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/7-invade.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/8-school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/8-school.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/9-doors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/9-doors.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/eyeing-you.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/fork-it-up.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/hero-1200.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/hero-300.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/hero-838.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/lets-scoot.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/logo2.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/music.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/mobile.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/12b home page/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/12-challenge layout/12b home page/tablet.png -------------------------------------------------------------------------------- /day-2-grid/12-challenge layout/instructions.txt: -------------------------------------------------------------------------------- 1 | 12-challenge layout INSTRUCTIONS 2 | 3 | There are two challenges to tackle, depending on your time. 4 | 5 | 6 | 7 | 12A - MOSAIC GRID LAYOUT 8 | 9 | In the begin folder, you're given some starting HTML and CSS. 10 | 11 | Using CSS Grid, lay out the page as you see in the screenshots for desktop and mobile dimensions. 12 | 13 | HINTS: 14 | - You may want to steal some styling from the Flexbox layouts we did yesterday with similar content. 15 | 16 | - You may want to consider looking at some of the other work we've done today and apply it to this problem. 17 | 18 | - Start with the number of rows and columns needed, then worry about how to fit the images into those spaces. 19 | 20 | 21 | 22 | 23 | 24 | 12B - INTEGRATE INTO THE HOME PAGE 25 | 26 | I've given you yesterday's final end state of our Flexbox work. 27 | 28 | Now try swapping out the "collections" section at the bottom of the home page for the "pop art" mosaic you just created with Grid. -------------------------------------------------------------------------------- /day-2-grid/13-magazine/instructions.txt: -------------------------------------------------------------------------------- 1 | 13-magazine Instructions 2 | 3 | "MAGAZINE" LAYOUTS 4 | At this point, we've replicated what we can do with Flexbox. Now we can push our Grid layouts a little further with grid area notation and getting creative with our boxes in two dimensions. 5 | 6 | Starting CodePen (now with kittens!): 7 | https://codepen.io/jen4web/pen/MWmxYNQ 8 | 9 | Finished CodePen: 10 | https://codepen.io/jen4web/pen/gOWEPmN?editors=1100 11 | 12 | Demonstrates: 13 | .wrapper { 14 | grid-template-columns: repeat(4, minmax(200px, 1fr)); 15 | grid-template-columns: repeat(4, minmax(min-content, max-content)); 16 | } 17 | .featured { 18 | grid-row: span 2; 19 | grid-column: span 2; 20 | } 21 | 22 | .featured { 23 | grid-row: 1/ span 2; 24 | grid-column: 1/ span 2; 25 | } 26 | 27 | 28 | AND 29 | 30 | .wrapper { 31 | grid-template-areas: 32 | "featured featured featured featured" 33 | " ... ... main main"; 34 | } 35 | .featured { 36 | grid-area: featured; 37 | /* on kitten 7 */ 38 | } 39 | .main { 40 | grid-area: main; 41 | /* on kitten 10 */ 42 | } 43 | .middle { 44 | grid-row: span 2; 45 | grid-column: span 2; 46 | /* on kitten 4 */ 47 | } 48 | 49 | 50 | -------------------------------------------------------------------------------- /day-2-grid/14-cards/instructions.txt: -------------------------------------------------------------------------------- 1 | 14-cards Instructions 2 | 3 | CARD LAYOUTS 4 | Like navbars, cards are everywhere on the web. They're also a compact and useful piece of content that contains all kinds of interesting styling challenges. 5 | 6 | Here we'll work on styling a suite of 4 cards in CodePen, with an eye to applying it to our larger website shortly. 7 | 8 | Starting CodePen: 9 | https://codepen.io/jen4web/pen/oNWVZjd 10 | 11 | 12 | Finished CodePen: 13 | https://codepen.io/jen4web/pen/abWMJZV?editors=1100 -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/1-place.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/1-place.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/2-lippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/2-lippy.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/3-skull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/3-skull.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/4-yell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/4-yell.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/5-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/5-fork.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/6-drip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/6-drip.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/7-invade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/7-invade.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/8-school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/8-school.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/9-doors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/9-doors.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/abstract.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/eyeing-you.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/fork-it-up.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/hero-1200.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/hero-300.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/hero-838.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/landscape.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/lets-scoot.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/logo2.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/music.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/pop-art.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/vehicles.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/begin/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/begin/img/vivid.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/desktop.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/1-place.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/1-place.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/2-lippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/2-lippy.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/3-skull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/3-skull.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/4-yell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/4-yell.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/5-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/5-fork.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/6-drip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/6-drip.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/7-invade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/7-invade.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/8-school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/8-school.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/9-doors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/9-doors.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/abstract.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/donut1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/donut1.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/donut2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/donut2.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/donut3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/donut3.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/donut4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/donut4.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/donut5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/donut5.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/eyeing-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/eyeing-you.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/fork-it-up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/fork-it-up.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/hero-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/hero-1200.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/hero-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/hero-300.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/hero-838.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/hero-838.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/landscape.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/lets-scoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/lets-scoot.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/logo2.png -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/music.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/pop-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/pop-art.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/too-cool-1058.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/too-cool-1058.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/too-cool-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/too-cool-1200.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/too-cool-300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/too-cool-300.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/too-cool-740.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/too-cool-740.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/vehicles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/vehicles.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/end/img/vivid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/end/img/vivid.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/instructions.txt: -------------------------------------------------------------------------------- 1 | 15-final project INSTRUCTIONS 2 | 3 | Now that you have a sense of how Flexbox and Grid work, build an inside page for this website. 4 | 5 | We've pulled some photos from Pexels from Sharon McCutcheon. 6 | 7 | Build an inside page that would match the home page for this website, based on the photos and text we've given you. 8 | 9 | a. We've given you the most recent version of the Flexbox/Grid web page we've built over the workshop. You may have elements from here that you want to reuse. 10 | 11 | b. Consider how you might lay out the photos and artist information in an attractive way. I've given you some screenshots of my answers, but you're welcome to try something different. 12 | 13 | c. If you don't like the images I gave you, or if you want more or different photos, visit Sharon's page at Pexels to download different or additional photos: https://www.pexels.com/@mccutcheon 14 | 15 | d. Sketch a quick drawing of what the page might look like before you start coding. Pencil and paper are fine - there's no need to make a Figma drawing unless you really want to! 16 | 17 | TECHNICAL CONSIDERATIONS: 18 | 19 | - Do you need responsive images? Do you need to resize these images in some way? 20 | 21 | - Where should you use Grid and where should you use Flexbox? (Should you use one or the other?) See if you can state why you make your choice, beyond "I like Flexbox better" or "Grid is for layouts." 22 | 23 | - What elements will you recycle from the original design, if any? -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-1191639.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-1191639.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-1407346.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-1407346.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3779937.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3779937.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3779945.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3779945.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3784440.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/raw materials/pexels-sharon-mccutcheon-3784440.jpg -------------------------------------------------------------------------------- /day-2-grid/15-final-project/raw materials/text.txt: -------------------------------------------------------------------------------- 1 | Sharon McCutcheon Photos from Pexels.com 2 | 3 | Profile: 4 | Pexels: https://www.pexels.com/@mccutcheon 5 | Unsplash: https://unsplash.com/@sharonmccutcheon 6 | EyeEm: https://www.eyeem.com/u/mccutcheon 7 | 8 | 9 | Photos: 10 | https://www.pexels.com/photo/brown-and-pink-doughnut-with-sprinkles-3779937/ 11 | 12 | https://www.pexels.com/photo/doughnut-topped-with-colorful-sprinkles-3779945/ 13 | 14 | https://www.pexels.com/photo/pink-doughnut-with-colorful-sprinkles-3784440/ 15 | 16 | https://www.pexels.com/photo/closeup-photo-of-doughnuts-1191639/ 17 | 18 | https://www.pexels.com/photo/pile-of-doughnuts-1407346/ 19 | 20 | Text: 21 | Sharon McCutcheon specializes in LGBTQIA+ themes, stock photos, macro images, backgrounds, and colorful visuals. She currently works as a stock photographer for Pexels and Unsplash and sells additional photos at EyeEm. -------------------------------------------------------------------------------- /day-2-grid/15-final-project/tablet-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/day-2-grid/15-final-project/tablet-mobile.png -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: "CSS Grid and Flexbox, v2", 4 | subtitle: "For Responsive CSS Layouts", 5 | author: "Jen Kramer", 6 | authorSubtitle: "Freelance Instructor", 7 | authorImage: "author.jpg", // this image should go in /static 8 | courseImage: "courseImage.jpg", // this also should go in /static 9 | twitter: "https://twitter.com/jen4web", // make empty string to omit socials 10 | linkedin: "https://www.linkedin.com/in/jen4web/", 11 | github: "https://github.com/jen4web", 12 | description: 13 | "Learn how to do realtime communcation on the web with your teacher Brian Holt", 14 | keywords: [ 15 | "grid", 16 | "css grid", 17 | "flexbox", 18 | "css" 19 | ], 20 | }, 21 | pathPrefix: "/grid-flexbox-v2", // if you're using GitHub Pages, put the name of the repo here with a leading slash 22 | plugins: [ 23 | { 24 | resolve: "gatsby-plugin-react-svg", 25 | options: { 26 | rule: { 27 | include: /src/, 28 | }, 29 | }, 30 | }, 31 | `gatsby-plugin-sharp`, 32 | `gatsby-plugin-layout`, 33 | { 34 | resolve: `gatsby-source-filesystem`, 35 | options: { 36 | path: `${__dirname}/lessons`, 37 | name: "markdown-pages", 38 | }, 39 | }, 40 | `gatsby-plugin-react-helmet`, 41 | { 42 | resolve: `gatsby-transformer-remark`, 43 | options: { 44 | plugins: [ 45 | `gatsby-remark-autolink-headers`, 46 | `gatsby-remark-copy-linked-files`, 47 | `gatsby-remark-prismjs`, 48 | { 49 | resolve: `gatsby-remark-images`, 50 | options: { 51 | maxWidth: 800, 52 | linkImagesToOriginal: true, 53 | sizeByPixelDensity: false, 54 | }, 55 | }, 56 | ], 57 | }, 58 | }, 59 | ], 60 | }; 61 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | exports.createPages = ({ actions, graphql }) => { 4 | const { createPage } = actions; 5 | 6 | const lessonTemplate = path.resolve(`src/templates/lessonTemplate.js`); 7 | 8 | return graphql(` 9 | { 10 | allMarkdownRemark( 11 | sort: { order: DESC, fields: [frontmatter___order] } 12 | limit: 1000 13 | ) { 14 | edges { 15 | node { 16 | excerpt(pruneLength: 250) 17 | html 18 | id 19 | frontmatter { 20 | order 21 | path 22 | title 23 | } 24 | } 25 | } 26 | } 27 | } 28 | `).then(result => { 29 | if (result.errors) { 30 | return Promise.reject(result.errors); 31 | } 32 | 33 | result.data.allMarkdownRemark.edges.forEach(({ node }) => { 34 | createPage({ 35 | path: node.frontmatter.path, 36 | component: lessonTemplate 37 | }); 38 | }); 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /lessons/card-layouts.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/card-layouts" 3 | title: "Card Layouts" 4 | order: "2G" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | Like navbars, cards are everywhere on the web. They're also a compact and useful piece of content that contains all kinds of interesting styling challenges. 11 | 12 | Here we'll work on styling a suite of 4 cards in CodePen, with an eye to applying it to our larger website shortly. 13 | 14 | [Starting CodePen](https://codepen.io/jen4web/pen/oNWVZjd) 15 | 16 | [Finished CodePen](https://codepen.io/jen4web/pen/abWMJZV?editors=1100) 17 | 18 | -------------------------------------------------------------------------------- /lessons/css-grid-exercises.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/css-grid-exercises" 3 | title: "CSS Grid Exercises" 4 | order: "2E" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | There are two challenges to tackle, depending on your time. 11 | 12 | ### Part 12A - Mosaic grid layout 13 | 14 | In the begin folder, you're given some starting HTML and CSS. 15 | 16 | Using CSS Grid, lay out the page as you see in the screenshots for desktop and mobile dimensions. 17 | 18 | **Hints:** 19 | 20 | - You may want to steal some styling from the Flexbox layouts we did yesterday with similar content. 21 | 22 | - You may want to look at some of the work we did earlier and apply it to this problem. 23 | 24 | - Start with the number of rows and columns needed, then worry about how to fit the images into those spaces. 25 | 26 | ### Part 12B - Integrate mosaic in home page 27 | 28 | I've given you yesterday's final end state of our Flexbox work. 29 | 30 | Now try swapping out the "collections" section at the bottom of the home page for the "pop art" mosaic you just created with Grid. 31 | 32 | -------------------------------------------------------------------------------- /lessons/css-grid-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/css-grid-intro" 3 | title: "Introducing CSS Grid" 4 | order: "2A" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | Jen will give a [quick overview of Grid](https://github.com/FrontendMasters/fem-layout-2/blob/main/day-2-grid/08-grid-intro/day2.pdf), including history, browser support, and syntax. 11 | 12 | The best reference source for Grid is at [CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/). 13 | 14 | -------------------------------------------------------------------------------- /lessons/final-project.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/final-project" 3 | title: "Final Project" 4 | order: "2H" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | Now that you have a sense of how Flexbox and Grid work, build an inside page for this website. 11 | 12 | We've pulled some photos from Pexels from Sharon McCutcheon. 13 | 14 | Build an inside page that would match the home page for this website, based on the photos and text we've given you. 15 | 16 | - We've given you the most recent version of the Flexbox/Grid web page we've built over the workshop. You may have elements from here that you want to reuse. 17 | 18 | - Consider how you might lay out the photos and artist information in an attractive way. I've given you some screenshots of my answers, but you're welcome to try something different. 19 | 20 | - If you don't like the images I gave you, or if you want more or different photos, [visit Sharon's page at Pexels](https://www.pexels.com/@mccutcheon) to download different or additional photos. 21 | 22 | - Sketch a quick drawing of what the page might look like before you start coding. Pencil and paper are fine - there's no need to make a Figma drawing unless you really want to! 23 | 24 | ### Technical considerations 25 | 26 | - Do you need responsive images? Do you need to resize these images in some way? 27 | 28 | - Where should you use Grid and where should you use Flexbox? (Should you use one or the other?) See if you can state why you make your choice, beyond "I like Flexbox better" or "Grid is for layouts." 29 | 30 | - What elements will you recycle from the original design, if any? 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /lessons/flexbox-exercises.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/flexbox-exercises" 3 | title: "Flexbox Exercises" 4 | order: "1D" 5 | section: "Flexbox" 6 | description: "" 7 | icon: "grip-lines" 8 | --- 9 | 10 | We'll complete three parts to this exercise, depending on time. 11 | 12 | ### Part 4A: Collections 13 | 14 | This is the first section of a larger page we'll code over the course of today. 15 | 16 | Refer to desktop.png, tablet.png, and mobile.png for the look we want with this page. 17 | 18 | In the starting "begin" folder, you'll find HTML and CSS to get you started. 19 | 20 | Jen inserted only 6 classes, one per `
` element, to completely style this document. No additional classes should be necessary to style the page. (Practice your selectors!) 21 | 22 | ### Part 4B: Mission 23 | 24 | You're given a logo and text for a mission section of the page. Lay this out in some way across the breakpoints. 25 | 26 | I've provided two suggestions -- the suggestion I'll use going forward (using a float and CSS shapes) and an alternative (using Flexbox). There are screenshots for all breakpoints for you to look at. 27 | 28 | #### Suggested approach 29 | 30 | Logo.png is the standard PNG logo file, cropped closely around the logo itself. This is useful if you put the image in one Flexbox cell and the text in another, which is my alternative approach. 31 | 32 | Logo2.png has a wider background. You may want to use this if you'd like to experiment with CSS shapes. For example, make the text follow the diagonal slant of the logo side. 33 | 34 | If you take the approach with CSS shapes, you will need to float the image rather than placing it in its own Flexbox cell. **Remember to clear your float!** 35 | 36 | #### Shape suggestion 37 | 38 | a. [Visit MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside) and copy the `shape-outside` code for a polygon: 39 | 40 | `shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);` 41 | 42 | b. Apply that to your image in the CSS and save. 43 | 44 | c. Open the page in **Firefox** (NOT CHROME) and use the devtools to manipulate the points on the shape to where you want them. (This feature is not available in Chrome.) 45 | 46 | d. Copy the finalized `shape-outside` CSS declaration and paste to your CSS document. 47 | 48 | ### Part 4C: Footer 49 | 50 | Lay out the footer with the markup given. I've given you two SVGs for social media images; feel free to add more if you wish. You may link these to the home pages for the social media sites or to your own pages. 51 | 52 | You may need to modify the HTML slightly to make this layout work. 53 | 54 | I've provided screenshots for how I did this. 55 | 56 | -------------------------------------------------------------------------------- /lessons/flexbox-figure-figcaption.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/flexbox-figure-figcaption" 3 | title: "Figure Caption & Figure Caption with Flexbox" 4 | order: "1C" 5 | section: "Flexbox" 6 | description: "" 7 | icon: "grip-lines" 8 | --- 9 | 10 | ### Chapter 3: `figure` and `figcaption` 11 | 12 | [Starting CodePen](https://codepen.io/jen4web/pen/BaRVYRN?editors=1100) 13 | 14 | [Ending CodePen](https://codepen.io/jen4web/pen/ExmRQvL?editors=1100) 15 | 16 | Flexbox may be applied to as many elements in the document as you wish. Remember to always manage parents (flex containers) and children (flex items) appropriately. 17 | 18 | In this case, if we declare `display: flex` on the figure, then the caption may be placed next to the image (row) or underneath it (column) very easily. 19 | 20 | Use relative and absolute positioning to move the caption onto the image. Change the color to include some transparency, or use the opacity property to manipulate the transparency. 21 | 22 | Changed CSS: 23 | 24 | 
25 | figure {
26 |   display: flex;
27 |   flex-flow: column nowrap;
28 |   position: relative;
29 | }
30 | figcaption {
31 |   position: absolute;
32 |   bottom: 0%;
33 |   width: 100%;
34 |   opacity: 0.7;
35 | }
36 |
37 | -------------------------------------------------------------------------------- /lessons/flexbox-wrapup.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/flexbox-wrapup" 3 | title: "Flexbox Wrapup" 4 | order: "1G" 5 | section: "Flexbox" 6 | description: "" 7 | icon: "grip-lines" 8 | --- 9 | 10 | a. Add a "popular prints" section of the web page, just after "our mission". See the screenshots for how this should look. Captions for the photos include: 11 | 12 | - Fork It Up (the fork) 13 | - Eyeing You (the car) 14 | - Let's Scoot (the vespa scooter) 15 | 16 | b. If you have time, clean up the formatting, comments, spacing and alignment, etc, to make it portfolio-worthy! 17 | -------------------------------------------------------------------------------- /lessons/grid-figure-figcaption.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/grid-figure-figcaption" 3 | title: "Figure Caption & Figure Caption with CSS Grid" 4 | order: "2D" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | ## Chapter 11: `
` and `
` with Grid 11 | 12 | In the Flexbox unit, we used relative and absolute positioning to overlap the captions on the images. 13 | 14 | However, we can also use Grid to do this... and it's much easier. 15 | 16 | [Starting CodePen](https://codepen.io/jen4web/pen/yLbGmWj?editors=1100) 17 | 18 | [Finished CodePen](https://codepen.io/jen4web/pen/LYyqPPP?editors=1100) 19 | 20 | ### Bonus: Combining Grid Cells and Animation 21 | 22 | [View the CodePen](https://codepen.io/jen4web/pen/MWmRVbL?editors=1100) 23 | 24 | Here we have two figures occupying the same grid cell. 25 | 26 | We can animate the top photo to fade in and out, revealing the photo underneath. 27 | 28 | What else could you do with overlapping CSS grid cells? 29 | 30 | -------------------------------------------------------------------------------- /lessons/grid-mondrian-exercise.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/grid-mondrian-exercise" 3 | title: "Mondrian Painting Exercise" 4 | order: "2B" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | Jen will walk through an interactive demo in which you'll reconstruct a painting by Piet Mondrian in CSS Grid. Copy the painting as closely as possible, given what you know about CSS Grid. 11 | 12 | Note: You will not be 100% perfect -- the painting isn't 100% perfect! But you will be very close. 13 | 14 | **9A: Line-based grid layout** 15 | 16 | [Starting CodePen](https://codepen.io/jen4web/pen/mdmagoP?editors=1100) 17 | 18 | [Finished CodePen](https://codepen.io/jen4web/pen/vYmvMwN?editors=1100) 19 | 20 | **9B: Line-based grid layout with span notation** 21 | 22 | [Starting CodePen](https://codepen.io/jen4web/pen/qBmLGqE) 23 | 24 | [Finished CodePen](https://codepen.io/jen4web/pen/VwbqObj?editors=1100) 25 | 26 | Grid will always try to lay out information from the upper left to the lower right (at least in left-to-right systems), with each grid item occupying one row and one column. 27 | 28 | If you want to override that distribution, you must provide directions. 29 | 30 | In example 9A, we have called out the location of each element, row and column. 31 | 32 | In 9B, we reduce the number of declarations, using Grid's tendency to place most of our grid items correctly, and using our declarations to override only what's needed. 33 | 34 | -------------------------------------------------------------------------------- /lessons/grid-system-css-grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/grid-system-css-grid" 3 | title: "Grid System with CSS Grid" 4 | order: "2C" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | ### Part 10A: Desktop-only system 11 | 12 | [Starting CodePen](https://codepen.io/jen4web/pen/mdmaZVL) 13 | 14 | [Finished CodePen](https://codepen.io/jen4web/pen/gOWZNwd?editors=1100) 15 | 16 | We'll create the same 4-column grid system that we did with Flexbox, using the same instructions as before -- the HTML comments will tell you how many boxes per row, with a total of 4 columns. 17 | 18 | However, this time, you should not need to mark each row individually. Because this is Grid, you should have enough markup here to set this up without adding extra divs. 19 | 20 | You may need to add some classes to designate how large each box should be. Consider what your default value is - those boxes may not need a class. 21 | 22 | ### Part 10B: Mobile-first responsive system 23 | 24 | Now we'll add media queries to make our grid system mobile-first. 25 | 26 | [Starting CodePen (continues from the 10A finished state)](https://codepen.io/jen4web/pen/abWPemK?editors=1100) 27 | 28 | [Finished CodePen](https://codepen.io/jen4web/pen/WNjLVoG?editors=1100) 29 | 30 | -------------------------------------------------------------------------------- /lessons/header-navbar.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/header-navbar" 3 | title: "Flexbox Header and Navbar" 4 | order: "1E" 5 | section: "Flexbox" 6 | description: "" 7 | icon: "grip-lines" 8 | --- 9 | 10 | Let's move on to laying out the header of the web page. We can do this with one navigation bar that includes the logo. By using Flexbox to lay out the navbar, we can then move the logo around wherever we want it -- far left and inline with the navbar, in the center of the navigation, or on its own line, separate from the rest of the navigation. 11 | 12 | -------------------------------------------------------------------------------- /lessons/magazine-layouts.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/magazine-layouts" 3 | title: "Magazine Layouts" 4 | order: "2F" 5 | section: "CSS Grid" 6 | description: "" 7 | icon: "th" 8 | --- 9 | 10 | At this point, we've replicated what we can do with Flexbox. Now we can push our Grid layouts a little further with grid area notation and getting creative with our boxes in two dimensions. 11 | 12 | [Starting CodePen (now with kittens!)](https://codepen.io/jen4web/pen/MWmxYNQ) 13 | 14 | [Finished CodePen](https://codepen.io/jen4web/pen/gOWEPmN?editors=1100) 15 | 16 | -------------------------------------------------------------------------------- /lessons/responsive-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: "/responsive-images" 3 | title: "Responsive Images" 4 | order: "1F" 5 | section: "Flexbox" 6 | description: "" 7 | icon: "grip-lines" 8 | --- 9 | 10 | A. [Presentation on responsive images](https://github.com/FrontendMasters/fem-layout-2/blob/main/day-1-flexbox/6-responsive-images/responsive%20images.pdf): ``, `srcset`, `sizes`, responsive background images. 11 | 12 | B. Jen will demonstrate [ResponsiveBreakpoints.com](https://www.responsivebreakpoints.com), which generates a suite of images and `srcset`/`sizes` code to use on your page. 13 | 14 | She will also demonstrate the banner demo inside the site. 15 | 16 | **REMEMBER**: `` means YOU decide which image displays when. `srcset`/`sizes` means the BROWSER decides - and it doesn't always decide what you think it should! 17 | 18 | C. To our page, add a "featured print" and a "hero banner" section of the web page using the starting graphic and the screenshots provided. 19 | 20 | Starting graphics include `hero.png` and `too-cool.jpg`. You will need to create additional versions of these images and write the code to include them in the site. 21 | 22 | **SUGGESTED**: Use `` for the hero banner and `srcset`/`sizes` for the featured print. 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-course-starter", 3 | "description": "a gatsby seed project to get your education site started", 4 | "version": "1.0.0", 5 | "author": "Jen Kramer ", 6 | "dependencies": { 7 | "@fontsource/open-sans": "^4.5.0", 8 | "@fortawesome/fontawesome-free": "^5.15.3", 9 | "bootstrap": "^5.0.2", 10 | "front-matter": "^4.0.2", 11 | "gatsby": "^3.9.1", 12 | "gatsby-cli": "^3.9.0", 13 | "gatsby-link": "^3.9.0", 14 | "gatsby-plugin-layout": "^2.9.0", 15 | "gatsby-plugin-react-helmet": "^4.9.0", 16 | "gatsby-plugin-react-svg": "^3.0.1", 17 | "gatsby-plugin-sharp": "^3.9.0", 18 | "gatsby-remark-autolink-headers": "^4.6.0", 19 | "gatsby-remark-copy-linked-files": "^4.6.0", 20 | "gatsby-remark-images": "^5.6.0", 21 | "gatsby-remark-prismjs": "^5.6.0", 22 | "gatsby-source-filesystem": "^3.9.0", 23 | "gatsby-transformer-remark": "^4.6.0", 24 | "is-url-superb": "^5.0.0", 25 | "parse-markdown-links": "^1.0.4", 26 | "prismjs": "^1.24.1", 27 | "react": "^17.0.2", 28 | "react-dom": "^17.0.2", 29 | "react-helmet": "^6.1.0" 30 | }, 31 | "keywords": [ 32 | "gatsby", 33 | "gatsby-starter", 34 | "course", 35 | "education" 36 | ], 37 | "license": "(CC-BY-NC-4.0 OR Apache-2.0)", 38 | "main": "n/a", 39 | "scripts": { 40 | "build": "gatsby build --prefix-paths", 41 | "csv": "node csv.js", 42 | "dev": "gatsby develop", 43 | "format": "prettier --write \"src/**/*.{js,jsx,md,css}\"", 44 | "lint": "eslint \"src/**/*.{js,jsx}\"" 45 | }, 46 | "devDependencies": { 47 | "@babel/polyfill": "^7.12.1", 48 | "babel-eslint": "^10.1.0", 49 | "core-js": "^3.15.2", 50 | "eslint": "^7.31.0", 51 | "eslint-config-prettier": "^8.3.0", 52 | "eslint-plugin-import": "^2.23.4", 53 | "eslint-plugin-jsx-a11y": "^6.4.1", 54 | "eslint-plugin-react": "^7.24.0", 55 | "prettier": "^2.3.2" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /resources/Style Guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/resources/Style Guide.png -------------------------------------------------------------------------------- /resources/Wall of Wonder Artist List.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/resources/Wall of Wonder Artist List.pdf -------------------------------------------------------------------------------- /src/components/TOCCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "gatsby-link"; 3 | import Bg from "../layouts/corner-image.svg"; 4 | import * as helpers from "../util/helpers"; 5 | 6 | const sortFn = helpers.sorter; 7 | 8 | const LessonCard = ({ content, title }) => { 9 | console.log(sortFn); 10 | 11 | const sections = content 12 | .map((lesson) => lesson.node.frontmatter) 13 | .sort(sortFn) 14 | .reduce((acc, lesson) => { 15 | if (!acc.length) { 16 | acc.push([lesson]); 17 | return acc; 18 | } 19 | 20 | const lastSection = acc[acc.length - 1][0].section.split(",")[0]; 21 | if (lastSection === lesson.section.split(",")[0]) { 22 | acc[acc.length - 1].push(lesson); 23 | } else { 24 | acc.push([lesson]); 25 | } 26 | 27 | return acc; 28 | }, []); 29 | 30 | let lessonCount = 1; 31 | 32 | return ( 33 |
34 |

{title}

35 |
36 |
    37 | {sections.map((section) => ( 38 |
  1. 39 |
    40 |
    41 | 46 |
    47 |
    48 |

    {section[0].section}

    49 |
      50 | {section.map((lesson) => { 51 | lessonCount++; 52 | return ( 53 |
    1. 54 | {lesson.title} 55 |
      2. 56 | ) 57 | })} 58 |
    59 |
    60 |
    61 | 62 |
    63 |
    64 |
    2. 65 | ))} 66 |
67 |
68 |
69 | ); 70 | }; 71 | 72 | export default LessonCard; 73 | -------------------------------------------------------------------------------- /src/layouts/Footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | padding: 50px 15px; 4 | background-color: var(--primary); 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | color: var(--text-footer); 9 | } 10 | 11 | .socials { 12 | display: flex; 13 | align-items: center; 14 | max-width: 900px; 15 | width: 100%; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .social { 21 | display: inline-block; 22 | list-style: none; 23 | margin-right: 40px; 24 | } 25 | 26 | .social img:hover { 27 | opacity: 0.4; 28 | } 29 | 30 | .social img { 31 | transition: opacity 0.25s; 32 | width: 30px; 33 | } 34 | 35 | .terms { 36 | font-size: 10px; 37 | } 38 | 39 | .terms p { 40 | margin: 3px; 41 | } 42 | 43 | .footer a { 44 | color: inherit; 45 | text-decoration: underline; 46 | } 47 | 48 | .social svg { 49 | transition: opacity 0.25s; 50 | } 51 | 52 | .social svg:hover { 53 | opacity: 0.4; 54 | } 55 | -------------------------------------------------------------------------------- /src/layouts/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { graphql, StaticQuery } from "gatsby"; 3 | import Gh from "./github-social.svg"; 4 | import Tw from "./twitter-social.svg"; 5 | import Li from "./linkedin-social.svg"; 6 | 7 | import "./Footer.css"; 8 | 9 | export default function Footer({ twitter, linkedin, github }) { 10 | return ( 11 |
12 |
    13 | {twitter ? ( 14 |
  • 15 | 16 | 17 | 18 |
    • 19 | ) : null} 20 | {linkedin ? ( 21 |
  • 22 | 23 |
  • 24 | 25 |
    • 26 | ) : null} 27 | {github ? ( 28 |
  • 29 | 30 | 31 | 32 |
    • 33 | ) : null} 34 |
  • 35 |
    36 |

    Content Licensed Under CC-BY-NC-4.0

    37 |

    Code Samples and Excercise Licensed Under Apache 2.0

    38 |

    39 | Site Designed by{" "} 40 | Alex Danielson 41 |

    42 |
    43 |
    • 44 |
45 |
46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/layouts/corner-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/layouts/github-social.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/layouts/linkedin-social.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/layouts/twitter-social.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/layouts/variables.css: -------------------------------------------------------------------------------- 1 | /* 2 | change your syntax highlighting theme here 3 | https://github.com/PrismJS/prism/tree/master/themes 4 | */ 5 | @import "prismjs/themes/prism-solarizedlight.css"; 6 | 7 | :root { 8 | --primary: #d8816d; 9 | --secondary: #fee562; 10 | --highlight: #0b151e; 11 | 12 | --text-header: var(--primary); 13 | --text-main-headers: var(--highlight); 14 | --text-links: #ac5e4c; 15 | --text-footer: #ac5e4c; 16 | 17 | --bg-main: white; 18 | --bg-dots: var(--primary); 19 | --bg-lesson: white; 20 | --bg-lesson-preface: var(--primary); 21 | 22 | --nav-buttons: var(--highlight); 23 | --nav-buttons-text: white; 24 | 25 | --corner-active: var(--highlight); 26 | --corner-inactive: #f4f4f4; 27 | --icons: var(--highlight); 28 | 29 | --emphasized-bg: #dce8ff; 30 | --emphasized-border: #aab6d2; 31 | } 32 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const NotFoundPage = () => ( 4 |
5 |

NOT FOUND

6 |

You just hit a route that doesn't exist... the sadness.

7 |
8 | ); 9 | 10 | export default NotFoundPage; 11 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { StaticQuery, graphql } from "gatsby"; 3 | import Card from "../components/TOCCard"; 4 | 5 | const IndexPage = () => ( 6 | ( 39 |
40 |
41 |
42 |
43 |

{props.site.siteMetadata.title}

44 |

{props.site.siteMetadata.subtitle}

45 |
46 |
47 | 51 |
52 |
53 |
{props.site.siteMetadata.author}
54 |
55 | {props.site.siteMetadata.authorSubtitle} 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 | 66 | 70 |
71 | )} 72 | /> 73 | ); 74 | 75 | export default IndexPage; 76 | -------------------------------------------------------------------------------- /src/templates/lessonTemplate.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "gatsby-link"; 3 | import { graphql } from "gatsby"; 4 | import * as helpers from "../util/helpers"; 5 | import Bg from "../layouts/corner-image.svg"; 6 | 7 | const sortFn = helpers.sorter; 8 | 9 | export default function Template(props) { 10 | let { markdownRemark, allMarkdownRemark } = props.data; // data.markdownRemark holds our post data 11 | 12 | const sections = allMarkdownRemark.edges 13 | .map((lesson) => lesson.node.frontmatter) 14 | .sort(sortFn); 15 | 16 | const { frontmatter, html } = markdownRemark; 17 | 18 | const index = sections.findIndex((el) => el.path === frontmatter.path); 19 | 20 | const prevLink = 21 | index > 0 ? ( 22 | 23 | ← 24 | {" " + sections[index - 1].title} 25 | 26 | ) : null; 27 | const nextLink = 28 | index < sections.length - 1 ? ( 29 | 30 | {sections[index + 1].title + " "} 31 | → 32 | 33 | ) : null; 34 | return ( 35 |
36 |
37 |

{frontmatter.title}

38 |

{frontmatter.date}

39 |
43 |
44 | {prevLink} 45 | {nextLink} 46 |
47 |
48 |
49 | 50 |
51 |
52 | ); 53 | } 54 | 55 | export const pageQuery = graphql` 56 | query LessonByPath($path: String!) { 57 | markdownRemark(frontmatter: { path: { eq: $path } }) { 58 | html 59 | frontmatter { 60 | path 61 | title 62 | order 63 | section 64 | } 65 | } 66 | allMarkdownRemark(limit: 1000) { 67 | edges { 68 | node { 69 | frontmatter { 70 | order 71 | path 72 | title 73 | } 74 | } 75 | } 76 | } 77 | } 78 | `; 79 | -------------------------------------------------------------------------------- /src/util/helpers.js: -------------------------------------------------------------------------------- 1 | function splitSections(str) { 2 | const validSectionTest = /^\d+[A-Z]+$/; 3 | const numbersRegex = /^\d+/; 4 | const lettersRegex = /[A-Z]+$/; 5 | if (!validSectionTest.test(str)) { 6 | throw new Error( 7 | `${str} does not match the section format. It must be , like 16A or 5F (case sensitive)` 8 | ); 9 | } 10 | 11 | return [numbersRegex.exec(str)[0], lettersRegex.exec(str)[0]]; 12 | } 13 | 14 | const getCharScore = str => 15 | str 16 | .split("") 17 | .map((char, index) => char.charCodeAt(0) * 10 ** index) 18 | .reduce((acc, score) => acc + score); 19 | 20 | function sorter(a, b) { 21 | let aOrder, bOrder; 22 | 23 | if (a.attributes && a.attributes.order) { 24 | aOrder = a.attributes.order; 25 | bOrder = b.attributes.order; 26 | } else { 27 | aOrder = a.order; 28 | bOrder = b.order; 29 | } 30 | 31 | const [aSec, aSub] = splitSections(aOrder); 32 | const [bSec, bSub] = splitSections(bOrder); 33 | 34 | // sections first 35 | if (aSec !== bSec) { 36 | return aSec - bSec; 37 | } 38 | 39 | // subsections next 40 | return getCharScore(aSub) - getCharScore(bSub); 41 | } 42 | 43 | module.exports.splitSections = splitSections; 44 | module.exports.sorter = sorter; 45 | -------------------------------------------------------------------------------- /static/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/static/author.jpg -------------------------------------------------------------------------------- /static/corner-image-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static/corner-image-inactive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static/courseImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/static/courseImage.jpg -------------------------------------------------------------------------------- /static/courseImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/static/courseImage.png -------------------------------------------------------------------------------- /static/posterframe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/grid-flexbox-v2/92ff4bb2a2115cb8dda26a06a8defa8ddde5d44f/static/posterframe.jpg --------------------------------------------------------------------------------