├── README.md ├── images ├── bg-pattern-quotation.svg ├── favicon-32x32.png ├── image-daniel.jpg ├── image-jeanette.jpg ├── image-jonathan.jpg ├── image-kira.jpg └── image-patrick.jpg ├── index.html ├── style-start.css └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # learn-grid-the-easy-way -------------------------------------------------------------------------------- /images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/image-daniel.jpg -------------------------------------------------------------------------------- /images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/image-jeanette.jpg -------------------------------------------------------------------------------- /images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/image-jonathan.jpg -------------------------------------------------------------------------------- /images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/image-kira.jpg -------------------------------------------------------------------------------- /images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/learn-grid-the-easy-way/e903fb9de605e20157d7645b6c99465e53cfc841/images/image-patrick.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | FEM grid 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | daniel clifford 24 |
25 |
26 |

Daniel Clifford

27 |

Verified Graduate

28 |
29 |
30 |

31 | I received a job offer mid-course, and the subjects I learned were current, if not more so, 32 | in the company I joined. I honestly feel I got every penny’s worth. 33 |

34 |

35 | “ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a 36 | transition and have heard some people who had an amazing experience here. I signed up 37 | for the free intro course and found it incredibly fun! I enrolled shortly thereafter. 38 | The next 12 weeks was the best - and most grueling - time of my life. Since completing 39 | the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ” 40 |

41 |
42 |
43 |
44 |
45 | Jonathan Walters 46 |
47 |
48 |

Jonathan Walters

49 |

Verified Graduate

50 |
51 |
52 |

53 | The team was very supportive and kept me motivated 54 |

55 |

56 | “ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer 57 | for a big company. This was one of the best investments I’ve made in myself. ” 58 |

59 |
60 |
61 |
62 |
63 | Jeanette Harmon 64 |
65 |
66 |

Jeanette Harmon

67 |

Verified Graduate

68 |
69 |
70 |

71 | An overall wonderful and rewarding experience

72 |

73 | “ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living 74 | while doing something I love. ” 75 |

76 |
77 |
78 |
79 |
80 | Patrick Abrams 81 |
82 |
83 |

Patrick Abrams

84 |

Verified Graduate

85 |
86 |
87 |

88 | Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and 89 | learning from their experiences was easy. 90 |

91 |

92 | “ The staff seem genuinely concerned about my progress which I find really refreshing. The program 93 | gave me the confidence necessary to be able to go out in the world and present myself as a capable 94 | junior developer. The standard is above the rest. You will get the personal attention you need from 95 | an incredible community of smart and amazing people. ” 96 |

97 |
98 |
99 |
100 |
101 | Kira Whittle 102 |
103 |
104 |

Kira Whittle

105 |

Verified Graduate

106 |
107 |
108 |

109 | Such a life-changing experience. Highly recommended! 110 |

111 |

112 | “ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from 113 | professionals who can help me learn programming step by step. I was encouraged to enroll by a former 114 | student of theirs who can only say wonderful things about the program. The entire curriculum and staff 115 | did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team 116 | project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial 117 | could ever have. In fact, I’ve often referred to it during interviews as an example of my developent 118 | experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 119 | 100% recommend! ” 120 |

