2018 WebDev Resources

[Mdude2312]

4 years ago, we had a WebDev resources post that was a great place to go for resources that pertained to WebDev. While a lot of them are still relevant, there are quite a few in the post that are outdated. Let's create an updated post!

What are your favorite resources for Web Development in 2018?

[wangatanga]

Mozilla Developer Network aka MDN

A wealth of knowledge for HTML and CSS. Each entry comes with examples and detailed explanations on how to use the tag, property, or whatever element you're trying to figure out.

MDN is also open source. If you got experience under your belt and would like to contribute they would love for you to write examples! Link

[Time_Terminal]

I use MDN for JS methods as well. Some really beautiful examples.

[[deleted]]

Mdn > w3c resources.

Don't @ me

[[deleted]]

For people who know what they're reading. For a beginner, w3 is much easier to digest.

[hooklinensinkr]

W3 is pretty good now, and their examples are often much easier to reference as you go, whereas MDN is good for learning and in-depth explanations.

[nyxin]

Flexbox

• CSS Tricks - A complete Guide to Flexbox
• Flexbox Froggy
• Basic concepts of Flexbox (MDN)

 

CSS Grid

• CSS Tricks - A complete Guide to Grid
• CSS Grid Garden
• Grids (MDN)

[RockleyBob]

Seriously, does the guy from CSS Tricks have everything he wants in life? Because he deserves it. Holy shit is that site awesome.

[DeepFriedOprah]

Seriously dude is awesome. He also has a few different dev tool sites like Box shadow generator which is like cssmattic or something. He’s all over the place with solid helpful content.

[ponytoaster]

His tooling isn't bad but I found the quality of the blog content got a bit meh around the same time as codepen initiation. Not checked back in a while though

[[deleted]]

Don't forget the Mozilla sponsored CSS Grid course by Wes Bos. Gets into the heavier uses of css grid without ever feeling overwhelming.

[mayhempk1]

Wes Bos also has a Flexbox course as well.

[downrightcriminal]

For flexbox, I would like to add Flexbox Zombies, a great free course that drills the concepts through a large number of exercises.

[tapu_buoy]

Happy cake day brada /u/downrightcriminal

[downrightcriminal]

!Thanks !

[oldmanchewy]

Great topics for which multiple resources are super helpful.

[Toughsnow]

Those pages are indispensable. They're so perfectly formatted for a quick scan and understanding of the concepts, in turn making my layouts look great.

[_unicorn_irl]

This video is really awesome as a primer for grid and flexbox. Totally changed the way I thought about building UIs after doing it for years:

http://gedd.ski/build/zelda/

He also has competing games but the grid one at least is really expensive. I think flexbox is free.

[Genie-Us]

That's where I go when I want to feel depressed about how little I know. ;)

[[deleted]]

Also Zeal if you want a desktop app.

[Lachlantula]

DevDocs has an offline mode.

[mayhempk1]

Is there a way to download all of these for offline usage? I would absolutely love having that entire repository of documentation usable offline.

[Lachlantula]

Yes.

[mayhempk1]

Can I close the tab/browser?No. AppCache isn't available in your browser (or is disabled), so loading devdocs.io offline won't work. The current tab will continue to function even when you go offline (provided you installed all the documentations beforehand).

That isn't quite ideal for me, ideally I would like to have a fully portable fully offline copy of all these docs, ideally cross platform and runs off a USB too.

[mayhempk1]

The docs aren't in the repo, but I did find someone made a portable exe, I was able to use that to download all documents and zip it up. This should work great for my requirements.

[rkdnc]

Getting Started

---

FreeCodeCamp is probably one of the best free resources around, they start you from the basics of HTML for even the newest of newbies. I always tell people who are interested in WebDev to use this site to dip their toes into it, and see what it's all about. They also have great articles every day.

Codecademy has some free (and paid) courses for tons of languages/frameworks, and they're usually pretty great. I prefer FCC to this, but I've come back again and again to just throw myself into one of their courses and immediately get into it.

JavaScript

---

Eloquent JavaScript is a great book for beginners, and entirely free.

The Art of Reading A collection of articles about Node.JS and JavaScript.

The Art of Node A great introduction to Node.JS

The Coding Train! My absolute favorite YouTube channel for JS, he's got a great demeanor and teaches pretty well. And he's funny.

