All video tutorials from the site CSS-TRICKS.COM (2011)
Category: Tutorials
- views: 2 281
- date: 15 February 2012
- posted by: auto-im
All video tutorials from the site CSS-TRICKS.COM (2011)
English | m4v 960x720 10.00 fps| MPEG-1 Audio Layer 3 22050Hz | 7.99 GB
Genre: Video Training
All the video tutorials from the site CSS-TRICKS.COM. They reveal the secrets of the various web-design: from the use of css-sprites to use jQuery and bibleotek create a template for CMS WordPress "from scratch". While all the lessons in English, the author explains everything quite clearly.
#1: Converting a Photoshop Mockup (part 1 of 3)
#2: Converting a Photoshop Mockup (part 2 of 3)
#3: Converting a Photoshop Mockup (part 3 of 3)
#5: Columns of Equal Height: Super Simple Two Column Layout
#6: Tools of the Trade: The Mac Software I Use for Web Design
#7: Creating a Three State Menu
#8: CSS Formatting
#9: Starry Night: 3D Background with the Parallax Effect
#10: Fixed Width, Fluid Width & Elastic Width
#11: Working Modularly with PHP
#12: Converting a Photoshop Mockup: Part Two, Episode One
#13: Converting a Photoshop Mockup: Part Two, Episode Two
#14: Converting a Photoshop Mockup: Part Two, Episode Three
#15: Introduction to Firebug
Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for javascript programmers.
#16: Creating the Photoshop Mockup
This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work.
#17: Sliding Doors Button
While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background /videos/images to a single spot of text. When that text grows or shrinks, these overlapping /videos/images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.
#18: Introduction to the Band Website Template
I have recently released a side project called the Band Website Template. This is just a quick tour of it, explaining why it was built and why I think it can be useful for bands and their web designers.
#19: Designing a Unique Page for Twitter Updates
#20: Introduction to jQuery
The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.
#21: Walkthrough of Contact Form
#22: Cutting Clipping Paths
#23: Conditional Stylesheets
#24: Rounded Corners
Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be!
#25: Designing for Wordpress: Part One
#26: Designing for Wordpress: Part Two
#27: Designing for Wordpress: Part Three
#28: Using Wufoo for Web Forms
#29: Google Search for Your Site
#30: Creating and Sending HTML Email
#31: Introduction to Google Analytics
Google Analytics is a free service to track all sorts of information about the visitors to your website. I recently had a weird experience with the Analytics on CSS-Tricks, so I thought it would be a good time to introduce it to folks who might not already know much about it and also share that experience. As with most things, it has its ups and downs, so I introduce an alternative product at the end as well.
#32: Using the Unit PNG Fix
#33: eCommerce Product Page Makeover
#34: Integrating and Customizing Google Maps
#35: Intro to jQuery 2
Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in javascript too!
#36: Current Nav Highlighting: Using PHP to Set the Body ID
One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the URI of the page and create the ID based on that. Nifty trick!
#37: Status, Fluid and Menu Bar Apps
#38: Basics & Tips on Designing for the iPhone
#39: How to Use sIFR 3
#40: How z-index Works
#41: WordPress as a CMS
#42: All About Floats
Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences.
#43: How to Use CSS Sprites
#44: Hodgepodge of WordPress Tricks
#45: Using FoxyCart for eCommerce
FoxyCart is my new favorite eCommerce system. In this screencast we cover the process of signing up and setting up FoxyCart at the most basic level. Then I show some examples of it in use, fully customized.
#46: Domains, DNS, Hosting and Google Apps
#47: CSS Shorthand
There are a handful of CSS attributes that can be combined into a single attribute for coding brevity. I endorse the use of CSS shorthand whenever possible. It saves space and makes code more readable. In this screencast I introduce all of the common ones and go over a few gotchas that can happen when using them.
#48: Skinning phpBB
Creating a completely custom theme for the popular forums software phpBB would be a monster job. Fortunately, to get up and running quickly, we can simply wrap a default installation of phpBB into the skin of an existing site pretty easily. We do just that in this screencast, and work out the kinks that pop up.
#49: Hodgepodge of Photoshop Tricks
#50: Building a Customized and Dynamic Ordering Form
In this screencast I walk through an example feature I am building for a real-life client who needed some very specific functionality built into a page. It is an ordering process that needs to check for a valid zip code, and then do a bunch of custom calculations based on quantities, shipping costs, etc. Both jQuery and PHP are used to do the heavy lifting.
#51: A Lesson Learned in Accessibility
Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right.
#52: Building a Print Stylesheet
#53: Customizing PayPal Forms, Buttons, and Headers
Go through how to create a Buy Now button, which uses a custom email address, has a custom header, custom thank you page, and is custom styled.
#54: Introduction to FLIR
Introducing FLIR, comparing it to sIFR, and installing it on a WordPress site.
#55: Adding RSS Content with SimplePie
We build a really simple site that grabs content from multiple RSS feeds, smushes them together, and displays them using our own custom markup.
#56: Integrating FoxyCart and WordPress
FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CMS. In this screencast, we integrate it with WordPress.
#57: Using CSS3
The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement.
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.
#59: Embedding Audio
Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods.
#60: AJAX Refreshing RSS Content
In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuery) to refresh that content without requiring a page refresh.
#61: Basic Table Styling with CSS
This screencast goes over when tables are appropriate in web design, the markup that creates them, things you should know about them, basic styling with CSS, and a little jQuery bonus stuff.
#62: Advanced Form Styling & Functionality
This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins.
#63: On Screencasting
This is somewhat of a behind the scenes look at how I create and distribute the screencast. I go over the hardware and software I use, how it gets stitched together, and the sizes/formats it gets put into and why.
#64: Building a Photo Gallery
This photo gallery will automatically build itself from a directory of images, including subdirectories and the images inside them. Images open in a nice looking jQuery lightbox.
#65: Advanced Uses for Custom Fields in WordPress
More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Learn how to use them to do expand your WordPress theme design skills.
#66: Table Styling 2, Fixed Header and Highlighting
Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever javascript.
Goes through the process of creating a versatile and expandable jQuery plugin from an existing idea and code.
#68: Think Geek Background Fade Technique
#69: First Ten Minutes with TypeKit
Implementing nice custom fonts incredibly quickly with the brand new TypeKit.
#70: Random Pet Peeves
I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS.
#71: Building a Website (1 of 3): Photoshop Mockup
This is part 1 of a three part series on building a website from scratch. In this first episode, we start from absolute scratch in Photoshop and design the web layout.
#72: Building a Website (2 of 3): HTML/CSS Conversion
This is part 2 of the three part series on building a website. In this episode, we take the Photoshop file we have done and slice it up into HTML/CSS.
#73: Building a Website (3 of 3): WordPress Theme
This is part 3 of this series on building a website, we take the HTML/CSS we already have created and convert it into a WordPress theme.
#74: Editable CSS3 Image Gallery
A photo gallery is built with fun visual flairs via HTML5, CSS3, and jQuery. Then made editable with PageLime.
#75: How Not To Design a Checkout
A bit of a venting session as I struggle through a checkout process.
#76: A Tour of jQuery on a Live Site
I walk through a real website we just launched at work and show off how jQuery is used in all sorts of different capacities. From small embellishments to larger interactive areas to core functionality.
#77: Styling an Individual Article
Web design can learn a lot from print design, where individual articles are styled to meet, enhance, and better serve the content. I do this on my personal site using WordPress and the Art Direction plugin.
#78: On Web Advertising
#79: Complete/Non-Queuing Animations with jQuery
We look at some ways we can ensure that an animation that occurs on a mouse hover completes a full cycle without stopping short or queuing up.
#80: Regarding Wheel Invention
This screencast takes a look at a few examples that have come up for me recently. The answer, I propose, is like most things in life: somewhere in the middle.
#81: AJAXing a WordPress Theme
#82: CSS Image Switcher
#83: Thoughts on SEO
#84: Site Walkthrough of chris-mcgarry.com
I built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loaded comes up (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls of Flash.
#85: Best Practices with Dynamic Content
#86: First Moments with MAMP
With MAMP, you can run all the server side technologies you need to (PHP, MySQL, Apache) locally, so you can develop locally before pushing out to a real web server.
#87: Moving Up with MAMP
We take a WordPress installation that is running locally with MAMP and move it to a live website.
#88: Intro to Compass/Sass
#89: Organizing a Photoshop Document
#90: Simple TextMate Tips
#91: The WordPress Loop
Learn about how the loop works. Write your own queries. Run multiple loops. Implement your own pageination, and more.
#92: Code Walkthrough of Drawing Table
Look at each feature of a mini one-page jQuery-based app and see the markup and javascript that makes that feature work.
#93: CSS3 Slideup Boxes
CSS3 transitions are used to make these cool boxes where, on hover, more information slides up into place.
#94: Intro to Pseudo Elements
Add elements to the page without changing the markup. A semantic designers dream.
#95: A Tale of Border Gradients
Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way.
#96: localStorage for Forms
HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This can be used with "progressive enhancement" in mind, doing things to enhance experiences but not be required. In this screencast we'll look at how to save the data on a form (before submission) so in case the browser window closed or the computer crashed or something, the data would not be lost.
We need your support!
Make a donation to help us stay online
Bitcoin (BTC)
bc1q08g9d22cxkawsjlf8etuek2pc9n2a3hs4cdrld
Bitcoin Cash (BCH)
qqvwexzhvgauxq2apgc4j0ewvcak6hh6lsnzmvtkem
Ethereum (ETH)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
Litecoin (LTC)
ltc1qt6g2trfv9tjs4qj68sqc4uf0ukvc9jpnsyt59u
USDT (ERC20)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
USDT (TRC20)
TYdPNrz7v1P9riWBWZ317oBgJueheGjATm
Information |
|||
 |
Users of GUESTS are not allowed to comment this publication. | ||