├── .gitignore ├── 30 Day Beginner HTML & CSS Calendar.pdf ├── Calendar.md ├── README.md └── img ├── 30 Day Calendar Banner.png └── Calendar Cover.png /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /30 Day Beginner HTML & CSS Calendar.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/breehall/30-Day-HTML-CSS-Coding-Calendar/cfe69129cb0252253c16e4416a332eb6f9d7aeef/30 Day Beginner HTML & CSS Calendar.pdf -------------------------------------------------------------------------------- /Calendar.md: -------------------------------------------------------------------------------- 1 | ![30 Day Beginner HTML & CSS Coding Calendar Banner](img/30%20Day%20Calendar%20Banner.png) 2 | 3 | # 30 Day Beginner HTML & CSS Coding Calendar 4 | This is the daily breakdown for the the 30 day HTML & CSS coding challenge. For information about the calendar, resources used, and links to download a printable version of the calendar, click [here](./README.md)! 5 | 6 | **Jump to:** 7 | 8 | ➡️ [Day 5](#day-5) 9 | 10 | ➡️ [Day 10](#day-10) 11 | 12 | ➡️ [Day 15](#day-15) 13 | 14 | ➡️ [Day 20](#day-20) 15 | 16 | ➡️ [Day 25](#day-25) 17 | 18 | ➡️ [Day 30](#day-30) 19 | 20 | --- 21 | 22 | ![Calendar Cover](img/Calendar%20Cover.png) 23 | 24 | --- 25 | 26 | ## Day #1 - Project Setup & Text Elements 27 | 28 | ### 📺 Watch 29 | 30 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (00:00 - 51:17) 31 | 32 | ### ⌨️ Practice 33 | 34 | Complete exercises in the Basic HTML & HTML5 Course 35 | - [ ] [Say Hello to HTML Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements) 36 | - [ ] [Headline with the < h2 > Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element) 37 | - [ ] [Inform with the < p > Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element) 38 | - [ ] [Fill in the Blank with Placeholder Text](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text) 39 | - [ ] [Delete HTML Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/delete-html-elements) 40 | 41 | --- 42 | 43 | ## Day #2 - Images, Paths, Links, and Special Characters 44 | 45 | ### 📺 Watch 46 | 47 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (51:17 - 1:38:58) 48 | 49 | ### ⌨️ Practice 50 | 51 | Complete exercises in the Basic HTML & HTML5 Course 52 | - [ ] [Uncomment HTML](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/uncomment-html) 53 | - [ ] [Comment Out HTML](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/comment-out-html) 54 | - [ ] [Introduction to HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements) 55 | - [ ] [Add Images to Your Website](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-images-to-your-website) 56 | 57 | --- 58 | 59 | ## Day #3 - Review & Work Day 60 | 61 | ### 📖 Review Day 62 | 63 | Review your notes and experiement with code! 64 | 65 | ### ⌨️ Practice 66 | 67 | Complete exercises in the Basic HTML & HTML5 Course 68 | - [ ] [Link to External Pages with Anchor Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements) 69 | - [ ] [Link to Internal Sections of a Page with Anchor Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements) 70 | - [ ] [Nest as Anchor Element within a Paragraph](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph) 71 | - [ ] [Make Dead Links Using the Hash Symbol](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol) 72 | - [ ] [Turn an Image into a Link](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link) 73 | 74 | --- 75 | 76 | ## Day #4 - Lists, Tables, Forms, and Code Formatting 77 | 78 | ### 📺 Watch 79 | 80 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (1:38:58 - 2:30:15) 81 | 82 | ### ⌨️ Practice 83 | 84 | Complete exercises in the Basic HTML & HTML5 Course 85 | - [ ] [Create a Bulleted Unordered List](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list) 86 | - [ ] [Create an Ordered List](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-an-ordered-lists) 87 | - [ ] [Create a Text Field](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-text-field) 88 | - [ ] [Add Placeholder Text to a Text Field](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field) 89 | 90 | --- 91 | 92 |

Day #5 - Developing a Full Website with HTML