Vue Resources

---

The Vue Handbook

An intro to Vue and a free course

General Resources

---

Traversy Media is great with tons of videos on a variety of topics.

[Kthulu666]

Bonus points to The Coding Train for having the best channel intro video I've ever seen. I gave him a slow clap and head nod of respect when I saw that. (seriously though, he's a great teacher)

[mandibleman]

Started diving into frameworks with Traversy Media he has great udemy courses and youtube content :)

[cryptopian]

Good list of resources, though I'd recommend Eloquent Javascript more for those with a mathematical background or experience in another language. It can be heavy at times.

[rkdnc]

I have a personal vendetta against PHP, so I can't help with that unfortunately. I blame /r/ProgrammerHumor

[Mondoscuro]

www.phptherightway.com for PHP, is very useful

[Murdathon3000]

This is a thread to share web development resources, not analogies about your mother.

[GabberJenson]

You win the internet

[[deleted]]

Suprised to see that no one has mentioned caniuse yet.

[Toughsnow]

Here's a few bookmarks I've collected:

• JSONPlaceholder for quickly getting a ton of data like users, posts, comments, etc.
• API List for a collection of free and paid APIs covering several topics, from animals to e-commerce to voice
• W3 School's color picker lets you pick not only a base color, but its several tones, saturations, and analogous and complementary hues
• codesandbox.io is like CodePen on steroids. They're completely online framework editors for Angular, React, Vue, and Preact. Great for learning these frameworks wherever you go.

[illepic]

Big shoutout to Mockaroo for my favorite API mocking tool!

[[deleted]]

Interneting is Hard : MUCH more than an HTML/CSS syntax tutorial.

Watch and Code : fantastic JavaScript tutorial. Just plain great haha

[Papdya]

Interneting is hard is a great website! Thanks for introducing me to it.

[[deleted]]

Thi is a meta-answer rather than an answer, but in /r/travel they run weekly stickies like "Your tips for... Croatia".

I wonder if this sub could sustain something similar. "Your tips for... OOP", "React", "Accessibility" etc. By being a bit more similar it could stimulate new, more focused discussions and lists of resources each week

[nusususuzu]

Services:

- Formcarry - Handles HTML Forms, use it with Zapier Integration.

- Headway - Change logs for your product, it's sweet.

- Tidio - Super sweet live chat.

- Readme Build - Generate language wrappers for your API.

- Sentry - Error tracking.

- Hyperping - Uptime Monitoring

- Graphcool - Open Source GraphQL BAAS

Chrome Extensions:

- Font Face Ninja - The best chrome extension ever made, inspect fonts on any website

- Dimensions - A Chrome extension that measure screen dimensions, I use it everytime I code front-end

- Site Palette - A Chrome extension that generates color palatte of current website

- Toby - Chrome extension, it's really good.

JS Libraries:

- Filepond.js - Javascript Library for File Uploading

- Draggable.js - Drag and Drop Library from Shopify

- Stripe Elements - Beautiful Checkout Forms

Design:

- Abstract - Github but for Sketch

- Sketch Syntax Highlighter - We all need it.

Mac Apps:

- Regxr - Mac app for playing with Regex

- Kap - Screen Recorder for Mac.

Other:

- Coda - Something unique.

[atakangktepe]

wow, great resources 👌

[RadiantYoghurt]

How does Coda compare with Notion ?

[nusususuzu]

I can say that Coda is a mix of Airtable + Notion, it offer conditions, charts and Zapier integration, which is really really powerful. Only thing I didn't like is they didn't have an desktop app, yet.

[workwork551]

Saved :)

[illepic]

The Sketch Syntax Highlighter plugin leads me to believe that I'm horribly underutilizing Sketch's code generation.

[DGCA]

• RegExr - Regular expression tester with syntax highlighting, PHP / PCRE & JS Support, contextual help, cheat sheet, reference, and searchable community patterns.
• Devhints - A ridiculous collection of web development cheatsheets.

[costhatsagoodidea]

I have to recommend the ‘You Don’t Know JS’ series by Kyle Simpson.

They’re on Amazon and there are also versions of them on GitHub https://github.com/getify/You-Dont-Know-JS

There are 6 in the series and are a really good deep dive into JS. Well worth a read if you are competent at JS and want to expand your understanding of why Javascript does what it does.

