Archived from Spring 2014, still being updated

HTML/CSS/JS Intro

We put together a rough screencast which walks you through the basics of the evolution of this repository, building out an HTML page with CSS styling and some JavaScript animation from scratch.

Linked Version History of this Repository

In the video, I use SublimeText to open all the versions of the repository as a single project, with each commit/version in a folder renamed as a letter A-S. This is explained more in the screencast, but for ease of reference, here's the linked list of commits by their associated letter in the screencast.

1. A, commit 0818de035c816372514613b8df00650afaa60e89: Boilerplate for an HTML file

2. B, commit ad3286ffdb63aaa34d6585425d39492a510ab55d: Adding the head tag

3. C, commit ced675cd16a21097797032b4dff6f77c7171c705: Adding the body

4. D, commit f3948536ee312f7d1d966a6f534de98eea44cbe8: Adding a div

5. E, commit fea5b00de88553c853201f989483e90cc3fe5987: Giving our div a height, width, and color within the HTML page

6. F, commit eb232ecee1cc1d9a44329d307a9635313f2493e1: Adjusting the position of our blue box

7. G, commit cd94d8f168009d99647e36277c1276c704565a52: Introducing a CSS transform

8. H, commit a8d1df55cad2fb7468aa205240fbd7bae3ebbd29: Introducing a CSS transform

9. I, commit 37290dda0fda6a9aa85f7f5fba3aa136f2f60ce1: Pulling our CSS into an external stylesheet

10. J, commit 9e65e87cb99758674efe15103b330cb976ac0332: Introducing pseudo selectors (handling events in CSS)

11. K, commit 80e1a5762b0ff42edd40c5ab21fb87fa517310ff: Introducing CSS transitions (a little control over time)

12. L, commit 7bf195bfb4d7a613cecf1388f6abe7fd879796d8: Introducing CSS transforms

13. M, commit 5cd029829860afc0f41b2cb0c2c070d8b9e44099: Introducing the id attribute

14. N, commit 9ef9a2d0840e508cee7c43fc785590a5847e2d1a: Tweaking positioning and nested divs

15. O, commit 0db794d78e0b5460cc6b04941c7c2a9a2bc88b6f: Introducing translate and more pseudo selectors

16. P, commit 4231f48aac5fde1645481d7eb72bb5ae306aeb09: Re-constructing our page via JavaScript

17. Q, commit 1286fe01304be70a4e9e0c2122e5837081d688f0: Pulling our inline JavaScript into an external file and changing a CSS attribute by JS

18. R, commit cb5ba4a791d73a1738fa9a9442d156f879651484: Animating motion of the square using JavaScript and a time via setInterval

19. S, commit 1753994a9d97411f539a797dbe366b2db46026f0: Changing the structure of using moveSquare so the animation is observable; making comments log to the console