├── BEFORE_YOU_START.md ├── ReadMe.md ├── week1 ├── 1-advanced-css │ └── task.md ├── 2-reading │ └── task.md └── 3-website │ ├── README.md │ ├── blog-sketch-week-1.png │ ├── css │ └── style.css │ └── index.html ├── week2 ├── 1-flexbox-froggy │ └── readme.md └── 2-website │ ├── README.md │ ├── css │ ├── normalize.css │ └── style.css │ ├── favicon.ico │ ├── font-squirrel-download.zip │ ├── img │ ├── arrow-down.png │ ├── buy-now-bg.jpg │ ├── first-background.jpg │ ├── icon-arrow-down-inverse.svg │ ├── icon-coffee.svg │ ├── icon-devices.svg │ ├── icon-refill.svg │ ├── karma-logo.svg │ └── play-icon.svg │ └── index.html └── week3 ├── .DS_Store ├── 1-why-responsive └── task.md └── 2-website ├── images ├── .DS_Store ├── Cakes │ ├── .DS_Store │ ├── cake-with-blackberries.jpg │ ├── cake-with-macarons.jpg │ ├── cupcakes.jpg │ ├── not-technically-a-cake.jpg │ └── wedding-cake.jpg └── mums-w-frame.jpg ├── index.html ├── readme.md └── style.css /BEFORE_YOU_START.md: -------------------------------------------------------------------------------- 1 | # Instructions 2 | 3 | Before you start your homework you should make sure you have created a branch for your work. 4 | 5 | You can find instructions for submitting your homework here. 6 | 7 | - Github Desktop: https://docs.codeyourfuture.io/students/guides/submitting-homework 8 | - Command Line: https://docs.codeyourfuture.io/students/guides/making-a-pull-request 9 | 10 | You should create a new branch for each week of your homework 11 | -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS Homework 2 | 3 | In this repository you can find all of the homework for the [HTML-CSS Module](https://syllabus.codeyourfuture.io/html-css/) 4 | -------------------------------------------------------------------------------- /week1/1-advanced-css/task.md: -------------------------------------------------------------------------------- 1 | # Advanced CSS Selectors 2 | 3 | Read this about CSS Selectors 4 | http://learn.shayhowe.com/advanced-html-css/complex-selectors/ 5 | 6 | Play this game and complete it: 7 | https://flukeout.github.io/ 8 | -------------------------------------------------------------------------------- /week1/2-reading/task.md: -------------------------------------------------------------------------------- 1 | # HTML Reading 2 | 3 | Read this page on HTML syntax 4 | https://marksheet.io/html-syntax.html 5 | -------------------------------------------------------------------------------- /week1/3-website/README.md: -------------------------------------------------------------------------------- 1 | # HTML/CSS Project 2 | 3 | ## Setup 4 | 5 | First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents. 6 | 7 | ## Homework 8 | 9 | Create a new webpage on a subject that you're interested in (maybe the same topic you used for your Codepen submission). 10 | 11 | The page should **NOT** use any framework like Bootstrap. 12 | 13 | It should include the following elements: 14 | 15 | - The `.html` page and a linked `.css` file applies a consistent color scheme to links and text on your page. 16 | - A page header with a title and description for the site. 17 | - An articles section with three articles, each including a title, summary and a link. 18 | - A page footer containing info about you or the site. 19 | - Proper use of the semantic HTML tags we discussed. 20 | - Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others. 21 | - Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website. 22 | - **Commit often (with good meaningful commit messages), and Push to Github regularly.** 23 | - Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._ 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /week1/3-website/blog-sketch-week-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week1/3-website/blog-sketch-week-1.png -------------------------------------------------------------------------------- /week1/3-website/css/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Add your custom styles below 3 | * 4 | * Remember: 5 | * - Be organised, use comments and separate your styles into meaningful chunks 6 | * for example: General styles, Navigation styles, Hero styles, Footer etc. 7 | * 8 | */ 9 | -------------------------------------------------------------------------------- /week1/3-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | My Blog 10 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /week2/1-flexbox-froggy/readme.md: -------------------------------------------------------------------------------- 1 | # Flexbox Froggy 2 | 3 | Flexbox Froggy is a really fun way of learning how Flexbox works. 4 | 5 | You should complete all the levels 6 | 7 | https://flexboxfroggy.com/ 8 | -------------------------------------------------------------------------------- /week2/2-website/README.md: -------------------------------------------------------------------------------- 1 | # Karma-clone 2 | 3 | The aim of this exercise is to create a page that looks just like this one: http://thinkful-ed.github.io/karma-clone/ 4 | 5 | ## Tasks 6 | 7 | - Fork and clone this repo. 8 | - Create a branch with your name in the format: `html-css/week2/YourName` 9 | - Edit `index.html` and `style.css` to create a perfect copy of the example! 10 | - Add, commit and push your code often so you get into the habit. 11 | - At the end, do a final push and create a Pull Request. 12 | -------------------------------------------------------------------------------- /week2/2-website/css/normalize.css: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * --------------------------------------- 4 | * DO NOT EDIT THIS FILE. 5 | * All your styling should go in style.css 6 | * --------------------------------------- 7 | */ 8 | 9 | 10 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 11 | 12 | /** 13 | * 1. Set default font family to sans-serif. 14 | * 2. Prevent iOS text size adjust after orientation change, without disabling 15 | * user zoom. 16 | */ 17 | 18 | html { 19 | font-family: sans-serif; /* 1 */ 20 | -ms-text-size-adjust: 100%; /* 2 */ 21 | -webkit-text-size-adjust: 100%; /* 2 */ 22 | } 23 | 24 | /** 25 | * Remove default margin. 26 | */ 27 | 28 | body { 29 | margin: 0; 30 | } 31 | 32 | /* HTML5 display definitions 33 | ========================================================================== */ 34 | 35 | /** 36 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 37 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 38 | * and Firefox. 39 | * Correct `block` display not defined for `main` in IE 11. 40 | */ 41 | 42 | article, 43 | aside, 44 | details, 45 | figcaption, 46 | figure, 47 | footer, 48 | header, 49 | hgroup, 50 | main, 51 | menu, 52 | nav, 53 | section, 54 | summary { 55 | display: block; 56 | } 57 | 58 | /** 59 | * 1. Correct `inline-block` display not defined in IE 8/9. 60 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 61 | */ 62 | 63 | audio, 64 | canvas, 65 | progress, 66 | video { 67 | display: inline-block; /* 1 */ 68 | vertical-align: baseline; /* 2 */ 69 | } 70 | 71 | /** 72 | * Prevent modern browsers from displaying `audio` without controls. 73 | * Remove excess height in iOS 5 devices. 74 | */ 75 | 76 | audio:not([controls]) { 77 | display: none; 78 | height: 0; 79 | } 80 | 81 | /** 82 | * Address `[hidden]` styling not present in IE 8/9/10. 83 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 84 | */ 85 | 86 | [hidden], 87 | template { 88 | display: none; 89 | } 90 | 91 | /* Links 92 | ========================================================================== */ 93 | 94 | /** 95 | * Remove the gray background color from active links in IE 10. 96 | */ 97 | 98 | a { 99 | background-color: transparent; 100 | } 101 | 102 | /** 103 | * Improve readability when focused and also mouse hovered in all browsers. 104 | */ 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* Text-level semantics 112 | ========================================================================== */ 113 | 114 | /** 115 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 116 | */ 117 | 118 | abbr[title] { 119 | border-bottom: 1px dotted; 120 | } 121 | 122 | /** 123 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 124 | */ 125 | 126 | b, 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | /** 132 | * Address styling not present in Safari and Chrome. 133 | */ 134 | 135 | dfn { 136 | font-style: italic; 137 | } 138 | 139 | /** 140 | * Address variable `h1` font-size and margin within `section` and `article` 141 | * contexts in Firefox 4+, Safari, and Chrome. 142 | */ 143 | 144 | h1 { 145 | font-size: 2em; 146 | margin: 0.67em 0; 147 | } 148 | 149 | /** 150 | * Address styling not present in IE 8/9. 151 | */ 152 | 153 | mark { 154 | background: #ff0; 155 | color: #000; 156 | } 157 | 158 | /** 159 | * Address inconsistent and variable font size in all browsers. 160 | */ 161 | 162 | small { 163 | font-size: 80%; 164 | } 165 | 166 | /** 167 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 168 | */ 169 | 170 | sub, 171 | sup { 172 | font-size: 75%; 173 | line-height: 0; 174 | position: relative; 175 | vertical-align: baseline; 176 | } 177 | 178 | sup { 179 | top: -0.5em; 180 | } 181 | 182 | sub { 183 | bottom: -0.25em; 184 | } 185 | 186 | /* Embedded content 187 | ========================================================================== */ 188 | 189 | /** 190 | * Remove border when inside `a` element in IE 8/9/10. 191 | */ 192 | 193 | img { 194 | border: 0; 195 | } 196 | 197 | /** 198 | * Correct overflow not hidden in IE 9/10/11. 199 | */ 200 | 201 | svg:not(:root) { 202 | overflow: hidden; 203 | } 204 | 205 | /* Grouping content 206 | ========================================================================== */ 207 | 208 | /** 209 | * Address margin not present in IE 8/9 and Safari. 210 | */ 211 | 212 | figure { 213 | margin: 1em 40px; 214 | } 215 | 216 | /** 217 | * Address differences between Firefox and other browsers. 218 | */ 219 | 220 | hr { 221 | -moz-box-sizing: content-box; 222 | box-sizing: content-box; 223 | height: 0; 224 | } 225 | 226 | /** 227 | * Contain overflow in all browsers. 228 | */ 229 | 230 | pre { 231 | overflow: auto; 232 | } 233 | 234 | /** 235 | * Address odd `em`-unit font size rendering in all browsers. 236 | */ 237 | 238 | code, 239 | kbd, 240 | pre, 241 | samp { 242 | font-family: monospace, monospace; 243 | font-size: 1em; 244 | } 245 | 246 | /* Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 251 | * styling of `select`, unless a `border` property is set. 252 | */ 253 | 254 | /** 255 | * 1. Correct color not being inherited. 256 | * Known issue: affects color of disabled elements. 257 | * 2. Correct font properties not being inherited. 258 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 259 | */ 260 | 261 | button, 262 | input, 263 | optgroup, 264 | select, 265 | textarea { 266 | color: inherit; /* 1 */ 267 | font: inherit; /* 2 */ 268 | margin: 0; /* 3 */ 269 | } 270 | 271 | /** 272 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 273 | */ 274 | 275 | button { 276 | overflow: visible; 277 | } 278 | 279 | /** 280 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 281 | * All other form control elements do not inherit `text-transform` values. 282 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 283 | * Correct `select` style inheritance in Firefox. 284 | */ 285 | 286 | button, 287 | select { 288 | text-transform: none; 289 | } 290 | 291 | /** 292 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 293 | * and `video` controls. 294 | * 2. Correct inability to style clickable `input` types in iOS. 295 | * 3. Improve usability and consistency of cursor style between image-type 296 | * `input` and others. 297 | */ 298 | 299 | button, 300 | html input[type="button"], /* 1 */ 301 | input[type="reset"], 302 | input[type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | cursor: pointer; /* 3 */ 305 | } 306 | 307 | /** 308 | * Re-set default cursor for disabled elements. 309 | */ 310 | 311 | button[disabled], 312 | html input[disabled] { 313 | cursor: default; 314 | } 315 | 316 | /** 317 | * Remove inner padding and border in Firefox 4+. 318 | */ 319 | 320 | button::-moz-focus-inner, 321 | input::-moz-focus-inner { 322 | border: 0; 323 | padding: 0; 324 | } 325 | 326 | /** 327 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 328 | * the UA stylesheet. 329 | */ 330 | 331 | input { 332 | line-height: normal; 333 | } 334 | 335 | /** 336 | * It's recommended that you don't attempt to style these elements. 337 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 338 | * 339 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 340 | * 2. Remove excess padding in IE 8/9/10. 341 | */ 342 | 343 | input[type="checkbox"], 344 | input[type="radio"] { 345 | box-sizing: border-box; /* 1 */ 346 | padding: 0; /* 2 */ 347 | } 348 | 349 | /** 350 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 351 | * `font-size` values of the `input`, it causes the cursor style of the 352 | * decrement button to change from `default` to `text`. 353 | */ 354 | 355 | input[type="number"]::-webkit-inner-spin-button, 356 | input[type="number"]::-webkit-outer-spin-button { 357 | height: auto; 358 | } 359 | 360 | /** 361 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 362 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 363 | * (include `-moz` to future-proof). 364 | */ 365 | 366 | input[type="search"] { 367 | -webkit-appearance: textfield; /* 1 */ 368 | -moz-box-sizing: content-box; 369 | -webkit-box-sizing: content-box; /* 2 */ 370 | box-sizing: content-box; 371 | } 372 | 373 | /** 374 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 375 | * Safari (but not Chrome) clips the cancel button when the search input has 376 | * padding (and `textfield` appearance). 377 | */ 378 | 379 | input[type="search"]::-webkit-search-cancel-button, 380 | input[type="search"]::-webkit-search-decoration { 381 | -webkit-appearance: none; 382 | } 383 | 384 | /** 385 | * Define consistent border, margin, and padding. 386 | */ 387 | 388 | fieldset { 389 | border: 1px solid #c0c0c0; 390 | margin: 0 2px; 391 | padding: 0.35em 0.625em 0.75em; 392 | } 393 | 394 | /** 395 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 396 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 397 | */ 398 | 399 | legend { 400 | border: 0; /* 1 */ 401 | padding: 0; /* 2 */ 402 | } 403 | 404 | /** 405 | * Remove default vertical scrollbar in IE 8/9/10/11. 406 | */ 407 | 408 | textarea { 409 | overflow: auto; 410 | } 411 | 412 | /** 413 | * Don't inherit the `font-weight` (applied by a rule above). 414 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 415 | */ 416 | 417 | optgroup { 418 | font-weight: bold; 419 | } 420 | 421 | /* Tables 422 | ========================================================================== */ 423 | 424 | /** 425 | * Remove most spacing between table cells. 426 | */ 427 | 428 | table { 429 | border-collapse: collapse; 430 | border-spacing: 0; 431 | } 432 | 433 | td, 434 | th { 435 | padding: 0; 436 | } -------------------------------------------------------------------------------- /week2/2-website/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ 3 | 4 | body { 5 | font-family: 'Roboto', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | /** 10 | * Add your custom styles below 11 | * 12 | * Remember: 13 | * - Be organised, use comments and separate your styles into meaningful chunks 14 | * for example: General styles, Navigation styles, Hero styles, Footer etc. 15 | * 16 | * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' 17 | */ 18 | 19 | 20 | -------------------------------------------------------------------------------- /week2/2-website/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week2/2-website/favicon.ico -------------------------------------------------------------------------------- /week2/2-website/font-squirrel-download.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week2/2-website/font-squirrel-download.zip -------------------------------------------------------------------------------- /week2/2-website/img/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week2/2-website/img/arrow-down.png -------------------------------------------------------------------------------- /week2/2-website/img/buy-now-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week2/2-website/img/buy-now-bg.jpg -------------------------------------------------------------------------------- /week2/2-website/img/first-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week2/2-website/img/first-background.jpg -------------------------------------------------------------------------------- /week2/2-website/img/icon-arrow-down-inverse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /week2/2-website/img/icon-coffee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 17 | 18 | 22 | 23 | 24 | 28 | 29 | 30 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /week2/2-website/img/icon-devices.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /week2/2-website/img/icon-refill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /week2/2-website/img/karma-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week2/2-website/img/play-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | 24 | 25 | 31 | 32 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 53 | 54 | 69 | 70 | 74 | 75 | 85 | 86 | 87 | 90 | 91 | 92 | 95 | 96 | 97 | 100 | 101 | 102 | 105 | 106 | 107 | 110 | 111 | 112 | 115 | 116 | 117 | 120 | 121 | 122 | 125 | 126 | 127 | 130 | 131 | 132 | 135 | 136 | 137 | 140 | 141 | 142 | 145 | 146 | 147 | 150 | 151 | 152 | 156 | 157 | 158 | 159 | 160 | 163 | 164 | 165 | 168 | 169 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 184 | 188 | 189 | 190 | 191 | 192 | 201 | 202 | 206 | 207 | 208 | 211 | 212 | 213 | 216 | 217 | 218 | 221 | 222 | 223 | 226 | 227 | 228 | 231 | 232 | 233 | 236 | 237 | 238 | 241 | 242 | 243 | 246 | 247 | 248 | 249 | 250 | 251 | 265 | 266 | 268 | 269 | 270 | 273 | 274 | 275 | 279 | 280 | 294 | 295 | 298 | 299 | 300 | 303 | 304 | 305 | 309 | 310 | 311 | 317 | 323 | 327 | 330 | 333 | 339 | 340 | 341 | 342 | 346 | 347 | 348 | 352 | 353 | 354 | 358 | 359 | 360 | 375 | 376 | 378 | 380 | 382 | 383 | 397 | 399 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | -------------------------------------------------------------------------------- /week2/2-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Karma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /week3/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/.DS_Store -------------------------------------------------------------------------------- /week3/1-why-responsive/task.md: -------------------------------------------------------------------------------- 1 | # Why Responsive? 2 | 3 | You should complete Why Responsive?, Starting Small and Building Up. Don't worry if you don't have a phone you can use for Remote Debugging. You can use the browser's Device Emulation instead. 4 | 5 | https://www.udacity.com/course/responsive-web-design-fundamentals--ud893 6 | -------------------------------------------------------------------------------- /week3/2-website/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/.DS_Store -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/.DS_Store -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/cake-with-blackberries.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/cake-with-blackberries.jpg -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/cake-with-macarons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/cake-with-macarons.jpg -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/cupcakes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/cupcakes.jpg -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/not-technically-a-cake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/not-technically-a-cake.jpg -------------------------------------------------------------------------------- /week3/2-website/images/Cakes/wedding-cake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/Cakes/wedding-cake.jpg -------------------------------------------------------------------------------- /week3/2-website/images/mums-w-frame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/38663486fe753cfca213f5b99de8a2978131bca3/week3/2-website/images/mums-w-frame.jpg -------------------------------------------------------------------------------- /week3/2-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responsive Cake webpage 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /week3/2-website/readme.md: -------------------------------------------------------------------------------- 1 | Create a responsive webpage showcasing your cake business 2 | 3 | ## Set up 4 | 1) Fork this repository (so you have a copy of it in your own Github account) 5 | 2) Clone the repository to your computer (so you can access it locally and can add code to it!) 6 | -- 7 | 3) Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently. 8 | 4) When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work. 9 | 10 | 11 | ## Exercise 12 | 13 | ### Start with your mobile design 14 | - Draw a wireframe of how the website will look like on mobile 15 | - Write the HTML following this mobile design 16 | - Then write your CSS for everything to look great on mobile 17 | 18 | ### Then adapt the page to look good on desktop 19 | - Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen 20 | 21 | ![Wireframe for inspiration:](./images/mums-w-frame.jpg) 22 | -------------------------------------------------------------------------------- /week3/2-website/style.css: -------------------------------------------------------------------------------- 1 | /* Add your styling here */ 2 | --------------------------------------------------------------------------------