121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /style-start.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clr-primary-400: 263 55% 52%; 3 | --clr-secondary-400: 217 19% 35%; 4 | --clr-secondary-500: 219 29% 14%; 5 | --clr-neutral-100: 0 0% 100%; 6 | --clr-neutral-200: 210 46% 95%; 7 | --clr-neutral-300: 0 0% 81%; 8 | 9 | --ff-primary: "Barlow Semi Condensed", sans-serif; 10 | 11 | --fw-400: 500; 12 | --fw-700: 600; 13 | 14 | --fs-300: 0.6875rem; 15 | --fs-400: 0.8125rem; 16 | --fs-500: 1.25rem; 17 | } 18 | 19 | /* Box sizing rules */ 20 | *, 21 | *::before, 22 | *::after { 23 | box-sizing: border-box; 24 | } 25 | 26 | /* Remove default margin */ 27 | body, 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | p, 33 | figure, 34 | blockquote, 35 | dl, 36 | dd { 37 | margin: 0; 38 | } 39 | 40 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 41 | ul[role="list"], 42 | ol[role="list"] { 43 | list-style: none; 44 | } 45 | 46 | /* Set core root defaults */ 47 | html:focus-within { 48 | scroll-behavior: smooth; 49 | } 50 | 51 | /* Set core body defaults */ 52 | body { 53 | min-height: 100vh; 54 | text-rendering: optimizeSpeed; 55 | line-height: 1.5; 56 | } 57 | 58 | /* A elements that don't have a class get default styles */ 59 | a:not([class]) { 60 | text-decoration-skip-ink: auto; 61 | } 62 | 63 | /* Make images easier to work with */ 64 | img, 65 | picture { 66 | max-width: 100%; 67 | display: block; 68 | } 69 | 70 | /* Inherit fonts for inputs and buttons */ 71 | input, 72 | button, 73 | textarea, 74 | select { 75 | font: inherit; 76 | } 77 | 78 | /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ 79 | @media (prefers-reduced-motion: reduce) { 80 | html:focus-within { 81 | scroll-behavior: auto; 82 | } 83 | 84 | *, 85 | *::before, 86 | *::after { 87 | animation-duration: 0.01ms !important; 88 | animation-iteration-count: 1 !important; 89 | transition-duration: 0.01ms !important; 90 | scroll-behavior: auto !important; 91 | } 92 | } 93 | 94 | body { 95 | display: grid; 96 | place-content: center; 97 | min-height: 100vh; 98 | 99 | font-family: var(--ff-primary); 100 | font-weight: var(--fw-400); 101 | 102 | background-color: hsl(var(--clr-neutral-200)); 103 | } 104 | 105 | h1, 106 | h2, 107 | h3 { 108 | font-weight: var(--fw-700); 109 | } 110 | 111 | /* utilities */ 112 | .flex { 113 | display: flex; 114 | gap: var(--gap, 1rem); 115 | } 116 | 117 | .flow > *:where(:not(:first-child)) { 118 | margin-top: var(--flow-spacer, 1em); 119 | } 120 | 121 | .bg-primary-400 { 122 | background: hsl(var(--clr-primary-400)); 123 | } 124 | .bg-secondary-400 { 125 | background: hsl(var(--clr-secondary-400)); 126 | } 127 | .bg-secondary-500 { 128 | background: hsl(var(--clr-secondary-500)); 129 | } 130 | 131 | .bg-neutral-100 { 132 | background: hsl(var(--clr-neutral-100)); 133 | } 134 | 135 | .text-neutral-100 { 136 | color: hsl(var(--clr-neutral-100)); 137 | } 138 | .text-secondary-400 { 139 | color: hsl(var(--clr-secondary-400)); 140 | } 141 | .border-primary-400 { 142 | border: 2px solid #a775f1; 143 | } 144 | 145 | /* components */ 146 | .testimonial-grid { 147 | padding-block: 2rem; 148 | width: min(95%, 70rem); 149 | margin-inline: auto; 150 | } 151 | 152 | .testimonial { 153 | font-size: var(--fs-400); 154 | padding: 2rem; 155 | border-radius: 0.5rem; 156 | box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25); 157 | } 158 | 159 | .testimonial.quote { 160 | background-image: url("./images/bg-pattern-quotation.svg"); 161 | background-repeat: no-repeat; 162 | background-position: top right 10%; 163 | } 164 | 165 | .testimonial img { 166 | width: 1.75rem; 167 | aspect-ratio: 1; 168 | border-radius: 50%; 169 | } 170 | 171 | .testimonial .name { 172 | font-size: var(--fs-400); 173 | font-weight: var(--fw-400); 174 | line-height: 1; 175 | } 176 | 177 | .testimonial .position { 178 | font-size: var(--fs-300); 179 | opacity: 0.5; 180 | } 181 | 182 | .testimonial > p:first-of-type { 183 | font-size: var(--fs-500); 184 | line-height: 1.2; 185 | } 186 | 187 | .testimonial > p:last-of-type { 188 | opacity: 0.7; 189 | } 190 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clr-primary-400: 263 55% 52%; 3 | --clr-secondary-400: 217 19% 35%; 4 | --clr-secondary-500: 219 29% 14%; 5 | --clr-neutral-100: 0 0% 100%; 6 | --clr-neutral-200: 210 46% 95%; 7 | --clr-neutral-300: 0 0% 81%; 8 | 9 | --ff-primary: "Barlow Semi Condensed", sans-serif; 10 | 11 | --fw-400: 500; 12 | --fw-700: 600; 13 | 14 | --fs-300: 0.6875rem; 15 | --fs-400: 0.8125rem; 16 | --fs-500: 1.25rem; 17 | } 18 | 19 | /* Box sizing rules */ 20 | *, 21 | *::before, 22 | *::after { 23 | box-sizing: border-box; 24 | } 25 | 26 | /* Remove default margin */ 27 | body, 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | p, 33 | figure, 34 | blockquote, 35 | dl, 36 | dd { 37 | margin: 0; 38 | } 39 | 40 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 41 | ul[role="list"], 42 | ol[role="list"] { 43 | list-style: none; 44 | } 45 | 46 | /* Set core root defaults */ 47 | html:focus-within { 48 | scroll-behavior: smooth; 49 | } 50 | 51 | /* Set core body defaults */ 52 | body { 53 | min-height: 100vh; 54 | text-rendering: optimizeSpeed; 55 | line-height: 1.5; 56 | } 57 | 58 | /* A elements that don't have a class get default styles */ 59 | a:not([class]) { 60 | text-decoration-skip-ink: auto; 61 | } 62 | 63 | /* Make images easier to work with */ 64 | img, 65 | picture { 66 | max-width: 100%; 67 | display: block; 68 | } 69 | 70 | /* Inherit fonts for inputs and buttons */ 71 | input, 72 | button, 73 | textarea, 74 | select { 75 | font: inherit; 76 | } 77 | 78 | /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ 79 | @media (prefers-reduced-motion: reduce) { 80 | html:focus-within { 81 | scroll-behavior: auto; 82 | } 83 | 84 | *, 85 | *::before, 86 | *::after { 87 | animation-duration: 0.01ms !important; 88 | animation-iteration-count: 1 !important; 89 | transition-duration: 0.01ms !important; 90 | scroll-behavior: auto !important; 91 | } 92 | } 93 | 94 | body { 95 | display: grid; 96 | place-content: center; 97 | min-height: 100vh; 98 | 99 | font-family: var(--ff-primary); 100 | font-weight: var(--fw-400); 101 | 102 | background-color: hsl(var(--clr-neutral-200)); 103 | } 104 | 105 | h1, 106 | h2, 107 | h3 { 108 | font-weight: var(--fw-700); 109 | } 110 | 111 | /* utilities */ 112 | .flex { 113 | display: flex; 114 | gap: var(--gap, 1rem); 115 | } 116 | 117 | .flow > *:where(:not(:first-child)) { 118 | margin-top: var(--flow-spacer, 1em); 119 | } 120 | 121 | .bg-primary-400 { 122 | background: hsl(var(--clr-primary-400)); 123 | } 124 | .bg-secondary-400 { 125 | background: hsl(var(--clr-secondary-400)); 126 | } 127 | .bg-secondary-500 { 128 | background: hsl(var(--clr-secondary-500)); 129 | } 130 | 131 | .bg-neutral-100 { 132 | background: hsl(var(--clr-neutral-100)); 133 | } 134 | 135 | .text-neutral-100 { 136 | color: hsl(var(--clr-neutral-100)); 137 | } 138 | .text-secondary-400 { 139 | color: hsl(var(--clr-secondary-400)); 140 | } 141 | .border-primary-400 { 142 | border: 2px solid #a775f1; 143 | } 144 | 145 | /* components */ 146 | .testimonial-grid { 147 | display: grid; 148 | gap: 1.5rem; 149 | grid-auto-columns: 1fr; 150 | grid-template-areas: 151 | 'one' 152 | 'two' 153 | 'three' 154 | 'four' 155 | 'five'; 156 | 157 | padding-block: 2rem; 158 | width: min(95%, 70rem); 159 | margin-inline: auto; 160 | } 161 | 162 | .testimonial { 163 | font-size: var(--fs-400); 164 | padding: 2rem; 165 | border-radius: 0.5rem; 166 | box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25); 167 | } 168 | 169 | .testimonial:nth-child(1) { 170 | grid-area: one; 171 | } 172 | .testimonial:nth-child(2) { 173 | grid-area: two; 174 | } 175 | .testimonial:nth-child(3) { 176 | grid-area: three; 177 | } 178 | .testimonial:nth-child(4) { 179 | grid-area: four; 180 | } 181 | .testimonial:nth-child(5) { 182 | grid-area: five; 183 | } 184 | 185 | @media screen and (min-width: 33em) { 186 | .testimonial-grid { 187 | grid-template-areas: 188 | "one one" 189 | "two three" 190 | "five five" 191 | "four four"; 192 | } 193 | } 194 | 195 | @media screen and (min-width: 38em) { 196 | .testimonial-grid { 197 | grid-template-areas: 198 | 'one one' 199 | 'two five' 200 | 'three five' 201 | 'four four'; 202 | } 203 | } 204 | 205 | @media screen and (min-width: 54em) { 206 | .testimonial-grid { 207 | grid-template-areas: 208 | "one one two" 209 | "five five five" 210 | "three four four"; 211 | } 212 | } 213 | 214 | @media screen and (min-width: 75em) { 215 | .testimonial-grid { 216 | grid-template-areas: 217 | "one one two five" 218 | "three four four five"; 219 | } 220 | } 221 | 222 | 223 | .testimonial.quote { 224 | background-image: url("./images/bg-pattern-quotation.svg"); 225 | background-repeat: no-repeat; 226 | background-position: top right 10%; 227 | } 228 | 229 | .testimonial img { 230 | width: 1.75rem; 231 | aspect-ratio: 1; 232 | border-radius: 50%; 233 | } 234 | 235 | .testimonial .name { 236 | font-size: var(--fs-400); 237 | font-weight: var(--fw-400); 238 | line-height: 1; 239 | } 240 | 241 | .testimonial .position { 242 | font-size: var(--fs-300); 243 | opacity: 0.5; 244 | } 245 | 246 | .testimonial > p:first-of-type { 247 | font-size: var(--fs-500); 248 | line-height: 1.2; 249 | } 250 | 251 | .testimonial > p:last-of-type { 252 | opacity: 0.7; 253 | } 254 | --------------------------------------------------------------------------------