CSS Learning Resources and Stuff

Sonic up and running

Hope this blog post can get you up and running with CSS

Hi there, this blog post about CSS resources and related stuffs that I gathered over time. Hope you my fellow human-being find it beneficial.

-learning stuff

Stuffs to get you up to speed with CSS:
CSS tutorial | HTML5Dog – comprehensive CSS tutorial from noob level to ninja level.
CSS tutorial | Mozilla Developer Network – another comprehensive CSS tutorial.
CSS Diner– a web-based gameto help you learn CSS selectors.
Learn CSS Layout – online thingy to help you learn CSS layout. It assumes you already know what CSS selectors, properties, and values are.
Introduction to CSS | CodeAcademy – web-based hands-on approach CSS tutorial. It assumes you know absolutely nothing about CSS.
Convert a Warm, Cheerful Web Design to HTML and CSS series on converting a web design to a standards-compliant HTML and CSS web page.
Scalable and Modular Architecture for CSS –CSS style guide. You’ll learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows.

-responsive web design stuff

Stuffs to get you up and running with responsive web design:

– First off, what is Responsive web design? Responsive web design is a design approach aimed at developing websites to provide an optimal viewing experience by responding to the user’s behavior and environment based on screen size, platform and orientation. A website designed with responsive web design adapts the layout to the viewing environment by applying fluid, proportion-based grids, flexible images, and CSS3 media queries.

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • CSS media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Web Fundamentals — Google laying out how to making responsive sites, so you can get sites that look good on all screens.
Responsive Web Design: A Visual Guide – a video guide introductory to responsive web design.
MediaQueries– a collection of responsive web designs.
Responsive design articles by Smashing magazine
-Responsive CSS framework: Bootstrap, Zurb Foundation, Pure, Skeleton, Unsemantic

-css reference stuff

Handy reference for all available CSS selectors and properties:
Almanac of CSS Selectors and Properties | CSSTrick
CSS Reference | MDN – exhaustive reference describing every property and selector of CSS.

Tools & Libraries stuff

BearCSS – Bear CSS is a great time saver useful tool. Simply create a HTML document and upload it. Bear CSS will automatically generate a downloadable CSS file based on the HTML elements used.
Bootstrap – Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Can I Use… is a good website for checking which CSS properties are supported in which browsers.
Compass – Open source CSS Authoring Framework.
CSS Deck – free online tool to prototype HTML & CSS
Emmet – HTML and CSS text abbreviation expander.Checkout the documentation and the handy cheat sheet!
Firebug – A must-have web developer tool (for Firefox only)
Font Awesome – The iconic font designed for Bootstrap.
Glue – Glue is a simple command line tool to transform a set of images into a single file so you can easily use CSS sprites technique (load one big image, instead of loading dozens of images) on your website.
Less – CSS extension language which allows variables, mixins and rules nesting. Easier to get into than SASS. It might feel extra complexity at first, but over time you’ll realize the good side of it.
Macaw – a proprietary visual responsive website builders. No Linux version available.
PineGrow Web Designer – a proprietary desktop app for Mac, Windows & Linux that lets you mockup & design webpages with multi-page editing, CSS & LESS styling and components for Bootstrap, Foundation and other frameworks.
Prefixr– free online tool to transforms your CSS into cross-browser friendly syntax. If that property you’ve used needs a particular browser-specific prefix, Prefixr can help you out.
PureCSS – Pure is a set of mobile-first responsive CSS modules that you can use as a basis in every web project.
SASS – another CSS extension language which allows variables, mixins and rules nesting.
Skeleton– Boilerplate for responsive, mobile-friendly development.
TopCoat – Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc.
Web developer toolbar – It adds various web developer tools to a browser. The extension is available for Chrome, Firefox and Opera.
Zurb Foundation – Framework for writing responsive web sites.
960 Grid System – An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Additional stuff

Make your website printable with CSS – Adrian Roselli shows how to leverage responsive web design techniques to make an attractive printable format for your web content.
Practical Typography — an informative online book on typography subject. It’s not CSS specific.
CSS Sprite Technique | CSS-Tricks – CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates.
Styling and Animating Scalable Vector Graphics with CSS | Youtube – Sara Soueidan demonstrates how SVGs can be styled with CSS, and how they can be animated using CSS animations and transitions. SVGs, are the new big thing in web design today, with the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances. Since SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.

Reference:

The Best Way to Learn CSS | Tutsplus
Super useful tools for CSS coding | CatsWhoCode
Next-Generation Responsive Web Design Tools| Smashing Magazine
Responsive Web Design Guidelines and Tutorials | Smashing Magazine
Responsive Web Design: What It Is and How To Use It | Smashing Magazine
Responsive web design | Wikipedia
Github Gist
Summer Immersive 2014 | Github

Advertisements

Tags: , ,

About Ferry T.H.

I'm just your fellow human being.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: