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.

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/
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
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/
https://asana.com/
Communication (Slack, Zoom) https://slack.com/intl/en-gb/
https://zoom.us/
Other https://www.remote.tools/
https://appy-dev.netlify.app/
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://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/
https://github.com/sw-yx/spark-joy
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://mentor.silvestar.codes/reads#newsletter
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
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/

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

Buy me a coffee

☕️ ☕️ ☕️

Powered by Starter Project.