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 basics	https://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 basics	https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
CSS basics	https://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 basics	https://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 basics	https://developers.google.com/web/tools/chrome-devtools
VS Code	https://code.visualstudio.com/

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/
Flexbox basics	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/
CSS Variables basics	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/
BEM basics	https://9elements.com/bem-cheat-sheet/
Sass basics	https://sass-lang.com/guide
jQuery basics	http://jqfundamentals.com/
JavaScript techniques	https://htmldom.dev/
JavaScript techniques	https://1loc.dev/
ES6 basics	https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be?gi=9762451c6d60
ES6 basics	https://es6.io/
Bootstrap basics	https://www.w3schools.com/bootstrap/bootstrap_ver.asp
Bootstrap basics	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
Icons	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/what-is-npm-a-node-package-manager-tutorial-for-beginners/
	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/
Critical CSS	https://www.sitelocity.com/critical-path-css-generator
CSS Specificity	https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
CSS Specificity	https://isellsoap.github.io/specificity-visualizer/
APIs	https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
APIs	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://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/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/
Hugo	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/swyxio/spark-joy
CSS games	https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
CSS games	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
Courses	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.app/
	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 tools	http://fontfamily.io/
	https://transfonter.org/
	https://devfonts.gafi.dev/
	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/
Favicon tools	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-app.pages.dev/
	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

Soft skills

General	https://thefutur.com/learn
Verbal communication	https://www.thebalancecareers.com/communication-skills-list-2063779
Written communication	https://www.indeed.com/career-advice/career-development/written-communication-skills
Documentation	https://zapier.com/engineering/great-documentation-examples/
Blogging	https://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 presence	https://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/
Searching	https://www.alec.fyi/dorking-how-to-find-anything-on-the-internet.html
Inspiration	https://inspiration-bits.com/archives/
Inspiration	https://github.com/swyxio/spark-joy

Newsletters

CSS Weekly	https://css-weekly.com/
CSS Animation Weekly	https://cssanimation.rocks/weekly/
Web Design Weekly	https://web-design-weekly.com/
CSS-Tricks	https://css-tricks.com/newsletters/
Smashing Magazine	https://www.smashingmagazine.com/the-smashing-newsletter/
UI Dev Newsletter	https://www.silvestar.codes/side-projects/ui-dev-newsletter/

Jobs boards

Indeed	https://www.indeed.com/hire
AngelList	https://angel.co/
StackOverflow	https://stackoverflow.com/jobs
YCombinator	https://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
RemoteJobsClub	https://remotejobsclub.com/
Glassdoor	https://www.glassdoor.co.uk/index.htm
Smashing Magazine	https://jobs.smashingmagazine.com/jobs/
CSS-Tricks	https://css-tricks.com/jobs/
Remote Jobs	https://remote.jobs/
50+ Remote jobs sites	https://adamconrad.dev/blog/here-is-the-full-list-of-my-50-remote-job-sites/
Where to Find Remote Developer Jobs	https://dev.to/study_web_dev/where-to-find-remote-developer-jobs-5g0h
Remote Junior Developer jobs directory	https://github.com/ugglr/Remote-Junior-Developer-jobs-directory

Jobs networks

Toptal	https://www.toptal.com#trust-nothing-but-brilliant-freelancers
ExpertLead	https://www.expertlead.com/
Upstack	https://upstack.co/
Turing	https://turing.com/
Codementor	https://www.codementor.io/
PeoplePerHour	https://www.peopleperhour.com/
ScalablePath	https://www.scalablepath.com/
Remote	https://remote.com/
Hired	https://hired.com/home
Upwork	https://www.upwork.com/work
WeAreDevelopers	https://www.wearedevelopers.com/
Gun.io	https://www.gun.io/
X-Team	https://x-team.com/
Hubstaff Talent	https://talent.hubstaff.com/
Yeeply	https://en.yeeply.com/
Underdog	https://underdog.io/
Folyo	https://folyo.me/

Are you ready for a new challenge?

Join The Program