Here are some resources and tools that will help you as you go through the course.

Code Checkpoints -- this is a GitHub repo I created that contains a version of the project files in the state they should be at the beginning of each section in the course, and at the very end. If you feel like something in your files is different than what you're seeing in the videos, you can refer to the files here to see what they should look like.

Searchable Transcripts -- another GitHub repo that contains the scripts for what I say in all the videos in the course (it may not always be word for word, but should be pretty close). This way, if you need to find a specific point in the course where I talk about a specific term or property, you will be able to find it more easily.

The Figma Design for the Basic website -- This is also linked in the "3. Basic Website Setup" section where you'll be working with the design, but wanted to link it here as well for your convenience ⬇️

Other resources

Here are some other resources and links that will help you throughout the course. Some of them are "Course Links" that you'll need to go to as part of the course, and others are "Additional Reading" on topics if you want to learn more outside this course.

Learn HTML and CSS for free

If you need to brush up on the basics of web development before going through this course, here are some free places that you can learn HTML and CSS:

• The Odin Project - Foundations
• FreeCodeCamp
• Scrimba - Learn HTML & CSS
• Scrimba - Crash Course in HTML & CSS by Kevin Powell
• Dave Gray - HTML Full Course for Beginners
• Dave Gray - CSS Full Course for Beginners

BASIC Website Setup

Course Link:

• Real Favicon Generator -- You'll need to use this to get the favicon code and image files for your website.

Global Styles

Course Links:

• Google Fonts: Source Sans 3 -- You'll need this to load the Source Sans font on the website.
• Fluid Typography Calculator -- Great tool that I use frequently in the course to generate fluidly responsive font sizing with the clamp() function.
• Hiding an element visually by Accessibility Developer Guide -- Where you can copy the CSS styles for a "visually-hidden" class to add to screen-reader-only elements.

Additional Reading:

• Regarding search engine optimisation, is it okay to have multiple headings on level 1? by Accessibility Developer Guide -- This whole website is super helpful, and this article talks a bit more about how to handle hidden h-tags to make your website more screen-reader friendly.

Hero

Additional Reading:

• An Interactive Guide to CSS Transitions by Josh Comeau -- Josh is really good at explaining in-depth CSS features and principles. This article has some fantastic interactive widgets that help visually explain what different transitions look like.

Testimonial

Course Links:

• TinyPNG.com -- I use this to optimize my JPG and PNG files.
• blockquote element at MDN -- MDN is generally the first place I go to look up anything HTML or CSS related.
• blockquote at HTML Spec -- I went with the HTML Spec's blockquote approach, as I assume that it's more authoritative than MDN.
• srcset element at MDN -- Where we got the markup example for displaying 1x, 2x, or 3x image options.

Full-width CTA

Course Link:

• linear-gradient() at MDN -- For example code on writing CSS linear-gradients.