93 | 94 | ### 📺 Watch 95 | 96 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (2:30:15 - 3:09:42) 97 | 98 | ### ⌨️ Practice 99 | 100 | Complete exercises in the Basic HTML & HTML5 Course 101 | - [ ] [Create a Form Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-form-element) 102 | - [ ] [Add a Submit Button to a Form](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form) 103 | - [ ] [Use HTML5 to Require a Field](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field) 104 | 105 | --- 106 | 107 | ## Day #6 - Inputs 108 | 109 | ### ⌨️ Practice 110 | 111 | Complete exercises in the Basic HTML & HTML5 Course 112 | - [ ] [Create a Set of Radio Buttons](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons) 113 | - [ ] [Create a Set of Checkboxes](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes) 114 | - [ ] [Use the Value Attribute with Radio Buttons & Checkboxes](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes) 115 | - [ ] [Check Radio Buttons and Checkboxes by Default](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default) 116 | - [ ] [Nest Many Elements within a Single
Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element) 117 | - [ ] [Declare the Doctype of an HTML Document](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document) 118 | - [ ] [Define the Head and Body of an HTML Document](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document) 119 | 120 | --- 121 | 122 | ## Day #7 - Intro to CSS 123 | 124 | ### 📺 Watch 125 | 126 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (3:09:42 - 3:52:27) 127 | 128 | ### ⌨️ Practice 129 | 130 | Complete exercises in the Basic CSS Course 131 | - [ ] [Change the Color of Text](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-color-of-text) 132 | - [ ] [Use CSS Selectors to Style Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements) 133 | - [ ] [Use a CSS Class to Style an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-css-class-to-style-an-element) 134 | - [ ] [Style Multiple Elements with a CSS Class](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class) 135 | - [ ] [Change the Font Size of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-font-size-of-an-element) 136 | 137 | --- 138 | 139 | ## Day #8 - Basic CSS Selector & CSS Inheritance 140 | 141 | ### 📺 Watch 142 | 143 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (3:52:27 - 4:27:33) 144 | 145 | ### ⌨️ Practice 146 | 147 | Complete exercises in the Basic CSS Course 148 | - [ ] [Set the Font Family of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/set-the-font-family-of-an-element) 149 | - [ ] [Import a Google Font](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/import-a-google-font) 150 | - [ ] [Specify How Google Fonts Should Degrade](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/specify-how-fonts-should-degrade) 151 | - [ ] [Size Your Images](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images) 152 | - [ ] [Add Borders Around Your Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements) 153 | 154 | --- 155 | 156 | ## Day #9 - Review & Borders/ID Exercises 157 | 158 | ### 📖 Review Day 159 | 160 | Review your notes and experiement with code! 161 | 162 | ### ⌨️ Practice 163 | 164 | Complete exercises in the Basic CSS Course 165 | - [ ] [Add Rounded Corners with border-radius](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-rounded-corners-with-border-radius) 166 | - [ ] [Make Circular Images with a border-radius](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/make-circular-images-with-a-border-radius) 167 | - [ ] [Give a Background Color to a
Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/give-a-background-color-to-a-div-element) 168 | - [ ] [Set the ID on an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/set-the-id-of-an-element) 169 | - [ ] [Use the ID Attribute to Style an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element) 170 | 171 | --- 172 | 173 |

Day #10 - Working with Colors & Units of Measure in CSS

