Instructional repo and presentation materials for CSS-based tech talk discussing CSS fundamentals with an emphasis on positioning.
Open the repo in Codespaces. This will open up the code in an online version of VS Code.
In the terminal of the online VS Code instance, type npx serve. It will ask for permissions to install dependencies. Type y to let it.
Once it has installed what it needs, it will automatically run an http server and give you a popup prompt to show in the browser. Click the green "Open in browser" button to allow it (simply navigating to localhost: 3000 won't do anything, as the final url goes through several auth loops and looks very different).
Under the /src directory, there is an html document containing a list of compiled examples to reference. These can be useful to quickly assert how a given combination of rules behaves. It's meant as a look-up tool and not something to modify, though meaningful expansions are always welcome!
Navigate to the /src/exercises folder in the browser and select an exercise html file. They are numbered for your convenience, to reflect the complexity discussed within. Next to each exercise, you will also find a file with the answers for the problems mentioned in the exercises. The solutions include both the necessary modifications in the code as well as a note detailing what is needed to solve the problem.
Note that this is just a simple http server! To see the changes you have made, you need to manually reload the page every time! (Sorry!)