Below is a list of my favorite web design and development resources, which have been extremely helpful in my web design and development journey. I hope this list can be a useful resource for other budding web designers and/or developers.
WordPress resources
Genesis Framework is a popular framework by StudioPress for development WordPress sites. It comes with SEO optimized code and airtight security features.
Local by Flywheel is my favorite local WordPress development tool. It is free and it makes setting up local WordPress installs a breeze. You can manage multiple local installs from a single dashboard, and save them as blueprints for later use.
Bill Erickson is a WordPress developer who writes extensively about Genesis, Gutenberg editor, and WordPress development in general. His blog has been a valuable resource in my web design and development work.
Comprehensive Beginners Guide to WordPress Loop by Zac Gordon is an excellent introduction to WordPress Loop and a great reference.
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 explanations 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 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.
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.
Search Engine Optimization (SEO)
Moz Beginner’s Guide to SEO is a free resource that provides comprehensive information on Search Engine Optimization.
Google SEO starter guide is a free resource on Search Engine Optimization put together by Google.
SEO Resource list of the SEO Ace has a great list of SEO blogs you can follow.
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.