174 | 175 | ### 📺 Watch 176 | 177 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (4:27:33 - 5:19:14) 178 | 179 | ### ⌨️ Practice 180 | 181 | Complete exercises in the Basic CSS Course 182 | - [ ] [Use Hex Codes for Specific Colors](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-hex-code-for-specific-colors) 183 | - [ ] [Use Hex Codes to Mix Colors](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-hex-code-to-mix-colors) 184 | - [ ] [Use Abbreviated Hex Codes](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-abbreviated-hex-code) 185 | - [ ] [Use RGB Values to Color Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-rgb-values-to-color-elements) 186 | - [ ] [Use RGB to Mix Colors](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-rgb-to-mix-colors) 187 | - [ ] [Understand the Absolute vs. Relative Units](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/understand-absolute-versus-relative-units) 188 | 189 | --- 190 | 191 | ## Day #11 - Review & Specificity Exercises 192 | 193 | ### 📖 Review Day 194 | 195 | Review your notes and experiement with code! 196 | 197 | ### ⌨️ Practice 198 | 199 | Complete exercises in the Basic CSS Course 200 | - [ ] [Use Attribute Selectors to Style Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements) 201 | - [ ] [Style the Body](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/style-the-html-body-element) 202 | - [ ] [Inherit Styles of the Body Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-styles-from-the-body-element) 203 | - [ ] [Prioritize One Style Over Another](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/prioritize-one-style-over-another) 204 | - [ ] [Override Styles in Subsequent CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-styles-in-subsequent-css) 205 | - [ ] [Override Class Declarations by Styling ID Attributes](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes) 206 | - [ ] [Override Class Declarations with Inline Styles](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-class-declarations-with-inline-styles) 207 | - [ ] [Override All Other Styles by Using Important](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-all-other-styles-by-using-important) 208 | 209 | --- 210 | 211 | ## Day #12 - Typography and Font Styling 212 | 213 | ### 📺 Watch 214 | 215 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (5:19:14 - 6:04:31) 216 | 217 | ### ⌨️ Free Work Day 218 | 219 | Take time to explore and experiment on your own! Explore the questions you've noted in your journal and try to find the answers. Work on something that's interesting to you. When all else fails, take an existing website and try to replicate it on your own! 220 | 221 | --- 222 | 223 | ## Day #13 - The Box Model & Display Styling and Properties 224 | 225 | ### 📺 Watch 226 | 227 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (6:04:31 - 7:06:46) 228 | 229 | ### ⌨️ Practice 230 | 231 | Complete exercises in the Basic CSS Course 232 | - [ ] [Adjust the Padding of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-padding-of-an-element) 233 | - [ ] [Adjust the Margin of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-margin-of-an-element) 234 | - [ ] [Add a Negative Margin to an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-a-negative-margin-to-an-element) 235 | - [ ] [Add Different Padding to Each Side of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element) 236 | - [ ] [Add Different Margins to Each Side of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element) 237 | - [ ] [Use Clockwise Notation to Specify Padding of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element) 238 | - [ ] [Use Clockwise Notation to Specify Margin of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element) 239 | 240 | --- 241 | 242 | ## Day #14 - Git & Github 243 | 244 | ### 📺 Watch 245 | 246 | [Git & Github Crash Course by FreeCodeCamp](https://www.youtube.com/watch?v=RGOj5yH7evk) (entire video) 247 | 248 | ### ⌨️ Practice 249 | 250 | - [ ] [Create your own Github profile](https://www.github.com) 251 | - [ ] [Walk through the Hello World Github example](https://docs.github.com/en/get-started/quickstart/hello-world) 252 | 253 | --- 254 | 255 |

Day #15 - Display Styling and Properties & Background Styling

