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

Intermediate level

Responsive web design https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Flexbox basics https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexbox.io/
CSS Grid basics https://css-tricks.com/snippets/css/complete-guide-grid/
https://cssgrid.io/
https://cssgr.id/
https://www.gridtoflex.com/
CSS Variables basics https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/
https://scrimba.com/g/gcssvariables
CSS Animations https://github.com/cssanimation/css-animation-101
CSS Transforms https://3dtransforms.desandro.com/
CSS Functions https://css-tricks.com/complete-guide-to-css-functions/
BEM basics http://getbem.com/introduction/
https://9elements.com/bem-cheat-sheet/
Sass basics https://sass-lang.com/guide
jQuery basics http://jqfundamentals.com/
JavaScript techniques https://htmldom.dev/
https://1loc.dev/
ES6 basics https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be?gi=9762451c6d60
https://es6.io/
Bootstrap basics https://www.w3schools.com/bootstrap/bootstrap_ver.asp
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Images https://css-tricks.com/images-are-not-static-content/
SVG https://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/
Fonts https://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/
Icons https://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
Favicons https://css-tricks.com/favicon-quiz/
Embeds https://blog.logrocket.com/the-ultimate-guide-to-iframes/

Advanced level

WordPress https://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/
Markdown https://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 CSS https://www.smashingmagazine.com/2015/08/understanding-critical-css/
https://www.sitelocity.com/critical-path-css-generator
CSS Specificity https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://isellsoap.github.io/specificity-visualizer/
APIs https://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 compatibility https://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 checklist https://frontendchecklist.io/
SEO https://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 guide https://blog.logrocket.com/5-things-to-consider-when-creating-your-css-style-guide-7b85fa70039d/
Accessibility https://a11yproject.com/
https://ffoodd.github.io/a11y.css/
https://benrobertson.io/accessibility/tools-for-website-audits
User Experience https://maze.design/guides/ux-research
Testing/Performance https://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://webhint.io/scanner/
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/feature/testmysite/
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/JAMstack https://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/
Netlify https://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/
Jekyll https://jekyllrb.com/
Hugo https://gohugo.io/
https://www.silvestar.codes/articles/making-a-website-with-hugo/
Hexo https://hexo.io/
Photoshop https://www.photoshop.com/
Sketch https://www.sketch.com/
Figma https://www.figma.com/
Zeplin https://zeplin.io/
Zapier https://zapier.com/platform

Games, tools, interviews

General https://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 games https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
https://dev.to/alvaromontoro/css-games-are-fun-2pgi
JavaScript games https://exercism.io/tracks/javascript/exercises
Other games https://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
Challenges https://www.100daysofcode.com/
https://codepen.io/challenges/
https://css-tricks.com/front-end-challenges/
Courses https://hackademy.pro/home
https://www.vuemastery.com/
HTML tools https://htmlhead.dev/
http://html5pattern.com/
https://www.heymeta.com/
CSS tools https://www.csswand.dev/
https://extra-css.netlify.com/
https://grid.layoutit.com/
https://csslayout.io/patterns
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 tools http://fontfamily.io/
https://transfonter.org/
https://devfonts.gafi.dev/l
https://www.notion.so/e873b52e0cc54f2981acc430417ba61d?v=05acdd40b0564920be69f5347f619bc3
https://www.reliablepsd.com/ultimate-google-font-pairings/
Icons https://streamlineicons.com/
Image tools https://picsum.photos/
Favicon tools https://realfavicongenerator.net/
https://maskable.app/
Webdev tools https://webmention.io/
https://instant.page/
https://www.whatfontis.com/?s2
https://fontdrop.info/
http://keycode.info/
Useful tools https://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
Templates https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp
Interview questions https://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 practice https://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

Essential apps

Soft skills

Jobs boards

Jobs networks

If you found anything helpful, you could buy me a coffee.

Buy me a coffee

☕️ ☕️ ☕️