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.

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/
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/
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
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
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
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/
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

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

Buy me a coffee

☕️ ☕️ ☕️

Powered by Starter Project.