256 | 257 | ### 📺 Watch 258 | 259 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (7:06:46 - 7:47:18 ) 260 | 261 | ### ⌨️ Practice 262 | 263 | - [ ] [Work through Github exersizes on W3Schools](https://www.w3schools.com/git/exercise.asp). You don't need to complete all of them, but these questions are a great way to get familiar with Git commands. 264 | - [ ] [Play through levels 1-8 of CSS Diner](https://flukeout.github.io/) 265 | 266 | --- 267 | 268 | ## Day #16 - Gradients & Positioning 269 | 270 | ### 📺 Watch 271 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (7:47:04 - 8:42:30) 272 | 273 | ### ⌨️ Practice 274 | 275 | - [ ] [Play CSS Battle - Target #1](https://cssbattle.dev/play/1) 276 | - [ ] [Play CSS Battle - Target #30](https://cssbattle.dev/play/30) 277 | 278 | The CSS Battles can be tricky! Work through what you can and don't be afraid to look things up. It's OK if you don't complete these on the first try! 279 | 280 | --- 281 | 282 | ## Day #17 - Media Queries, Z-Index, & Pseudo Elements 283 | 284 | ### 📺 Watch 285 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (8:42:30 - 9:27:14) 286 | 287 | ### ⌨️ Practice 288 | 289 | Complete exercises in the Basic CSS Course 290 | - [ ] [Use a Media Query to Change a Variable](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable) 291 | 292 | Play CSS Diner 293 | - [ ] [Play through levels 9-14 of CSS Diner](https://flukeout.github.io/) 294 | 295 | --- 296 | 297 | ## Day #18 - Selectors (In Depth) 298 | 299 | ### 📺 Watch 300 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (9:27:14 - 9:51:01) 301 | 302 | ### ⌨️ Practice 303 | Play CSS Diner 304 | - [ ] [Play through levels 15 - 32 of CSS Diner](https://flukeout.github.io/) 305 | 306 | --- 307 | 308 | ## Day #19 - Review & Project Day 309 | 310 | ### 📖 Review Day 311 | 312 | Review your notes and experiement with code! 313 | 314 | ### ⌨️ Practice 315 | 316 | Create an account on FrontendMentor.io and start working on the Order Summary Component project. Don't be afraid to research things if you get stuck! 317 | - [ ] [Order Sumary Component](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) 318 | 319 | --- 320 | 321 |

Day #20 - Transformations, Transitions, & Animations

322 | 323 | ### 📺 Watch 324 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (9:51:01 - 10:40:53) 325 | 326 | ### ⌨️ Practice 327 | 328 | If you haven't already, take some time to complete the Order Summary component project on Frontend Mentor from day 17 329 | - [ ] [Order Sumary Component](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) 330 | 331 | --- 332 | 333 | ## Day #21 - CSS Variables, Box Shadows, & Semantics 334 | 335 | ### 📺 Watch 336 | [Learn HTML5 & CSS 3 From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) (10:40:53 - 11:24:11) 337 | 338 | ### ⌨️ Practice 339 | 340 | Complete exercises in the Basic CSS Course 341 | - [ ] [Use CSS Variables to Change Several Elements at Once](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once) 342 | - [ ] [Create a Custom CSS Variable](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/create-a-custom-css-variable) 343 | - [ ] [Use a Custom CSS Variable](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-custom-css-variable) 344 | - [ ] [Attach a Fallback Value to a CSS Variable](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable) 345 | 346 | --- 347 | 348 | ## Day #22 - Using Google Chrome Dev Tools 349 | 350 | ### 📺 Watch 351 | [Chrome Dev Tools by FreeCodeCamp](https://www.youtube.com/watch?v=gTVpBbFWry8) (entire video) 352 | 353 | ### ⌨️ Practice 354 | 355 | Complete exercises in the Basic CSS Course 356 | - [ ] [Improve Compatibility with Browsers Fallbacks](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks) 357 | - [ ] [Inherit CSS Variables](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-css-variables) 358 | - [ ] [Change a Variable for a Specific Area](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-a-variable-for-a-specific-area) 359 | 360 | --- 361 | 362 | ## Day #23 - CSS Flexbox 363 | 364 | ### ⌨️ Practice 365 | 366 | Complete exercises in the CSS Flexbox Course 367 | - [ ] [Use display: flex to Position Two Boxes](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes) 368 | - [ ] [Add Flex Superpowers to the Tweet Embed](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embeds) 369 | - [ ] [Use the flex-direction Property to Make a Row](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row) 370 | - [ ] [Apply the flex-direction Property to Create Rows](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed) 371 | - [ ] [Use the flex-direction Property to Make a Column](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column) 372 | - [ ] [Apply the flex-direction Property to Create Columns](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed) 373 | - [ ] [Align Elements Using the justify-content Property](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property) 374 | - [ ] [Use the justify-content Property in the Tweet Embed](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed) 375 | 376 | Play Flexbox Froggy 377 | - [ ] [Start playing Flexbox Froggy and see how far you can get!](https://flexboxfroggy.com/) 378 | 379 | --- 380 | 381 | ## Day #24 - CSS Flexbox 382 | 383 | ### ⌨️ Practice 384 | 385 | Complete exercises in the CSS Flexbox Course 386 | - [ ] [Align Elements Using the align-item Property](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property) 387 | - [ ] [Use the align-items Property in the Tweet Embed](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed) 388 | - [ ] [Use the flex-wrap Property to Wrap a Row or Column](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column) 389 | - [ ] [Use the flex-shrink Property to Shrink Items](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items) 390 | - [ ] [Use the flex-grow Property to Expand Items](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items) 391 | - [ ] [Use the flex-basis Property to Set Initial Size](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item) 392 | - [ ] [Use the flex Shorthand Property](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-shorthand-property) 393 | - [ ] [Use the order Property to Rearrange Items](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items) 394 | - [ ] [Use the align-self Property](https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-align-self-property) 395 | 396 | Play Flexbox Froggy 397 | - [ ] [Continue playing Flexbox Froggy and see how far you can get!](https://flexboxfroggy.com/) 398 | 399 | --- 400 | 401 |

