CSS
Here, you'll be finding guide code snippets and exercises for all the concepts discussed throughout the book.
Guide Snippets
You can access these by navigating to the guide-snippets folder in this repository, where you'll find an HTML file and a CSS one.
You will find that there are multiple things commented out in both of these files. They are designed specifically for you to be able to check out how different concepts work, all in the same file!
While you go through the book, go ahead and check each chapter's guide code snippets. You will find them by looking at the first line of each comment, and selecting the one you're currently practicing.
Here are a few tips that you can keep in mind both while you navigate this book, and further in your coding career:
- Finding each chapter -> You can use the CTRL + F shortcut and write your current chapter in the prompt box that pops up, so that you can find the said chapter faster.
- Erasing comments -> It is important to remove the comments around the code pertaining to the chapter you're at, so that you can see exactly how it functions. There is no native way to do that faster, but you can easily set that up yourself. If you're using VSCode, you can press CTRL + SHIFT + P and search up 'Preferences: Open keyboard shortcuts'. Select that and go ahead and open 'Add line comment', and follow the instructions to set up your specific shortcut. If you'd like a suggestion of a shortcut, I use CTRL + E, since it is both easily accessible and doesn't have any other major function in VSCode. Now, by using that shortcut, you can easily both remove and add comments from our guide snippets.
Additional explanations:
- Selectors - you will find additional content to the book, namely some properties inside the selectors in the CSS code. That is intentional! You can now go ahead and run the Selectors code from the HTML with each specific selector from the CSS code, to see how each selector makes the HTML template react. Don't worry about the property for now, just know it's supposed to color the object it selects red!
Exercises
Go to the ./exercises folder to access exercises for all of the categories provided in the book. Find the most important applications of the content you have learned to the way CSS is used in real-world projects!
The intention is that you solve them linearly, from the first chapter all the way to the last. Later exercises include concepts covered in previous ones.
Do note that, for most of the exercises, there is no one correct solution, there being multiple ways that can be applied in order to realize a certain action. Note that the solutions provided are just one of those ways, and, if your code works as intended, it shall be considered correct as well, even if it does not match the provided solution!