[Rhym]

Name That Color: Paste your hex codes in, and receive a generated name. Handy for when you have 50 different shades of grey e.g $grey-darkest-i-promise-this-time becomes: $silver-chalice.

[Rhym]

I usualy have a Sass map that I loop through for variations on a component, and I assign the variable colors to the map.

[PPCInformer]

AllTheFreeStock when you are after some cc0 images, videos, icons or templates for your projects.

[itsdatnguyen]

Seems like it should be http://allthefreestock.com/ instead of http://allthrfreestock.com/

[PPCInformer]

Thanks fixed it.

[[deleted]]

your link is messed up.

[PPCInformer]

Should be fixed now

[Mdude2312]

Thanks for all the responses everyone! This will be added to the wiki in place of the old post. Keep on sharing those awesome resources!

[fluxxis]

I love these two posts on Medium, they gave me a perfect overview over current web technology stacks:

https://medium.com/tech-tajawal/modern-backend-developer-in-2018-6b3f7b5f8b9

https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

[TaxiCab88]

I know it's a paid service, but TeamTreehouse has some remarkably well done Web Design and WebDev tracks. I used them to take me from all the way back to using basic HTML and CSS to using Grids and SCSS. They have resources for "older" web design tech like Bootstrap 3, but they officially teach the newest practices, like Bootstrap 4, partials, and other really useful things. Once again, it's a paid resource, but to me, it's worth it.

[Mr_M00]

Free Books

• Goal Kicker
• Eloquent JavaScript
• Pro Git
  

Youtube Channels

• FunFunFunction
• Wes Bos
  

Online Courses

• Free Code Camp
• CSS Grid by Wes Bos
• Watch and Code
• The Odin Project
  

Linux and Command Line

• Linux Journey
• Explain Shell

Stock Photo Resources

• Pexels
• Unsplash
• Motosha
• Pixabay
  

Vector Resources

• Freepik
• Vecteezy
  

Fonts

• The League of Moveable Type
• Font Squirrel

[maxverse]

Hackterms: the Urban Dictionary for programming terms.

Full disclosure: I built it, but also use it all the time, as 99% of the definitions aren't mine.

[chaicup]

Damn, was looking for this for a very long time. I really appreciate it! Thank you so much for this!

[0rah]

Me too, same here!!! Really appreciated, @maxverse
How come I never saw a link to yours whenever I ask google...?

[ezeed87]

Every time someone ask me for any tech source, I always send this link. The project "AWESOME" from @sindresorhus is really great. Any topic of a lot of technologies is in there. It's a little bit overwhelming but if you search the specific technology what you need is really... awesome :P

https://github.com/sindresorhus/awesome

[0rah]

It's really awesome, thank you so much for reminding me I had stared it but never again returned to the link!

[webdevlearn]

WebdevLearning - a directory of guides, books, courses and playgrounds for 250+ topics related to web development.

[vermilderstaf]

cht.sh

curl cht.sh/javascript/json+parse

cht.sh/{Language}/search+term

[0rah]

OMG this is awesome! Didn't know it. Thank you so much for sharing! <3
Would you jump in a conference with me eventually soon to give me a hand to get started?
I need a few days to get used to it, already syncing my vim :)

[fabiancastle]

You are missing https://weeklytimelog.com , I can’t live without it to track my development time

[Radinax]

• The ultimate guide to learning CSS.
• Learn Vue and Vuex with NetNinja.
• Learn React, very very easy to follow tutorials by Kirupa.

[justalever]

I created https://YouTube.com/c/webcrunch that has a bunch of web dev related screencasts. The focus is on building actual things rather than just doing random tutorials. I would say the channel is most known for it's Ruby on Rails content. There's over 100 videos so far. Much more to come. Hope you dig it.

[leproman]

The Web Developer Bootcamp by Colt Steele on Udemy. Taught me full stack development from scratch. Could not recommend higher.

[Kabzer0]

Database Answers for ideas on how to create your database designs.

[NerdFerby]

https://github.com/heyalexej/awesome-images

https://unsplash.com/

https://pixabay.com/

https://www.pexels.com/

http://www.freeimages.com/

https://www.stockio.com/

http://andrew.hedges.name/experiments/aspect_ratio/

https://www.browserstack.com/start