Day #25 - Review & Project Day

402 | 403 | ### 📖 Review Day 404 | 405 | Review your notes and experiement with code! 406 | 407 | ### ⌨️ Practice 408 | 409 | Complete the 3 Column Preview Component project. Don't be afraid to research things if you get stuck! 410 | - [ ] [3 Column Preview Component](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-) 411 | 412 | --- 413 | 414 | ## Day #26 - CSS Grid 415 | 416 | ### ⌨️ Practice 417 | Complete exercises in the CSS Grid Course 418 | - [ ] [Create Your First CSS Grid](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-your-first-css-grid) 419 | - [ ] [Add Columns with grid-template-columns](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/add-columns-with-grid-template-columns) 420 | - [ ] [Add Rows with grid-template-rows](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/add-rows-with-grid-template-rows) 421 | - [ ] [Use CSS Grid Units to Change the Size of Columns and Rows](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows) 422 | - [ ] [Create a Column Gap Using grid-column-gap](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap) 423 | - [ ] [Create a Row Gap using grid-row-gap](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap) 424 | - [ ] [Add Gaps Faster with grid-gap](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/add-gaps-faster-with-grid-gap) 425 | 426 | 427 | Start playing CSS Grid Garden! 428 | - [ ] [Start playing CSS Grid Garden and see how many levels you can complete!](https://cssgridgarden.com/) 429 | 430 | --- 431 | 432 | ## Day #27 - CSS Grid 433 | 434 | ### ⌨️ Practice 435 | Complete exercises in the CSS Grid Course 436 | - [ ] [Use grid-column to Control Spacing](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing) 437 | - [ ] [Use grid-row to Control Spacing](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-row-to-control-spacing) 438 | - [ ] [Align an Item Horizontally Using justify-self](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self) 439 | - [ ] [Align an Item Vertically Using align-self](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/align-an-item-vertically-using-align-self) 440 | - [ ] [Align All Items Horizontally Using justify-items](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items) 441 | - [ ] [Align All Items Vertically Using justify-items](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/align-all-items-vertically-using-align-items) 442 | - [ ] [Divide the Grid Area Into a Template](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/divide-the-grid-into-an-area-template) 443 | - [ ] [Place Items in Grid Areas Using the grid-area Property](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property) 444 | - [ ] [Use grid-area Without Creating an Areas Template](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template) 445 | 446 | Play CSS Grid Garden! 447 | - [ ] [Continue playing CSS Grid Garden and see how many levels you can complete!](https://cssgridgarden.com/) 448 | 449 | --- 450 | 451 | ## Day #28 - CSS Grid 452 | 453 | ### ⌨️ Practice 454 | Complete exercises in the CSS Grid Course 455 | - [ ] [Reduce Repetition Using the Repeat Function](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function) 456 | - [ ] [Limit Item Size Using the minmax Function](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function) 457 | - [ ] [Create Flexible Layouts Using auto-fill](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill) 458 | - [ ] [Create Flexible Layouts Using auto-fit](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit) 459 | - [ ] [Use Media Queries to Create Responsive Layouts](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts) 460 | - [ ] [Create Grids within Grids](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-grids-within-grids) 461 | 462 | Play CSS Grid Garden! 463 | - [ ] [Continue playing CSS Grid Garden and see how many levels you can complete!](https://cssgridgarden.com/) 464 | 465 | --- 466 | 467 | ## Day #29 - Review & Project Day 468 | 469 | ### 📖 Review Day 470 | 471 | Review your notes and experiement with code! 472 | 473 | ### ⌨️ Practice 474 | 475 | Complete the Stats Preview Card Component project. Don't be afraid to research things if you get stuck! 476 | - [ ] [Stats Preview Card Component](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62) 477 | 478 | --- 479 | 480 |

