{"id":13916,"date":"2012-06-12T21:01:45","date_gmt":"2012-06-12T13:01:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=13916"},"modified":"2022-08-01T22:23:05","modified_gmt":"2022-08-01T14:23:05","slug":"web-developer-resources-compilation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/","title":{"rendered":"Web Developer Resources: A Mega-Compilation"},"content":{"rendered":"<p>The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles, tutorials, tools, guides, to videos, you can learn just about anything over the Web. It has really never been easier to jump online!<\/p>\n<p>Below I\u2019ve put together a huge collection of some very helpful <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/27-must-have-starter-kits-for-web-designers\/\" rel=\"noopener noreferrer\">web developer resources<\/a>. These include beginner\u2019s material for <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\" rel=\"noopener noreferrer\">HTML5\/CSS3<\/a> along with more complicated theories for JavaScript and PHP programming.<\/p>\n<p>It\u2019s possible for a couple of enthusiastic developers to study these languages and build wildly popular, web applications similar to Twitter or Tumblr. If you have an interest in helpful assets for modern web developers then you\u2019ll love this compilation of trustworthy resources.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (May 2020)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (May 2020)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-05-2020.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-50200 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-05-2020.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Fresh Resources for Web Designers and Developers (May 2020)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIf you're a web designer or developer and want to make the most of your spare time, take...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Helpful Online Magazines<\/h2>\n<p>The blogging world has exploded with hundreds of thousands of new writers taking to the Internet. Many of these online blogs are focused around design & web development. You can find a lot of helpful resources by just flipping through these RSS feeds.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.flickr.com\/photos\/marcthiele\/5392426475\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg\" alt=\"The Smashing Magazine Design Book\"><\/a><\/figure>\n<p>Depending on what type of language you code, it will determine your interest in any of these blogs. We can focus on web development and assume this includes all front-end work (HTML5\/CSS3\/JavaScript) as well as simple back-end scripts (PHP\/RoR\/Python\/SQL). I\u2019ve taken the liberty of constructing a single list of the most popular dev blogs which focus on both front-end and back-end code.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/code.tutsplus.com\/\">Nettuts+<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/24ways.org\/\">24 Ways<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webmonkey.com\/\">Webmonkey<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/\">Smashing Coding<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/theguerrilla.agency\/web-design\">The Guerrilla Agency<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/catswhocode.com\/blog\/\">Cats Who Code<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/line25.com\/\">Line25 Web Design Blog<\/a><\/li>\n<\/ul>\n<p>There are certainly many others to consider. I recommend hitting Google in search of tutorials and articles on your preferred dev language. Then using an RSS feed aggregator like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.google.com\/reader\/about\/\">Google Reader<\/a> you can set up lists of all the latest articles from these magazines. This is a great way to start your workday, or even to kill a bit of time chugging through tutorials.<\/p>\n<h2>jQuery Plugins Galore<\/h2>\n<p>Both the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery core library<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/\">jQuery Mobile<\/a> have gained a lot of traction in the past year. These open source libraries work to design a front-end experience full of rich animation and easy-to-implement Ajax features, although the mobile library hasn\u2019t quite caught up with its parent in terms of plugins and third party code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/bg-stretcher-ii-jquery.jpg\" alt=\"BG Stretcher II jQuery plugin\" width=\"580\" height=\"400\"><\/figure>\n<p>Similarly another fantastic product bgStretcher can be used as a dynamic background script. It will take a series of images, and some scaling of the sizes proportionally to your user\u2019s screen resolution.<\/p>\n<p>Check out the wonderful demo to see this in action. Both of these plugins are free to download, and behave as simple examples for the awesome 3rd party code built off jQuery. Working with these resources will save you loads of time on project work so you don\u2019t have to re-invent the wheel.<\/p>\n<p>In general I also recommend browsing the website <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.dynamicdrive.com\/\">Dynamic Drive<\/a> for JavaScript code snippets\/plugins. The library isn\u2019t huge but it\u2019s constantly growing from new user-submitted content.<\/p>\n<p>The sites includes not only jQuery plugins but also MooTools and Prototype libraries.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/jqmphp-home-page.jpg\" alt=\"jqmPhp documentation for jQuery Mobile\" width=\"580\" height=\"400\"><\/figure>\n<p>If you do end up working with the jQuery Mobile library I want to recommend another tool jqmPhp. It\u2019s a dynamic PHP class where you can reference simple functions to output lines and lines of HTML5 code powered through jQuery Mobile.<\/p>\n<p>It\u2019s honestly the easiest way to prototype dynamic mobile apps built around a PHP shell. The site blog has plenty of example references to dig through.<\/p>\n<h2>Building in HTML5 & CSS3<\/h2>\n<p>When we talk about front-end web development, it\u2019s generally all about efficiency. You don\u2019t have the same problems building a website in HTML\/CSS as you would coding a back-end Ruby application.<\/p>\n<p>There is no real logic or error handling in HTML \u2013 it\u2019s mostly about how quickly you can scale a layout design properly in all browsers.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html5boilerplate.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/html5-boilerplate-template.jpg\" alt=\"HTML5 Boilerplate for web developers\" width=\"580\" height=\"400\"><\/a><\/figure>\n<p>First I have to start by recommending the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a>. This is a stripped bare-bones template which includes all the \u201cstandard\u201d HTML5 webpage elements in one package.<\/p>\n<p>This includes a default stylesheet, JavaScript, favicon, Apple touch icons, and plenty of other goodies.<\/p>\n<p>It\u2019s a 100% free project and you can even contribute on their <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/h5bp\/html5-boilerplate\">Github repo<\/a>. This is a must-have resource for all developers before starting on any serious web project.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.initializr.com\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/initializer-html5-templates.jpg\" alt=\"Initializer pre-code template for HTML5 boilerplate\"><\/a><\/figure>\n<p>Now if you work off this boilerplate then you have the option of adding all your own custom code. But I suggest taking the next step and building with an app such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.initializr.com\/\">Initializr<\/a>.<\/p>\n<p>This will generate a typical website layout and even allow you to customize which elements are included inside your boilerplate package. Google Analytics code, minified jQuery, .htaccess or web.config files, plus about a dozen other options are available.<\/p>\n<h3>CSS Designers<\/h3>\n<p>Now that we\u2019ve looked a bit into HTML5 coding we should also consider some of the popular CSS3 frameworks. These are more open-ended than HTML templates since you can do so much more with CSS.<\/p>\n<p>Designers will also realize the difficulty in building standards-compliant code for all modern web browsers.<\/p>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/goldengridsystem.com\/\">Golden Grid System<\/a> is fantastic as a framework on responsive web designs. These layouts will adapt to mobile screens and fold inwards as you resize the browser window.<\/p>\n<p>It also helps with planning the width and size of each column area. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/blueprintcss.org\/\">Blueprint<\/a> is another handy CSS framework you should check out. It\u2019s great for building custom websites and offers fantastic documentation.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/css3pie.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/css3-pie-internet-explorer.jpg\" alt=\"CSS3 PIE custom CSS properties for Internet Explorer\" width=\"580\" height=\"400\"><\/a><\/figure>\n<p>When it comes to CSS tools, however, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/css3pie.com\/\">CSS3 PIE<\/a> has to be in my top three favorites. It\u2019s a simple web app which outputs the proper code to render CSS3 effects supported in Internet Explorer 6-9.<\/p>\n<p>You can create dynamic linear gradients, rounded corners, and box shadows with customizable settings. The site has <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/css3pie.com\/demos\/\">IE examples<\/a> if you want to check them out as well.<\/p>\n<p>Developers will also be looking to slim down their file sizes for production. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.cleancss.com\/\">Clean CSS<\/a> is one resource where you can select from numerous options to simplify your code and reduce file size. Another alternative <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.codebeautifier.com\/\">Code Beautifier<\/a> doesn\u2019t offer as many options but may be easier to use.<\/p>\n<h2>Customizing Themes with WordPress<\/h2>\n<p>WordPress publishing is easily the most popular CMS in this era. We have seen possibly millions of new blogs and websites all powered by this fantastic content management solution. And as such WordPress developers are in high demand for building custom widgets and website themes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/constellation-wordpress-theme.jpg\" alt=\"Constellation Theme for WordPress developers\" width=\"580\" height=\"400\"><\/figure>\n<p>The new release of Constellation Theme gives WordPress developers an easier starting point than the default templates. The new Twenty Eleven theme is very crafty and minimalist, but it can\u2019t compete with an entire theme template built on top of HTML5Boilerplate.<\/p>\n<p>The Constellation WP theme even includes media queries for various device resolutions such as iPhone and iPad tablets.<\/p>\n<p>Wonderflux is another WordPress theme template which isn\u2019t quite as far along in development. It was just recently released out of beta into v1.0 along with some online documentation.<\/p>\n<p>This theme is a bit more complicated than Constellation which gives you more control over the layout. The developers have included custom PHP hooks, functions, and filters to make your WordPress site more dynamic.<\/p>\n<p>Serious WP developers should check out both solutions to see if either one would help on future project work.<\/p>\n<h2>Finding Web Developer Freebies<\/h2>\n<p>Compared to PSDs and graphics the web development community seems a bit lacking in freebie galleries. You can always find great scripts on Github, but you\u2019ll often have to search around and test them out yourself.<\/p>\n<p>It\u2019s difficult to find websites which offer free downloads and demos as well as script examples. My favorite new resource is CodeVisually which catalogs user-submitted development tools, plugins, libraries, and other neat things. The layout is setup like a gallery where each page includes a link to the product, demo screenshot, and some further details.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/code-visually-dev-gallery.jpg\" alt=\"CodeVisually free gallery of developer resources\" width=\"580\" height=\"400\"><\/figure>\n<p>The gallery includes hundreds of examples of HTML\/HTML5 template code, CSS3 libraries, and certainly plenty of jQuery stuff as well. I\u2019ve also found this is a great website to submit your own open source code to the public. Your name is tied onto the submission, plus you can place links to your own website where users could access the code.<\/p>\n<h2>Web Application APIs<\/h2>\n<p>A very popular trend in modern web development is building off APIs as a third party app. Most of the mainstream social networking brands include a working API and documentation segment right on their website. Plus there are tons of free wrapper classes on Github written in all the major back-end programming languages.<\/p>\n<p>Developers should feel comfortable working with these types of code libraries as they are growing in demand. Using the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/oauth.net\/\">OAuth system<\/a> you can quickly build up a userbase from many of these applications. I\u2019ve listed below just a few references to popular online APIs and their full documentation.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.twitter.com\/en\">Twitter API<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.facebook.com\/docs\/instagram\">Instagr.am API<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.ebay.com\/common\/api\/\">eBay API<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.foursquare.com\/\">Foursquare API<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.dribbble.com\/\">Dribbble API<\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.github.com\/en\/free-pro-team@latest\/rest\">Github API<\/a><\/li>\n<\/ul>\n<p>Take advantage of these resources on new projects whenever possible. The Web is becoming more connected and users are always flocking to the next big app.<\/p>\n<p>You can recruit thousands more dedicated members to your app when your visitors don\u2019t need to register a whole new account and can instead signup directly through Twitter or Facebook.<\/p>\n<h2>Q&A Resources<\/h2>\n<p>The most beneficial experience between developers is asking questions and learning new techniques. The developer community is always so helpful to newcomers and willing to offer their expertise in many situations. If you have any struggles or specific questions on a project, search through Google for a related web developer\u2019s forum.<\/p>\n<p>I personally have to recommend joining the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/stackexchange.com\/\">Stack Exchange<\/a> community if you aren\u2019t already a member. This includes amazing websites like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/stackoverflow.com\/\">Stack Overflow<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/superuser.com\/\">Super User<\/a> where you can get programming help on basically anything. Community members are knowledgeable in all the major web languages including jQuery and smaller PHP classes.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.google.com\/search?q=xcode+4.2+tab+controller+site:stackoverflow.com\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/google-stack-overflow-search.jpg\" alt=\"Google query through Stack Overflow\"><\/a><\/figure>\n<p>A neat trick I learned is to search through Google and see if your problem has already been solved. Enter a few keywords into your Google search and append the suffix <code>site:stackoverflow.com<\/code>.<\/p>\n<p>All returned search results will be questions from within Stack Overflow archives \u2013 if you\u2019re lucky you may find exactly the solution to your current problem.<\/p>\n<h2>Testing Page Speed Online<\/h2>\n<p>This new tool put out by Google Developers has actually been really impressive. The app Page Speed Online will analyze your website content and generate an analytics report on your speeds. This includes possible solutions to reduce load times and keep your visitors on the site longer.<\/p>\n<p>It can also help you determine problems with bounce rates and lower conversions. Google Analytics is a must for any website, but I feel that Page Speed just attains a higher level of analysis.<\/p>\n<p>The report output is ranked from high-to-low priority and often includes many different items. If you understand LAMP setups and working on Apache servers then you may also consider the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speedmodule?csw=1\">mod_pagespeed module<\/a>. It automatically performs many of these optimizations on your website to decrease load times and cache important web data (images, icons, scripts).<\/p>\n<h2>The Best Developer\u2019s Software<\/h2>\n<p>Between the two most popular Operating Systems, you can find dozens of programs. From graphics software to <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-code-editors-reviewed\/\" rel=\"noopener noreferrer\">source code editors<\/a> and IDEs, there are many resources for web developers to choose from. But if you\u2019re looking for popular suggestions I recommend the following titles.<\/p>\n<h3>macOS<\/h3>\n<p>Panic is a software company who created <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/panic.com\/coda\/\">Coda<\/a> \u2013 by far the best web development app for Mac. You have access to a source code editor, terminal, and FTP client where you can make changes directly to the server files. Coda additionally supports a long list of syntax highlighting for languages such as HTML, XML, CSS, JavaScript, PHP, SQL, and many more.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/panic.com\/coda\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/mac-osx-coda-app.jpg\" alt=\"Coda App for Mac OS X Lion\" width=\"580\" height=\"400\"><\/a><\/figure>\n<p>If however you need a free solution, you should check out <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.activestate.com\/products\/komodo-edit\/\">Komodo Edit<\/a>. The software is developed for Windows and Mac, open source, and totally free to download. It includes all the same support for syntax highlighting and plenty of similar features as Coda (no FTP unfortunately). <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.barebones.com\/products\/TextWrangler\/\">TextWrangler<\/a> is another free solution you may want to try, also just a simple text editor.<\/p>\n<p>For a free FTP application check out <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cyberduck.io\/\">Cyberduck<\/a> on the Mac App Store. Although personally I prefer a paid alternative such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.yummysoftware.com\/\">Yummy FTP<\/a> or <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/panic.com\/transmit\/\">Transmit<\/a>.<\/p>\n<h3>Microsoft Windows<\/h3>\n<p>The Adobe software suite always comes to mind when you think about web design and development. Windows users do have plenty of alternatives to Dreamweaver, and many of them are totally free.<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a> is a great example of some open source Win32 software. The project is still in active development and releases updates frequently (almost monthly). I love their tabbed interface and support for so many additional plugins. As I mentioned above Komodo Edit is also offered for Windows XP\/Vista\/7, so you can try that as an alternative.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/notepad-plus-plus.org\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/notepad-plus-windows.jpg\" alt=\"Notepad++ for Windows XP\/Vista\/7\" width=\"580\" height=\"400\"><\/a><\/figure>\n<p>Web developers on Windows are not without an FTP client either. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/filezilla-project.org\/\">Filezilla<\/a> is probably the most popular free alternative. For alternatives, check out our <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/ftp-free-clients-and-alternative-connecting-methods\/\" rel=\"noopener noreferrer\">free FTP clients list<\/a> along with similar tools.<\/p>\n<h3>Other Helpful Dev Resources<\/h3>\n<h2>Conclusion<\/h2>\n<p>It\u2019s my hope that this huge compilation of tools and resources will push your methodology for better development. I love working with web developers and learning about new projects all the time.<\/p>\n<p>Yet there is only so much room for new resources we can include, so I\u2019m bound to have missed a few gems. If you have ideas or suggestions for related web developer resources let us know in the post discussion area.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles, tutorials, tools, guides, to videos, you can learn just about anything over the Web. It has really never been easier to jump online! Below I\u2019ve put together a huge collection of some very helpful&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[510,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Web Developer Resources: A Mega-Compilation - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Developer Resources: A Mega-Compilation\" \/>\n<meta property=\"og:description\" content=\"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-12T13:01:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-01T14:23:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Web Developer Resources: A Mega-Compilation\",\"datePublished\":\"2012-06-12T13:01:45+00:00\",\"dateModified\":\"2022-08-01T14:23:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/\"},\"wordCount\":2261,\"commentCount\":39,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-developer-resources\\\/the-smashing-book-magazine.jpg\",\"keywords\":[\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/\",\"name\":\"Web Developer Resources: A Mega-Compilation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-developer-resources\\\/the-smashing-book-magazine.jpg\",\"datePublished\":\"2012-06-12T13:01:45+00:00\",\"dateModified\":\"2022-08-01T14:23:05+00:00\",\"description\":\"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-developer-resources\\\/the-smashing-book-magazine.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-developer-resources\\\/the-smashing-book-magazine.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-developer-resources-compilation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Developer Resources: A Mega-Compilation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Developer Resources: A Mega-Compilation - Hongkiat","description":"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/","og_locale":"en_US","og_type":"article","og_title":"Web Developer Resources: A Mega-Compilation","og_description":"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,","og_url":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-12T13:01:45+00:00","article_modified_time":"2022-08-01T14:23:05+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Web Developer Resources: A Mega-Compilation","datePublished":"2012-06-12T13:01:45+00:00","dateModified":"2022-08-01T14:23:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/"},"wordCount":2261,"commentCount":39,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg","keywords":["Web Designers","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/","url":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/","name":"Web Developer Resources: A Mega-Compilation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg","datePublished":"2012-06-12T13:01:45+00:00","dateModified":"2022-08-01T14:23:05+00:00","description":"The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-developer-resources\/the-smashing-book-magazine.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Developer Resources: A Mega-Compilation"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Cs","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=13916"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13916\/revisions"}],"predecessor-version":[{"id":61004,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13916\/revisions\/61004"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=13916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=13916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=13916"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=13916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}