Images

Project setup Paths

Links
Text Elements
Special
Characters

Lists
Review Day Review Day Basic CSS Review Day
Tables Developing a Selectors
Complete Full Website Complete Intro to CSS Complete
exercises for Forms with HTML exercises for CSS exercises for
Links & Images Inputs Inheritance Borders & IDs
Code
Formatting

Display
Working with Review Day The Box Model Styling and
Colors Browser Styles Git Properties Gradients
Complete Display (cont.)
Units of exercises for Typography & Styling and Github
Font Styling Positioning
Measure in CSS CSS Properties Background
Specificity Styling

Media Queries Transformations CSS Variables

Z-Index CSS Selectors Review Day Transitions Using Google
Box Shadows Chrome Dev CSS Flexbox
(in depth)
Pseudo Project Day Animations Tools
Semantics
Elements
Project Cleanup

Review Day Project Day

Review Day
CSS Flexbox Project Day CSS Grid CSS Grid CSS Grid
Project Day Celebrate a
Job Well Done!
Watch Learn HTML & CSS From Scratch (00:00 - 51:16) Watch Learn HTML & CSS From Scratch (51:17 - 1:38:58)
Complete exercises in the Basic HTML & HTML5 Course Complete exercises in the Basic HTML & HTML5 Course
Say Hello to HTML Elements Uncomment HTML
Headline with <h2> Element Comment Out HTML
Inform with the <p> Element Introduction to HTML5
Fill in the Blank with Placeholder Text Add Images to Your Website
Delete HTML Elements

Review Day: Review your notes and experiment! Watch Learn HTML & CSS From Scratch (1:38:58 - 2:30:15)
Complete exercises in the Basic HTML & HTML5 Course Complete exercises in the Basic HTML & HTML5 Course
Link to External Pages with Anchor Elements Create a Bulleted Unordered List
Link to Internal Sections of a Page with Anchor Elements Create an Ordered List
Nest as Anchor Element within a Paragraph Create a Text Field
Make Dead Links Using the Hash Symbol Add Placeholder Text to a Text Field
Turn an Image into a Link

Watch Learn HTML & CSS From Scratch (2:30:15 - 3:09:42) Complete exercises in the Basic HTML & HTML5 Course
Create a Set of Radio Buttons
Complete exercises in the Basic HTML & HTML5 Course
Create a Set of Checkboxes
Create a Form Element
Use the Value Attribute with Radio Buttons & Checkboxes
Add a Submit Button to a Form Check Radio Buttons and Checkboxes by Default
Use HTML5 to Require a Field Nest Many Elements within a Single <div> Element
Declare the Doctype of an HTML Document
Define the Head and Body of an HTML Document

Watch Learn HTML & CSS From Scratch (3:09:42 - 3:52:27) Watch Learn HTML & CSS From Scratch (3:52:27 - 4:27:33)
Complete exercises in the Basic CSS Course Complete exercises in the Basic CSS Course
Change the Color of Text Set the Font Family of an Element
Use CSS Selectors to Style Elements Import a Google Font
Use a CSS Class to Style an Element Specify How Google Fonts Should Degrade
Style Multiple Elements with a CSS Class Size Your Images
Change the Font Size of an Element Add Borders Around Your Elements
Review Day: Review your notes and experiment! Watch Learn HTML & CSS From Scratch (4:27:33 - 5:19:14)
Complete exercises in the Basic CSS Course Complete exercises in the Basic CSS Course
Add Rounded Corners with border-radius Use Hex Codes for Specific Colors
Use Hex Codes to Mix Colors
Make Circular Images with a border-radius
Use Abbreviated Hex Codes
Give a Background Color to a <div> Element
Use RGB Values to Color Elements
Set the ID on an Element Use RGB to Mix Colors
Use the ID Attribute to Style an Element Understand the Absolute vs. Relative Units

Complete exercises in the Basic CSS Course Watch Learn HTML & CSS From Scratch (5:19:14 - 6:04:31)
Use Attribute Selectors to Style Elements Free Work Day!
Inherit Styles of the Body Elements Take time to explore and experiment on your own! Explore
the questions you've noted in your journal and try to find
Prioritize One Style Over Another
the answers. Work on something that's interesting to you.
Override Styles in Subsequent CSS When all else fails, take an existing website and try to
Override Class Declarations by Styling ID Attributes replicate it on your own.
Override Class Declarations with Inline Styles
Override All Other Styles by Using Important

Watch Learn HTML & CSS From Scratch (6:04:31 - 7:06:46) Watch Git & Github Crash Course (entire video)
Complete exercises in the Basic CSS Course Create your own Github profile
Adjust the Padding of an Element Complete the Hello World Github Exercise
Adjust the Margin of an Element
Add a Negative Margin to an Element
Add Different Padding to Each Side of an Element
Add Different Margins to Each Side of an Element
Use Clockwise Notation to Specify Padding of an Element
Use Clockwise Notation to Specify Margin of an Element

Watch Learn HTML & CSS From Scratch (7:06:46 - 7:47:18) Watch Learn HTML & CSS From Scratch (7:47:18 - 8:42:30)
Work through the Github exercises on W3Schools to get Play CSS Battle - Target #1
familiar with Git commands Play CSS Battle - Target #30
Play CSS Diner: Levels 1 - 8 *Note: 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!
Watch Learn HTML & CSS From Scratch (8:42:30 - 9:27:14) Watch Learn HTML & CSS From Scratch (9:27:14 - 9:51:01)
Complete exercises in the Basic CSS Course Play CSS Diner: Levels 15-32
Use a Media Query to Change a Variable
Play CSS Diner: Levels 9 - 14

