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
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://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/
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/
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
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/
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
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/
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
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.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/
Favicon tools	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

Essential apps

Terminal	https://iterm2.com/
	https://github.com/oh-my-fish/oh-my-fish
	https://ohmyz.sh/
Git	https://git-scm.com/
	https://github.com/nvie/gitflow
	https://nvie.com/posts/a-successful-git-branching-model/
	https://gitsheet.wtf/
	https://www.madebymike.com.au/writing/how-to-git/
	https://dev.to/milu_franz/git-explained-the-basics-igc
Collaboration tools (Asana, Trello, Jira)	https://trello.com/
Collaboration tools (Asana, Trello, Jira)	https://asana.com/
Communication (Slack, Zoom)	https://slack.com/intl/en-gb/
Communication (Slack, Zoom)	https://zoom.us/
Other	https://www.remote.tools/
Other	https://appy-dev.netlify.app/

Soft skills

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://codeup.com/what-developers-need-to-have-for-their-online-presence/
	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/

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/

Jobs boards

Product Hunt	https://www.producthunt.com/jobs
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/
CodePen	https://codepen.io/jobs/
Remote Masters	https://remotemasters.dev/jobs
Remote Jobs	https://remote.jobs/
Codementor	https://www.codementor.io/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/
MVP Factory	https://mvpfactory.co/company/careers/
Remote	https://remote.com/
Fountain	https://get.fountain.com/
Triplebyte	https://triplebyte.com/
Vettery	https://www.vettery.com/
CodersClan	https://www.codersclan.com/
Upwork	https://www.upwork.com/
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/
Hired	https://hired.com/
Underdog	https://underdog.io/
Folyo	https://folyo.me/

Are you ready for a new challenge?

Join The Program

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

Buy me a coffee

☕️ ☕️ ☕️