Day #30 - Project Day

481 | 482 | ### ⌨️ Practice 483 | 484 | Complete the Testimonials Grid Section project. Don't be afraid to research things if you get stuck! 485 | - [ ] [Testimonials Grid Section](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7) 486 | 487 | **🎉 Celebrate a job well done!** 488 | 489 | --- 490 | 491 |

👋🏾 Let's Connect

492 | 493 | I would love to hear about your experience with this 30 Day HTML & CSS coding calendar! You can find me on the socials below to share your experience. 494 | 495 | 496 | YouTube Logo Badge 500 | 501 | 502 | Twitter Logo Badge 506 | 507 | 508 | Instagram Logo Badge 512 | 513 | 514 | DevTo Logo Badge 518 | 519 | 520 | Hashnode Logo Badge 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![30 Day Beginner HTML & CSS Coding Calendar Banner](img/30%20Day%20Calendar%20Banner.png) 2 | 3 | # 30 Day Beginner HTML & CSS Coding Calendar 4 | 5 | In this repo you'll find a 30 day challenge of learning HTML and CSS through free resources, exercises, and games. My goal when creating this calendar is to assist new developers by removing the anxiety and uncertainty about where to start with web development and what resources should can be used. The calendar is pre-planned and packed with great resources and information that will help anyone to begin coding with no previous experience. 6 | 7 | **Table of Contents** 8 | 9 | ✨ [How to Use This Calendar](#using-calendar) 10 | 11 | ✨ [Downloading the Calendar](#download-calendar) 12 | 13 | ✨ [Resources Used to Create The Calendar](#resources) 14 | 15 | ✨ [Let's Connect](#connect) 16 | 17 | --- 18 | 19 |

✏️ How to Use This Calendar