Project Day - Order Summary Component Watch Learn HTML & CSS From Scratch (9:51:01 - 10:40:53)
Create an account on FrontendMentor.io and start working Project Day - Order Summary Component
on the Order Summary Component project. Don't be afraid to Take some time to finish up the Order Summary Component
research things if you get stuck! project if you weren't able to finish it on Day 19.

Watch Learn HTML & CSS From Scratch (10:40:53 - 11:24:11) Watch Chrome Dev Tools - A Crash Course (entire video)
You completed the HTML & CSS From Scratch Course! Complete exercises in the Basic CSS Course
Complete exercises in the Basic CSS Course Improve Compatibility with Browsers Fallbacks
Use CSS Variables to Change Several Elements at Once Inherit CSS Variables
Create a Custom CSS Variable Change a Variable for a Specific Area
Use a Custom CSS Variable
Attach a Fallback Value to a CSS Variable

Complete exercises in the CSS Flexbox Course

Complete exercises in the CSS Flexbox Course
Use display: flex to Position Two Boxes
Align Elements Using the align-item Property
Add Flex Superpowers to the Tweet Embed Use the align-items Property in the Tweet Embed
Use the flex-direction Property to Make a Row Use the flex-wrap Property to Wrap a Row or Column
Apply the flex-direction Property to Create Rows Use the flex-shrink Property to Shrink Items
Use the flex-direction Property to Make a Column Use the flex-grow Property to Expand Items
Apply the flex-direction Property to Create Columns Use the flex-basis Property to Set Initial Size
Use the flex Shorthand Property
Align Elements Using the justify-content Property
Use the order Property to Rearrange Items
Use the justify-content Property in the Tweet Embed
Use the align-self Property
Start playing Flexbox Froggy and play as far as you can!
Continue playing Flexbox Froggy and see how far you get!
Project Day - 3 Column Preview Component Complete exercises in the CSS Grid Course
Complete the 3 Column Preview Component on Create Your First CSS Grid
FrontendMasters.io. Don't be afraid to research things if Add Columns with grid-template-columns
you get stuck!
Add Rows with grid-template-rows
Use CSS Grid Units to Change the Size of Columns and Rows
Create a Column Gap Using grid-column-gap
Create a Row Gap using grid-row-gap
Add Gaps Faster with grid-gap
Start playing CSS Grid Garden and play as far as you can!

Complete exercises in the CSS Grid Course Complete exercises in the CSS Grid Course
Use grid-column to Control Spacing
Reduce Repetition Using the Repeat Function
Use grid-row to Control Spacing
Limit Item Size Using the minmax Function
Align an Item Horizontally Using justify-self
Create Flexible Layouts Using auto-fill
Align an Item Vertically Using align-self
Create Flexible Layouts Using auto-fit
Align All Items Horizontally Using justify-items
Use Media Queries to Create Responsive Layouts
Align All Items Vertically Using justify-items
Create Grids within Grids
Divide the Grid Area Into a Template
Continue playing CSS Grid Garden and play as far as you can!
Place Items in Grid Areas Using the grid-area Property
Use grid-area Without Creating an Areas Template
Continue playing CSS Grid Garden and play as far as you can!

Project Day - Stats Preview Card Component Project Day - Testimonials Grid Section
Complete the Stats Preview Card Component on Complete the Testimonials Grid Section on
FrontendMasters.io. Don't be afraid to research things if FrontendMasters.io. Don't be afraid to research things if
you get stuck! you get stuck!
Celebrate a job well done!
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.
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.
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. The way you use this calendar is really up to you, but here are a few of my considerations and
recommendations:
Time
This calendar spans 30 days. 30 days is 30 days. It doesn’t matter if they’re consecutive or on days that fit
your schedule. It only matters that you’re learning and practicing, so complete these 30 days in the format
that’s best for you!
Journaling
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.
Where to Go From Here
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.
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.
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). Happy coding!
Videos Thank you so much to the
amazing creators that have
1 Learn HTML & CSS From Scratch by FreeCodeCamp
https://www.youtube.com/watch?v=mU6anWqZJcc created these resources and are
sharing them at no charge! Be
2 Git and Github Crash Course by FreeCodeCamp
sure to follow and support
https://www.youtube.com/watch?v=gTVpBbFWry8
them!
3 Chrome Dev Tools by FreeCodeCamp
https://www.youtube.com/watch?v=RGOj5yH7evk

Courses Let's Connect

4 Basic HTML & HTML5 I would love to hear about your
https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5 experience with this 30 Day
5 Basic CSS HTML & CSS coding calendar! You
https://www.freecodecamp.org/learn/responsive-web-design/#basic-css can find me on the socials
below to share your experience.
6 CSS Flexbox
https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox @bytesofbree
7 CSS Grid @bytesofbree
https://www.freecodecamp.org/learn/responsive-web-design/#css-grid
youtube.com/c/breehall
Games & Practice
8 CSS Diner 13 W3Schools
https://flukeout.github.io/ https://www.w3schools.com/git/ Find this info and more on
exercise.asp Github and on my blog!
9 Flexbox Froggy
https://flexboxfroggy.com/ github.com/breehall/30-Day-
10 CSS Grid Garden HTML-CSS-Coding-Calendar
https://cssgridgarden.com/
bytesofbree.hashnode.dev/
11 CSS Battle
https://cssbattle.dev/ dev.to/bytesofbree
12 Frontend Mentor
https://www.frontendmentor.io/