CSS-Tricks Screencasts

pThere is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in hellip;/p

pThis is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to #8220;nudge#8221; and leaves the element#8217;s original position in the page flow. Absolute and fixed allow for exact placement of elements and hellip;/p

pIn this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven#8217;t had much experience with this, so forgive me if it#8217;s a bit rough. /p

pWe hellip;/p

pChartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It#8217;s as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out hellip;/p

pa href=http://livereload.com/ rel=nofollow noopenerLiveReload/a is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to hellip;/p

pThere are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive hellip;/p

pIn which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed hellip;/p

pJust save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.hellip;/p

pThe default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn#8217;t hellip;/p

pIn which I show and explain the very basics of what #8220;responsive web design#8221; has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.hellip;/p