20 | 21 | I’m so excited that you’ve decided to jump into the world of web development! This 30 day calendar will take you on a journey of learning, understanding, and practicing the fundamentals of HTML and CSS through free videos, practice exercises, and games that can be found online. 22 | 23 | I recommend this coding calendar to anyone who is interested in pursuing a career in development, and anyone who is on the fence and just wants to test the waters. The technical and coding resources on this calendar have been created by talented minds and are absolutely free to use! I do not own them, but they’re always my go to resources for new developers. Links to all resources can be found below. 24 | 25 | Each day is a little different, but generally, each day will contain watching a video (or portion of a video), and completing an exercise or playing a game to reaffirm what you’ve learned. Coding is a skill that’s best learned hands on. 26 | 27 | The way you use this calendar is really up to you, but here are a few of my considerations and recommendations: 28 | - **Time:** 29 | This calendar spans 30 days. 30 days is 30 days. It doesn’t matter if they’re consecutive or on predetermined days that fit into your schedule. It only matters that you’re learning and practicing, so complete these 30 days in the format that’s best for you! 30 | 31 | - **Journal:** 32 | I highly recommend that you keep a journal while you complete this challenge. I recommend documenting a summary of what you learned during your study session, things you’re having trouble with or don’t understand, and any questions you currently have. As you make your way towards day 30, you may realize you now have the answers to questions you asked in the first few days. It can be a dedicated journal or a simple note in your default Notes app, but be sure to journal. 33 | 34 | - **Where to Go From Here:** 35 | At the end of 30 days, you’ll likely be able to decide if web development is for you. If not, that’s ok! I’m proud of you for taking the challenge and learning a new skill. 36 | 37 | If so, your next steps will likely be to get started with JavaScript. JavaScript is going to add functionality to the beautiful websites that you can now create. Many of the resources used in this calendar also have JavaScript courses/practice exercises you can take. 38 | 39 | I hope that you enjoy the 30 day adventure you’re about to embark on! Feel free to share your progress with me on [Twitter (@bytesofbree)](https://www.twitter.com/bytesofbree). Happy coding! 40 | 41 | ✨ Click the image below to check out the video on YouTube where I discuss the calendar in depth and how I would use it if I had to learn HTML & CSS from the beginning again. 42 | 43 | [![30 Days - Thumbnail](https://user-images.githubusercontent.com/40739624/148301669-e65bd853-4c05-43e4-ae3c-5d534ac3e9e8.png)](https://youtu.be/HDssvUHgpYk) 44 | 45 | 46 |

📅 Downloading the Calendar

47 | 48 | **PDF Format** 49 | 50 | The calendar can be downloaded as a PDF [here](30%20Day%20Beginner%20HTML%20&%20CSS%20Calendar.pdf). All exercises and videos are linked to their respective websites, so feel free to download it or print it! 51 | 52 | **View on the Web** 53 | 54 | If you'd like to view this calendar here on Github, click [here](Calendar.md)! 55 | 56 | --- 57 | 58 |

🌐 Resources Used to Create The Calendar

59 | 60 | **Videos** 61 | 62 | ✨ [Learn HTML & CSS From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc) 63 | 64 | ✨ [Git & Github Crash Course by FreeCodeCamp](https://www.youtube.com/watch?v=RGOj5yH7evk) 65 | 66 | ✨ [Chrome Dev Tools by FreeCodeCamp](https://www.youtube.com/watch?v=gTVpBbFWry8) 67 | 68 | 69 | **Courses** 70 | 71 | ✨ [Basic HTML & HTML5 by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5) 72 | 73 | ✨ [Basic CSS by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#basic-css) 74 | 75 | ✨ [CSS Grid by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-grid) 76 | 77 | ✨ [CSS Flexbox by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox) 78 | 79 | 80 | **Games & Exercises** 81 | 82 | ✨ [CSS Diner](https://flukeout.github.io/) 83 | 84 | ✨ [CSS Battle](https://cssbattle.dev/) 85 | 86 | ✨ [Flexbox Froggy](https://flexboxfroggy.com/) 87 | 88 | ✨ [CSS Grid Garden](https://cssgridgarden.com/) 89 | 90 | ✨ [Frontend Mentor](https://www.frontendmentor.io/) 91 | 92 | ✨ [W3Schools](https://www.w3schools.com/git/exercise.asp) 93 | 94 | --- 95 | 96 |

👋🏾 Let's Connect

97 | 98 | I would love to hear about your experience with this 30 Day HTML & CSS coding calendar! You can find me on the socials below to share your experience. 99 | 100 | 101 | YouTube Logo Badge 105 | 106 | 107 | Twitter Logo Badge 111 | 112 | 113 | Instagram Logo Badge 117 | 118 | 119 | DevTo Logo Badge 123 | 124 | 125 | Hashnode Logo Badge 129 | 130 | -------------------------------------------------------------------------------- /img/30 Day Calendar Banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/breehall/30-Day-HTML-CSS-Coding-Calendar/cfe69129cb0252253c16e4416a332eb6f9d7aeef/img/30 Day Calendar Banner.png -------------------------------------------------------------------------------- /img/Calendar Cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/breehall/30-Day-HTML-CSS-Coding-Calendar/cfe69129cb0252253c16e4416a332eb6f9d7aeef/img/Calendar Cover.png --------------------------------------------------------------------------------