Resources | Wenmin Chen - Boston Freelance Web Developer & Designer

Resources

Favorite web design & development resources

Wordpress resources

Genesis Framework is a popular framework by StudioPress for developing Wordpress sites. It comes with SEO optimized code and airtight security features.

Local by Flywheel is a free local Wordpress development tool that makes setting up local WordPress installs a breeze. It allows you to manage multiple local installs from a single dashboard, and save them as blueprints for later use. It's definitely my favorite local Wordpress development tool so far.

Learn Web Design & Development (free)

Learn to Code HTML & CSS covers a variety of web design and development topics from beginning to advanced levels. The explainations are clear and the site is highly organized.

Usability.gov is a terrific resource for user experience best practices and strategies.

HackDesign is an easy to follow, organized design course for budding UXers and is made up of best resources out there on the web. You can sign up to receive a design lesson in your inbox each week, hand crafted by a design pro.

Odin Project is a complete curriculum for learning web development consisting of best online resources. The focus is on projects so you can learn by doing. It also offers opportunities to connect with other students so you don't have to learn on your own.

Code Academy offers free online courses that teach you the basics of a number of programming languages.

Web Design Tools

Jonathan Snook’s Colour Contrast Check allows you to input foreground and background colors and provides you immediate feedback by showing what the chosen color combination looks like and whether it passes the Web Content Accessibility Guideline (WCAG) 2.0 contrast ratio formula.

Web Development Tools

HTML 5 Outliner is a tool for visualizing the outline generated by HTML5 file.

Markup validation service is a tool for validating HTML code.

CSS validation service is a tool for validating CSS code.

XML Sitemap is a tool for creating sitemaps that are used by the major search engines to index your webpages accurately.

Screenfly is a tool for testing your website on any screen size including desktops, tablets, televisions, and mobile phones.

WAVE is a web accessibility evaluation tool.

Google PageSpeed Insights is a tool that shows the real-world performance data of a web page for mobile and desktop devices and provides suggestions on areas of improvement.

Google Mobile-Friendly Test is a tool for testing how easily a site visitor can use your webpage on a mobile device.

Resizemybrowser is a simple browser window resize app for Web designers and developers.

Real Favicon Generator is a tool for generating favicons that work on most browsers and platforms.

CSS Resources

CSS-Tricks is a blog created and maintained by Chris Coyier about various web design and development topics.

Autoprefixer CSS online is a tool that makes your stylesheet cross-browser compatible by adding necessary browser specific prefixes.

Eric Meyer CSS Resets is a set of CSS rules that resets the styling of HTML elements to a consistent baseline to ensure that each web browser starts with the same set of display defaults.

Normalize.css is a HTML5-ready alternative to CSS resets. It precisely targets only the styles that need normalizing.

jQuery plugins

Masonry is an open source, jQuery plugin used to create Masonry layout (a.k.a. Pinterest style layout). Masonry differs from other grid layouts in that it doesn’t have fixed height rows. It optimizes the use of space by minimizing vertical gaps between elements of varying height.

Isotope is a highly customizable jQuery plugin used for filtering and sorting.

Galleriffic is a popular, easy-to-use jQuery photo gallery and slideshow plugin optimized to handle high volumes of photos.

Fancybox is a tool that displays images, content, and multi-media in a "lightbox" that floats overtop of webpages.

Typography

Font Awesome gives you scalable vector icons that can instantly be customized using CSS.

Google Fonts are free, open-source fonts optimized for the web.

Free stock photos

Unsplash is a collection of free high-resolution photos. The website uses the Creative Commons Zero license, which doesn’t require attribution but does encourages it if possible.

Stocksnap.io is a another terrific resources for high-resolution images. All photos are released under Creative Commons - CC0 and do not require attribution.