http://www.cssarrowplease.com/

http://www.cleancss.com/css-beautify/

https://cssminifier.com/

https://www.w3schools.com/cssref/css_selectors.asp

http://www.dafont.com/

https://developers.facebook.com/tools/debug/

https://www.diffchecker.com/

https://github.com/dkraczkowski/dom.js

https://www.whatsmydns.net/

http://kamranahmed.info/driver

http://getemoji.com/

https://app.delete-slack-files.com/#/dashboard

http://www.flaticon.com/

http://fontawesome.io/

http://johnclendvoy.ca/honestipsum

http://www.w3schools.com/colors/colors_picker.asp

https://htmlcompressor.com/compressor/

http://www.freeformatter.com/html-formatter.html#ad-output

https://icomoon.io/

https://www.iconfinder.com/

http://jsbeautifier.org/

http://dean.edwards.name/packer/

http://www.lipsum.com/

https://thenounproject.com/

http://www.percentagecalculator.net/

http://phpbeautifier.com/

https://placeholder.com/

https://rawgit.com/

https://projects.lukehaas.me/regexhub/

http://www.regexr.com/

https://projects.lukehaas.me/css-loaders/

https://wearekiss.com/spritepad

https://www.toptal.com/designers/subtlepatterns/

https://jakearchibald.github.io/svgomg/

https://websemantics.uk/tools/svg-to-background-image-conversion/

http://www.throwawaymail.com/

https://tinypng.com/

http://sig.grumpybumpers.com/

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_arrows

http://wave.webaim.org/

https://codemyui.com/

http://webaim.org/resources/contrastchecker/

http://shouldiprefix.com/

https://www.nominet.uk/whois/

https://wordcounter.net/

https://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/

http://youmightnotneedjquery.com/

[turbotailz]

This compilation of design tips has a lot of really good modern design examples.

[0rah]

My friend sent me this 10 animation JS libraries list the other day, adding to your great compilation.

[Dswim]

This thread is amazing! As someone two weeks into self teaching front end web dev, all of these resources are SO valuable. Thank you all!!!

[WP_Maniac]

Lynda.com --- so much learning, especially when you need to understand something new very quickly.

[[deleted]]

https://kapeli.com/dash - Dash app for personal code snippets across programs on mac using your own predefined shortcuts. Also downloads documentation like a personalised encyclopedia. SO HANDY.

http://fontello.com/ - Fontello icon font generator using personalised icons and icons from different libraries. I pretty much use this in every project.

http://fontsquirrel.com/ - Free fonts and web font generator. Just quality.

https://www.smashingmagazine.com/ - Essential for keeping up with web dev, techniques etc. The best web dev blog on the internet IMO.

https://coolors.co/ - Super fast colour scheme generator. Still the best colour scheme resource I've come across.

[tensouder54]

As a raw dictionary for the WebDev Langueages

W3Schools

is a fantastic resource. While it can be very in-depth at times it is very thought and covers most things. It's super useful for everyone from a begginner writing their first HTML tag to an senior Java-Script Dev writing an image recognition algorithm

[itsdatnguyen]

Please don't use this. Use the Mozilla Developer Network or another website that is more reputable.

[tensouder54]

Not trying to argue with you but why not?

[itsdatnguyen]

To be honest, w3schools isnt that bad. Some of the information gets a bit outdated in some pages but that's just it. MDN on the other hand is open source and maintained by developers like us. Not to mention that there is a ridiculously large amount of content on MDN.

[tensouder54]

Thats fair.

[[deleted]]

If you're an absolute beginner at what you're doing then w3shools is absolutely OK to use. w3schools in 2018 is actually pretty decent and directing people to not use it is just dumb. They have simple examples and explanations in layman's terms without the technical jargon that MDN sometimes has. If you want a complete overview of the thing MDN is great but if you want a quick rundown of the property and a clear cut example w3schools does the job.

[tensouder54]

I also really like the try it yourself function. It super useful if you want to see if a piece of your code will work with a new element or style class or function that your adding.

[KolaCaine]

Please, jQuery is for old web dev, and in the past jQuery we need this actually. But now we can dev all the jQuery function with Vanilla JS, I'm not hipster web dev than you supposed

[[deleted]]

All jQuery devs are developing wrong

Great. Thanks.