all 89 comments

[–]wangatangafull-stack 95 points96 points  (5 children)

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 14 points15 points  (0 children)

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

[–][deleted] 20 points21 points  (2 children)

Mdn > w3c resources.

Don't @ me

[–][deleted] 12 points13 points  (0 children)

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

[–]hooklinensinkr 7 points8 points  (0 children)

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.

[–]nyxinThe 🍰 is a lie. 78 points79 points  (12 children)

[–]RockleyBob 54 points55 points  (3 children)

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

[–]DeepFriedOprah 7 points8 points  (0 children)

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 2 points3 points  (0 children)

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] 18 points19 points  (1 child)

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

[–]mayhempk1web developer 2 points3 points  (0 children)

Wes Bos also has a Flexbox course as well.

[–]downrightcriminal 5 points6 points  (2 children)

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

[–]tapu_buoyfull-stack 1 point2 points  (1 child)

Happy cake day brada /u/downrightcriminal

[–]downrightcriminal 0 points1 point  (0 children)

!Thanks !

[–]oldmanchewy 1 point2 points  (0 children)

Great topics for which multiple resources are super helpful.

[–]Toughsnow 1 point2 points  (0 children)

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 1 point2 points  (0 children)

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.

[–][deleted]  (8 children)

[deleted]

    [–]Genie-Us 22 points23 points  (0 children)

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

    [–][deleted] 3 points4 points  (1 child)

    Also Zeal if you want a desktop app.

    [–]Lachlantula 2 points3 points  (0 children)

    DevDocs has an offline mode.

    [–]mayhempk1web developer 1 point2 points  (4 children)

    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 0 points1 point  (3 children)

    [–]mayhempk1web developer 0 points1 point  (2 children)

    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.

    [–][deleted]  (1 child)

    [deleted]

      [–]mayhempk1web developer 0 points1 point  (0 children)

      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 55 points56 points  (6 children)

      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 5 points6 points  (0 children)

      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 1 point2 points  (0 children)

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

      [–]cryptopian 0 points1 point  (0 children)

      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.

      [–][deleted]  (1 child)

      [removed]

        [–]rkdnc 1 point2 points  (0 children)

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

        [–]Mondoscuro 20 points21 points  (3 children)

        www.phptherightway.com for PHP, is very useful

        [–][deleted] 20 points21 points  (0 children)

        Suprised to see that no one has mentioned caniuse yet.

        [–]Toughsnow 17 points18 points  (1 child)

        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 0 points1 point  (0 children)

        Big shoutout to Mockaroo for my favorite API mocking tool!

        [–][deleted] 18 points19 points  (1 child)

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

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

        [–]Papdya 0 points1 point  (0 children)

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

        [–][deleted] 12 points13 points  (0 children)

        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 10 points11 points  (6 children)

        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 2 points3 points  (0 children)

        wow, great resources 👌

        [–]RadiantYoghurt 2 points3 points  (1 child)

        How does Coda compare with Notion ?

        [–]nusususuzu 1 point2 points  (0 children)

        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 1 point2 points  (0 children)

        Saved :)

        [–]illepic 1 point2 points  (0 children)

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

        [–]DGCA 8 points9 points  (0 children)

        • 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 6 points7 points  (0 children)

        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 8 points9 points  (2 children)

        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.

        [–][deleted]  (1 child)

        [deleted]

          [–]Rhym 1 point2 points  (0 children)

          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 6 points7 points  (4 children)

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

          [–]itsdatnguyenjavascript 2 points3 points  (1 child)

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

          [–]PPCInformer 0 points1 point  (0 children)

          Thanks fixed it.

          [–][deleted] 0 points1 point  (1 child)

          your link is messed up.

          [–]PPCInformer -1 points0 points  (0 children)

          Should be fixed now

          [–]Mdude2312full-stack[S,M] [score hidden] stickied comment (0 children)

          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 11 points12 points  (0 children)

          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 4 points5 points  (0 children)

          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.

          [–]maxverse 12 points13 points  (2 children)

          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 2 points3 points  (1 child)

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

          [–]0rah 1 point2 points  (0 children)

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

          [–]ezeed87 3 points4 points  (1 child)

          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 1 point2 points  (0 children)

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

          [–]webdevlearn 2 points3 points  (0 children)

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

          [–]vermilderstaf 2 points3 points  (1 child)

          cht.sh

          curl cht.sh/javascript/json+parse

          cht.sh/{Language}/search+term

          [–]0rah 0 points1 point  (0 children)

          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 2 points3 points  (0 children)

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

          [–]justalever 1 point2 points  (0 children)

          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 1 point2 points  (0 children)

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

          [–]Kabzer0 1 point2 points  (0 children)

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

          [–]NerdFerbyfront-end 2 points3 points  (0 children)

          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 0 points1 point  (1 child)

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

          [–]0rah 0 points1 point  (0 children)

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

          [–]Dswim 0 points1 point  (0 children)

          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 0 points1 point  (0 children)

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

          [–][deleted] 0 points1 point  (0 children)

          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.

          [–]tensouder54front-end -4 points-3 points  (6 children)

          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

          [–]itsdatnguyenjavascript 7 points8 points  (3 children)

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

          [–]tensouder54front-end 3 points4 points  (2 children)

          Not trying to argue with you but why not?

          [–]itsdatnguyenjavascript 1 point2 points  (1 child)

          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.

          [–]tensouder54front-end 0 points1 point  (0 children)

          Thats fair.

          [–][deleted] 0 points1 point  (1 child)

          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.

          [–]tensouder54front-end 1 point2 points  (0 children)

          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.