Resources

The resources I have collected and organized have a single purpose—to help you learn and get the first UI developer job more efficiently.

The vast majority of these resources helped me shape my career.

Basic level

How the Internet works basicshttps://howdns.works/
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
https://dev.to/bibekshah09/how-do-browsers-work-44oj
https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid
HTML basicshttps://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
CSS basicshttps://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
https://web.dev/learn/css/
https://justmarkup.com/articles/2018-03-27-collection-of-css-snippets/
https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/
https://www.30secondsofcode.org/css/p/1/
https://github.com/AllThingsSmitty/must-watch-css
https://moderncss.dev/
https://twitter.com/sseraphini/status/1286248660364337153
JavaScript basicshttps://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
https://javascript30.com/
https://beginnerjavascript.com/
https://github.com/ryanmcdermott/clean-code-javascript
https://www.learnenough.com/javascript-tutorial/hello_world
https://www.30secondsofcode.org/js/p/1/
https://github.com/AllThingsSmitty/must-watch-javascript
https://javascript.info/
https://www.programiz.com/javascript
DevTools basicshttps://developers.google.com/web/tools/chrome-devtools
VS Codehttps://code.visualstudio.com/

Intermediate level

Responsive web designhttps://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Flexbox basicshttps://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexbox.io/
CSS Grid basicshttps://css-tricks.com/snippets/css/complete-guide-grid/
https://cssgrid.io/
https://cssgr.id/
https://www.gridtoflex.com/
CSS Variables basicshttps://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/
https://scrimba.com/g/gcssvariables
CSS Animationshttps://github.com/cssanimation/css-animation-101
CSS Transformshttps://3dtransforms.desandro.com/
CSS Functionshttps://css-tricks.com/complete-guide-to-css-functions/
BEM basicshttp://getbem.com/introduction/
https://9elements.com/bem-cheat-sheet/
Sass basicshttps://sass-lang.com/guide
jQuery basicshttp://jqfundamentals.com/
JavaScript techniqueshttps://htmldom.dev/
https://1loc.dev/
ES6 basicshttps://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be?gi=9762451c6d60
https://es6.io/
Bootstrap basicshttps://www.w3schools.com/bootstrap/bootstrap_ver.asp
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Imageshttps://css-tricks.com/images-are-not-static-content/
SVGhttps://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
https://css-tricks.com/using-svg/
https://css-tricks.com/svg-properties-and-css/
https://css-irl.info/optimising-svgs-for-the-web/
Fontshttps://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
https://zapier.com/blog/google-fonts-how-to/
https://css-tricks.com/some-typography-links/
https://www.websiteplanet.com/blog/best-free-fonts/
Iconshttps://dev.to/adrianbdesigns/icon-workflow-for-the-web-an-in-depth-guide-26hj
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Faviconshttps://css-tricks.com/favicon-quiz/
Embedshttps://blog.logrocket.com/the-ultimate-guide-to-iframes/

Advanced level

