HTML and CSS Handbook (Required)
by Jon Duckett
Each page of this book introduces a new topic in a simple, visual way with straightforward explanations accompanied by bite-sized code samples. At the end of each chapter there is an in-depth example that puts together the techniques it has covered.
- Official Website: http://www.htmlandcssbook.com/
- Amazon: amazon.com
- Electronic Version: Haggerty Library.
- Chapter PPT slideshows
Amazon Student
Amazon Student members receive benefits such as six months of FREE Two-Day Shipping with Amazon Prime, and e-mail alerts for discounts and promotions. Current Amazon Prime members can also join the program. Discounts and promotions will be e-mailed to your Amazon.com e-mail account or made available on the Amazon Student membership page.
Other Great Books
SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
Links
| Title | Category | Description |
|---|---|---|
| W3 Schools HTML5 | HTML | HTML5 is The New HTML Standard |
| Mozilla Developer Network | HTML | Web Technologies and Documentation |
| HTML Validator | HTML | This validator checks the markup validity of Web documents |
| Chrome Extension: Validity | HTML | Validity can be used to quickly validate your HTML documents from the address bar |
| 30 HTML Best Practices for Beginners | HTML CSS | If you've one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker! |
| Dive Into HTML5 | HTML | Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards |
| HTML5 Doctor | HTML | Helping you implement HTML5 |
| This is Responsive | HTML CSS | Patterns, resources and news for creating responsive web experiences |
| W3 Schools CSS3 | CSS | CSS3 is the latest standard for CSS |
| CSS Lint | CSS | CSS Lint is an open source CSS code quality tool |
| CSS Reset | CSS | Eric Meyer's Reset Stylesheet |
| CSS3 Generator | CSS | Geneate shadow, radius, gradient and a bunch of other CSS3 code with this graphical interface |
| CSS Gradient Editor | CSS | Quickly generate CSS gradients |
| Virtuo Soft Gradient Generator | CSS | CSS gradient generator GUI |
| Font Squirrel | CSS Fonts | Web ready fonts for your website |
| FontPrep | CSS Fonts | Mac OSX Web Font Prep App (FREE) |
| Google Webfonts | CSS Fonts | Google's hosted font library |
| Font Family Reunion | CSS Fonts | Compatibility tables for default local fonts |
| FontAwesome | CSS Icon Fonts | The iconic font designed for Bootstrap |
| Genericons | CSS Icon Fonts | free, GPL, flexible icon font |
| Singularity | CSS | Responsive Grid System |
| SUSY | CSS | Responsive Grids for Compass |
| Responsive Slides | JS | ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container |
| jQuery Cycle | JS | The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects |
| FancyBox | JS | Add zooming functionality for images, html content and multi-media on your webpages |
| prettyPhoto | JS | prettyPhoto is a jQuery Lightbox clone (support: videos, flash, YouTube, iframes and ajax) |
| Magnific Popup | JS | Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. |
| sidr | JS | Plugin for creating side menus |
| SuperHeroJS | JS | Creating, testing and maintaining JavaScript - articles, videos and presentations |
| Balsamiq Mockups | Wire-framing | Using Mockups feels like drawing, but because it's digital, you can tweak and rearrange easily |
| Balsamiq UX Template | Wire-framing | Template is made for UI designers using Balsamiq Mockups that want to create polished, client-ready presentation decks |
| Style Tiles | Art Direction | Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web |
| Visual Inventory | Art Direction | A design deliverable for the post-PSD era of responsive design |
| Element Collages | Art Direction | An abstract way to document design. |
| Adobe Kuler | Color | Color wheel and inspiration tool |
| HTML Color Codes | Color | Get HTML color codes, Hex color codes, RGB and HSL values! |
| Color Code | Color | Find your color scheme |
| The Psychology of Color | Color | A Guide For Designers |
| FlatUIColor | Color | The online resource Flat UI Colors is a great place to start when attempting to focus your creative efforts on flat color schemes |
| Subtle Patterns | Patterns | Free high quality patterns for your next web project |
| DevTools Code School | Debug | Explore and master Chrome Dev Tools |
| Miro Video Converter | Video | Convert your video file format, for free |
| HandBrake | Video | HandBrake is an open-source, GPL-licensed, multiplatform, multithreaded video transcoder, available for MacOS X, Linux and Windows |
| PHP Mailer Class | PHP | Email form information made easy |
| Bootstrap | Framework | The most popular front-end framework for developing responsive, mobile first projects on the web |
| PureCSS | Framework | A set of small, responsive CSS modules that you can use in every web project |
| Project Kickoff | Project Management | How to Get Your Web Development Projects Off to a Good Start |
| Client Screener | Project Management | Screener for ferreting out whether you’re talking to the right clients or not |
| Sketch Plugins | Sketch | A list of Sketch plugins hosted at GitHub, in no particular order. |
| Day Player | Sketch | A collection of Sketch Plugins for creating placeholder images. |
| Content Generator | Sketch | Sketch generator allows you quickly create dummy data such as avatars, names, geo location data etc. |
Delicious Links
A collection of web tools, tutorials, and helpful links.
| Owner | Link |
|---|---|
| Phil Sinatra | delicious.com/philsinatra |
| Jervis Thompson | delicious.com/jervo/wbdv240 |
GitHub
Codpen
Additional Helpful Links
Photoshop For Web Designers
Tuts+ put together a free Photoshop course showing the process of designing a web page in Photoshop. You can review all 26 videos for FREE!
10 Hand-Picked Tutorials for Beginning Web Designers
So you’re starting to show interest in web design, but are having trouble figuring out where to start? Want to create awesome websites, learn how to code HTML/CSS, and learn about web standards and the user experience? If so, we have a list of hand-picked Envato tutorials that should get you started on your journey!
Beautiful Code
var designers = 'Designers often get a bad rap for their code.'; var engineers = 'Many engineering teams are wary of letting designers touch production code.'; // But it's essential for designers to code their own design work. var harmony? = eval(designers + engineers);
As designers, we're experts at making software simple and easy for customers to use, and we can do the same with the code we hand off to clients and engineers.
What Beautiful HTML Looks Like
