CSS-Tricks Screencasts
Summary: CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability.
- Visit Website
- RSS
- Artist: Chris Coyier
- Copyright: Copyright CSS-Tricks.com
Podcasts:
Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It’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 …
Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It'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 the formula in that font then turning on ligatures. On the web, the formula is in text and you apply the font via @font-face and a JavaScript polyfill for ligature support. Browser support goes back even to IE 6. Links …
LiveReload 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 …
LiveReload 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 switch applications and manually refresh, which is awkward and prone to breaking concentration. Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or …
There 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 …
There 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 elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people use virtual machines to do that testing, but that can be resource intensive in more ways than one. BrowserStack is the holy grail of cross-browser …
In 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 …
In 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 to use the individual images. Pseudo elements are also used to help maintain accessibility. Links from the video: SpriteCow …
Just 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.…
Just 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.…
The 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't fill the area on wide screens and is too big on narrow screens, breaking outside the content area. In this video we'll cover how to add jQuery to a WordPress theme, then download the jQuery plugin FitVids.js and integrate it …
The 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’t …
In which I show and explain the very basics of what "responsive web design" has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.…
In which I show and explain the very basics of what “responsive web design” has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.…
You are probably pretty aware of why using version control is a good thing. In case you aren't, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a project onto GitHub. If you are like me, you don't particularly enjoy "the command line", but between that and a Mac GUI app, we manage to get it done. Links from the Video: GitHub Tower Slide to Unlock Tutorial - …