WordPresshttps://wordpress.org/
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
https://underscores.me/
https://www.designbombs.com/8-best-wordpress-starter-themes-frameworks-new-wp-developers/
https://www.toptal.com/wordpress/wordpress-roots-stack
https://wphierarchy.com/
Task runners (Gulp, webpack)https://gulpjs.com/
https://webpack.js.org/
https://parceljs.org/
https://www.freecodecamp.org/news/introduction-to-npm-scripts-1dbb2ae01633/
https://gruntjs.com/
Package managers (npm, Yarn)https://www.npmjs.com/
https://yarnpkg.com/
https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
Linting (htmllint, sasslint, eslint)https://eslint.org/
https://standardjs.com/
https://github.com/htmllint/htmllint
https://github.com/stylelint/stylelint
https://github.com/sds/scss-lint
Template engines (pug, liquid)https://pugjs.org/api/getting-started.html
https://jekyllrb.com/docs/liquid/
https://shopify.github.io/liquid/
https://twig.symfony.com/
Markdownhttps://www.toptal.com/web/markdown-the-writing-tool-for-software-developers
Optimization (minify, uglify, compress)https://stackoverflow.com/questions/19694448/whats-the-difference-between-concat-and-uglify-and-minify
Critical CSShttps://www.smashingmagazine.com/2015/08/understanding-critical-css/
https://www.sitelocity.com/critical-path-css-generator
CSS Specificityhttps://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://isellsoap.github.io/specificity-visualizer/
APIshttps://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/
Cross-browser compatibilityhttps://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
http://blogs.quovantis.com/browser-specific-hacks-for-frontend-developers/
https://caniuse.com/
Frontend checklisthttps://frontendchecklist.io/
SEOhttps://moz.com/blog/category/basic-seo
https://ahrefs.com/blog/seo-basics/
https://www.seobility.net/en/seocheck/
https://websiteseochecker.com/
https://neilpatel.com/seo-analyzer/
https://seositecheckup.com/
https://www.seoptimer.com/
http://www.seowebpageanalyzer.com/
https://sitechecker.pro/
https://www.drlinkcheck.com/
Style guidehttps://blog.logrocket.com/5-things-to-consider-when-creating-your-css-style-guide-7b85fa70039d/
Accessibilityhttps://a11yproject.com/
https://ffoodd.github.io/a11y.css/
https://benrobertson.io/accessibility/tools-for-website-audits
User Experiencehttps://maze.design/guides/ux-research
Testing/Performancehttps://search.google.com/search-console/about
https://developers.google.com/web/tools/lighthouse/
https://validator.w3.org/
https://search.google.com/test/mobile-friendly
https://developers.google.com/speed/pagespeed/insights/
https://lighthouse-metrics.com/
https://www.experte.com/pagespeed
https://www.webpagetest.org/
https://tools.pingdom.com/
https://www.dotcom-tools.com/website-speed-test.aspx
https://webspeedtest.cloudinary.com/
https://securityheaders.com/
https://webbkoll.dataskydd.net/en
https://www.dareboost.com/en/analysis
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-tools-to-optimize-site-and-app/
https://mxtoolbox.com/Public/FreeInvestigator.aspx
https://www.alexa.com/siteinfo/
https://perf.rocks/
https://wpostats.com/
https://progressivetooling.com/
https://www.statuscake.com/
https://www.scamadviser.com/
https://dev.to/ender_minyard/the-ultimate-guide-to-web-performance-ci4
Serverless/JAMstackhttps://blog.fullstacktraining.com/introduction-to-the-jamstack/
https://jamstack.training/
https://www.netlify.com/blog/2020/03/12/learn-jamstack-with-a-free-3.5-hour-video-of-demos-and-examples/
Netlifyhttps://www.netlify.com/
https://www.staticgen.com/
https://headlesscms.org/
https://www.youtube.com/watch?v=mT5siI19gtc
https://serverless.css-tricks.com/
https://css-tricks.com/a-comparison-of-static-form-providers/
Jekyllhttps://jekyllrb.com/
Hugohttps://gohugo.io/
https://www.silvestar.codes/articles/making-a-website-with-hugo/
Hexohttps://hexo.io/
Photoshophttps://www.photoshop.com/
Sketchhttps://www.sketch.com/
Figmahttps://www.figma.com/
Zeplinhttps://zeplin.io/
Zapierhttps://zapier.com/platform

Games, tools, interviews

Generalhttps://www.frontendmentor.io/resources
https://www.skillshare.com/r/user/starbist
https://github.com/sdmg15/Best-websites-a-programmer-should-visit
https://dev.to/gregfletcher/top-front-end-development-youtube-channels-4ihg
https://github.com/sindresorhus/awesome
https://dev.to/jatinrao/resources-for-frontend-developers-1l9i
https://github.com/MarkoDenic/web-development-resources
https://github.com/sw-yx/spark-joym
CSS gameshttps://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
https://dev.to/alvaromontoro/css-games-are-fun-2pgi
JavaScript gameshttps://exercism.io/tracks/javascript/exercises
Other gameshttps://dev.to/selawsky/8-coding-games-to-improve-and-level-up-your-programming-skills-3fc0
https://medium.mybridge.co/12-free-resources-learn-to-code-while-playing-games-f7333043de11
https://dev.to/paco_ita/train-your-javascript-skills-with-online-games-289m
Challengeshttps://www.100daysofcode.com/
https://codepen.io/challenges/
https://css-tricks.com/front-end-challenges/
Courseshttps://hackademy.pro/home
https://www.vuemastery.com/
HTML toolshttps://htmlhead.dev/
http://html5pattern.com/
https://www.heymeta.com/
CSS toolshttps://www.csswand.dev/
https://extra-css.netlify.com/
https://grid.layoutit.com/
https://getwaves.io/
https://www.gradientmagic.com/
https://www.grabient.com/
https://shapy.app/
https://9elements.github.io/fancy-border-radius/
https://gijsroge.github.io/tilt.js/
https://bennettfeely.com/clippy/
https://neumorphism.io/#55b9f3
https://brumm.af/shadows
Font toolshttp://fontfamily.io/
https://transfonter.org/
https://devfonts.gafi.dev/
https://www.notion.so/e873b52e0cc54f2981acc430417ba61d?v=05acdd40b0564920be69f5347f619bc3
https://www.reliablepsd.com/ultimate-google-font-pairings/
Iconshttps://streamlineicons.com/
Image toolshttps://picsum.photos/
Favicon toolshttps://realfavicongenerator.net/
https://maskable.app/
Webdev toolshttps://webmention.io/
https://instant.page/
https://www.whatfontis.com/?s2
https://fontdrop.info/
http://keycode.info/
Useful toolshttps://linkfork.co/
https://flawlessapp.io/designtools
https://www.uigoodies.com/index.html
https://mobile.twitter.com/i/events/880688233641848832
https://frontendchecklist.io/
https://mailtolink.me/
http://speakhuman.today/
https://www.screely.com/
https://github.com/c0bra/deviceframe
https://witeboard.com/62168dd0-319a-11e8-b988-f164786e9c22
https://spotify.github.io/coordinator/
https://svg-to-symbol.herokuapp.com/
https://jakearchibald.github.io/svgomg/
http://b64.io/
https://wkhtmltopdf.org/
https://regexly.js.org/
https://css-tricks.com/snippets/php/automatic-copyright-year/
http://youmightnotneedjquery.com/
http://youmightnotneedjs.com/
https://jsonld.com/website/
https://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab
https://dev.to/pustelto/tools-i-use-for-front-end-dev-3ekn
Templateshttps://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp
Interview questionshttps://www.toptal.com/html5/interview-questions
https://www.toptal.com/css/interview-questions
https://www.toptal.com/javascript/interview-questions
https://www.toptal.com/software/interview-questions
https://www.toptal.com/web/interview-questions
https://www.toptal.com/php/interview-questions
https://www.toptal.com/algorithms/interview-questions
https://www.toptal.com/designers/visual/interview-questions
https://www.toptal.com/ui-ux-frontend-developer/interview-questions
Code practicehttps://exercism.io/
https://www.slant.co/options/3408/alternatives/~exercism-io-alternatives
https://dev.to/frontendmentor/16-front-end-projects-with-designs-to-help-improve-your-coding-skills-5ajl
https://dev.to/biplov/15-fun-apis-for-your-next-project-5053

Soft skills

Generalhttps://thefutur.com/learn
Verbal communicationhttps://www.thebalancecareers.com/communication-skills-list-2063779
Written communicationhttps://www.indeed.com/career-advice/career-development/written-communication-skills
Documentationhttps://zapier.com/engineering/great-documentation-examples/
Blogginghttps://css-tricks.com/advice-for-technical-writing/
https://css-tricks.com/beginner-css-tips-for-your-blog/
https://developers.google.com/tech-writing/overview
Online presencehttps://www.freecodecamp.org/news/building-your-personal-brand-as-a-new-web-developer-f6d4150fd217/
https://www.omnesgroup.com/online-presence-as-junior-developer/
https://simpleprogrammer.com/online-presence-programmer/
https://www.freecodecamp.org/news/building-your-personal-brand-as-a-new-web-developer-f6d4150fd217/
Searchinghttps://www.alec.fyi/dorking-how-to-find-anything-on-the-internet.html
Inspirationhttps://inspiration-bits.com/archives/
https://github.com/swyxio/spark-joy

Jobs boards

Product Hunthttps://www.producthunt.com/jobs
Indeedhttps://www.indeed.com/hire
AngelListhttps://angel.co/
StackOverflowhttps://stackoverflow.com/jobs
YCombinatorhttps://news.ycombinator.com/jobs
https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=Ask%20HN%3A%20Who%20is%20hiring%3F&sort=byDate&type=story
https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=ASK%20HN%3A%20who%20wants%20to%20be%20hired%3F&sort=byDate&type=story
RemoteJobsClubhttps://remotejobsclub.com/
Glassdoorhttps://www.glassdoor.co.uk/index.htm
Smashing Magazinehttps://jobs.smashingmagazine.com/jobs/
CSS-Trickshttps://css-tricks.com/jobs/
Remote Mastershttps://remotemasters.dev/jobs
Remote Jobshttps://remote.jobs/
Codementorhttps://www.codementor.io/jobs
50+ Remote jobs siteshttps://adamconrad.dev/blog/here-is-the-full-list-of-my-50-remote-job-sites/
Where to Find Remote Developer Jobshttps://dev.to/study_web_dev/where-to-find-remote-developer-jobs-5g0h
Remote Junior Developer jobs directoryhttps://github.com/ugglr/Remote-Junior-Developer-jobs-directory

Jobs networks

Toptalhttps://www.toptal.com#trust-nothing-but-brilliant-freelancers
ExpertLeadhttps://www.expertlead.com/
Upstackhttps://upstack.co/
Turinghttps://turing.com/
Codementorhttps://www.codementor.io/
PeoplePerHourhttps://www.peopleperhour.com/
ScalablePathhttps://www.scalablepath.com/
Remotehttps://remote.com/
Hiredhttps://hired.com/home
Upworkhttps://www.upwork.com/work
WeAreDevelopershttps://www.wearedevelopers.com/
Gun.iohttps://www.gun.io/
X-Teamhttps://x-team.com/
Hubstaff Talenthttps://talent.hubstaff.com/
Yeeplyhttps://en.yeeply.com/
Underdoghttps://underdog.io/
Folyohttps://folyo.me/