{"id":13578676,"url":"https://github.com/markteekman/frontend-resources","last_synced_at":"2026-02-27T02:31:10.374Z","repository":{"id":104835358,"uuid":"232066098","full_name":"markteekman/frontend-resources","owner":"markteekman","description":"A list of resources concerning front-end web development. From HTML, CSS and JavaScript to testing, accessibility, Atom packages, UI Design and Design Systems.","archived":false,"fork":false,"pushed_at":"2022-12-12T07:42:12.000Z","size":52,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T10:44:05.505Z","etag":null,"topics":["accessibility","css","front-end","html","javascript"],"latest_commit_sha":null,"homepage":"https://markteekman.nl","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markteekman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-06T09:22:39.000Z","updated_at":"2024-12-08T16:13:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b136821-5b05-4e5b-aa91-7a3687087ab9","html_url":"https://github.com/markteekman/frontend-resources","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/markteekman/frontend-resources","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Ffrontend-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Ffrontend-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Ffrontend-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Ffrontend-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markteekman","download_url":"https://codeload.github.com/markteekman/frontend-resources/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markteekman%2Ffrontend-resources/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29883101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","css","front-end","html","javascript"],"created_at":"2024-08-01T15:01:32.805Z","updated_at":"2026-02-27T02:31:10.342Z","avatar_url":"https://github.com/markteekman.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"\n# Frontend Resources\n A list of resources concerning front-end web development.\n\n- **Learning HTML**\n  - https://9elements.com/bem-cheat-sheet/\n  - https://www.codecademy.com/courses/learn-html/lessons/html-forms/exercises/forms-intro\n  - https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/introduction-to-semantic-html\n  - https://getfrontend.tips/all.html\n  - https://web.dev/learn/html/\n\n- **Learning CSS**\n  - https://moderncss.dev\n  - https://every-layout.dev\n  - https://css-animations.io/\n  - https://flukeout.github.io/\n  - https://wattenberger.com/blog/css-percents\n  - https://mastery.games/p/flexbox-zombies\n  - https://sass-lang.com/blog/the-module-system-is-launched\n  - https://dev.to/huijing/understanding-positioning-in-css-7mn\n  - https://cssguidelin.es/\n  - https://sass-guidelin.es/\n  - https://wattenberger.com/blog/css-cascade\n  - https://dev.to/emmawedekind/css-specificity-1kca\n  - https://sass-lang.com/documentation/style-rules/declarations#custom-properties\n  - https://ishadeed.com/article/learn-css-positioning/\n  - https://learn.shayhowe.com/advanced-html-css/complex-selectors/\n  - https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/\n  - https://css-tricks.com/animate-different-end-states-using-one-set-css-keyframes/\n  - https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/\n  - https://www.youtube.com/watch?v=biOMz4puGt8\u0026feature=youtu.be\n  - https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/?mc_cid=dc1f45ab23\u0026mc_eid=f481edc5e2\n  - https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/\n  - https://ishadeed.com/article/understanding-z-index/\n  - https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3\n  - https://thisthat.dev/\n  - https://web.dev/learn/css/\n  - https://mozilladevelopers.github.io/playground/css-grid/\n  - https://cssgridgarden.com/?mc_cid=3192c5c130\u0026mc_eid=f481edc5e2#nl\n  - http://www.flexboxdefense.com/?mc_cid=3192c5c130\u0026mc_eid=f481edc5e2\n  - https://css-tricks.com/a-complete-guide-to-custom-properties/\n  - https://web.dev/learn/css/\n\n- **Advanced CSS techniques**\n  - https://ishadeed.com/article/css-scroll-snap/\n  - https://codersblock.com/blog/what-can-you-put-in-a-css-variable/\n  - https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/?mc_cid=dc1f45ab23\u0026mc_eid=f481edc5e2\n  - https://ishadeed.com/article/css-min-max-clamp/\n  - https://ishadeed.com/article/clip-path/\n  - https://ishadeed.com/article/css-short-long-content/\n  - https://www.albertwalicki.com/fall-in-love-with-single-div-images\n  - https://www.joshwcomeau.com/animation/css-transitions/\n  - https://christianheilmann.com/2021/03/13/conditional-animation-with-css-properties/\n  - https://css-tricks.com/exploring-property-and-its-animating-powers/\n  - https://calibreapp.com/blog/css-performance\n  - https://ishadeed.com/article/handling-text-over-image-css/\n  - https://ishadeed.com/article/practical-css-variables/\n  - https://markodenic.com/css-tips/\n  - https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/\n  - https://ishadeed.com/article/custom-scrollbars-css/\n  - https://css-tricks.com/conjuring-generative-blobs-with-the-css-paint-api/\n  - https://www.joshwcomeau.com/animation/3d-button/\n  - https://www.joshwcomeau.com/css/transforms/\n  - https://www.joshwcomeau.com/animation/keyframe-animations/\n  - https://www.joshwcomeau.com/css/make-beautiful-gradients/\n  - https://ishadeed.com/article/learn-css-subgrid/\n  - https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/\n  - https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/#naming-css-classes\n  - https://tilda.education/en/web-animation-course\n\n- **Learning JavaScript**\n  - https://htmldom.dev/\n  - https://1loc.dev\n  - https://learnjavascript.today/\n  - https://gist.github.com/joyrexus/7307312\n  - https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/\n  - https://denic.hashnode.dev/use-consolelog-like-a-pro\n  - https://github.com/ryanmcdermott/clean-code-javascript\n  - https://www.joshwcomeau.com/operator-lookup/\n  - https://javascript30.com\n  - https://1loc.dev\n  - https://egghead.io/courses/your-ultimate-guide-to-understanding-dom-events-6c0c0d23\n  \n- **Learning TypeScript**\n  - https://www.totaltypescript.com/tutorials/beginners-typescript\n\n- **Testing and accessibility**\n  - https://wcag.nl/\n  - https://design-system.w3.org/\n  - https://wave.webaim.org/\n  - https://validator.w3.org/\n  - https://squizlabs.github.io/HTML_CodeSniffer/\n  - https://khan.github.io/tota11y/\n  - https://github.com/GoogleChromeLabs/ProjectVisBug\n  - https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector\n  - https://hacks.mozilla.org/2019/09/webhint-in-firefox-devtools-improve-compatibility-accessibility-and-more/\n  - https://seesparkbox.com/foundry/semantic_tags_aria_attributes_descriptive_links_for_website_accessibility\n  - https://adamsilver.io/articles/building-an-accessible-autocomplete-control/\n  - https://fymmot.github.io/inclusive-dates/\n  - https://a11yresources.webflow.io/\n  - https://comica11y.humaan.com/\n  - https://gerireid.com/forms.html\n  - https://inclusive-components.design/\n  - https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/\n  - https://www.voorhoede.nl/nl/blog/why-skip-links-are-important-for-accessibility/\n  - https://practical-accessibility.today\n  - https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/\n  - https://www.smashingmagazine.com/2021/03/good-better-best-untangling-complex-world-accessible-patterns/\n  - https://css-tricks.com/front-end-testing-is-for-everyone/\n  - https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/\n  - https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/\n  - https://web.dev/building-a-button-component/\n  - https://web.dev/learn/accessibility/\n  - https://www.a11yproject.com/checklist/\n\n- **Email Coding**\n  - https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4\n  - https://thebetter.email/design/\n  - https://mjml.io/\n  - https://useparcel.com/\n\n- **Learning VIM**\n  - https://medium.com/actualize-network/how-to-learn-vim-a-four-week-plan-cd8b376a9b85\n  - https://danielmiessler.com/study/vim/\n  - https://www.openvim.com/tutorial.html\n  - http://www.vimgenius.com/\n  - https://vim-adventures.com\n  - https://vimvalley.com/\n  - https://www.tecmint.com/learn-vi-commands-with-pacvim-game/\n  - https://laracasts.com/series/vim-mastery\n  - https://www.barbarianmeetscoding.com/blog/2019/02/08/boost-your-coding-fu-with-vscode-and-vim\n  - https://www.youtube.com/playlist?list=PLnc_NxpmOxaNqdGvUg8RBi8ZTaZGPdqBD\n  - https://www.youtube.com/watch?v=l-FKO2UXFdk\n  - https://www.youtube.com/watch?v=SO9Sre5v6NA\n  - http://vimcasts.org/training/core-vim-course/\n\n- **Learning Vue**\n  - https://vueschool.io/?ref=blog\n  - https://accessible-vue.com/\n  - https://logaretm.com/blog/making-the-most-out-of-vuejs-injections/\n\n- **Learning UI Design**\n  - https://www.designbetter.co/\n  - https://refactoringui.com/\n  - https://learnui.design/\n  - https://radicaldesigncourse.com/\n  - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc\n  - https://www.zeichenschatz.net/typography/font-follows-feeling\n  - https://growth.design/psychology/\n  - https://fifty.user-interface.io/50_ui_tips.pdf\n\n- **Design Systems**\n  - https://designsystemchecklist.com/\n  - https://www.designbetter.co/design-systems-handbook\n  - https://seesparkbox.com/foundry/designing_for_design_systems\n  - https://designsystemsforfigma.com/\n  - https://component.gallery\n  - https://design-system.w3.org/\n\n- **Practice**\n  - https://www.keybr.com/\n  - https://bezier.method.ac/\n  - https://regexlearn.com/\n  - https://ohmygit.org/\n\n- **Code Snippets**\n  - https://github.com/markteekman/tiny-code\n  - https://www.30secondsofcode.org/\n\n- **Tools**\n  - https://caniuse.com/\n  - https://whocanuse.com/\n  - https://www.caniemail.com/\n  - https://caninclude.glitch.me/\n  - https://browserdefaultstyles.com/\n  - https://github.com/alyssaxuu/flowy\n  - https://source.unsplash.com/\n  - https://www.shapedivider.app/\n  - https://www.magicpattern.design/tools/css-backgrounds\n  - https://yqnn.github.io/svg-path-editor/\n  - https://squircley.app/\n  - https://blobs.app/\n  - https://doodad.dev/pattern-generator/\n  - https://omatsuri.app/\n  - https://brumm.af/shadows\n  - https://www.svgwaves.io\n  - https://ray.so\n  - https://www.svgrepo.com\n  - https://responsively.app\n  - https://plaiceholder.co\n  - https://bennettfeely.com/clippy/\n  - https://form.taxi/en\n  - https://www.svgbackgrounds.com/\n  - https://www.transition.style/\n  - https://pavellaptev.github.io/warp-svg/\n  - https://svgartista.net\n  - https://www.svgator.com\n  - https://svgjs.com/docs/3.0/\n  - https://www.smashingmagazine.com/2021/03/svg-generators/\n  - https://gitexplorer.com\n  - https://www.smashingmagazine.com/2021/04/vanilla-javascript-code-snippets/\n  - https://fluid-typography.netlify.app\n  - https://www.haroldjs.com\n  - https://www.happyhues.co\n  - https://haikei.app/\n  - https://astro.build/\n  - https://flagpack.xyz/\n  - https://www.joshwcomeau.com/shadow-palette/\n  - https://www.tldraw.com/\n  - https://fffuel.co/nnnoise/\n  - https://fffuel.co/ssshape/\n  - https://fffuel.co/nnneon/\n  - https://doodleipsum.com/\n  - https://atroposjs.com/\n  - https://motion.dev\n  - https://domevents.dev/\n  - https://letsenhance.io/\n  - https://reasonable.work/colors/\n  - https://pika.style/\n  - https://cleanup.pictures/\n  - https://www.scriptkit.com/\n  - https://partytown.builder.io/\n  - https://accesslint.com/\n  - https://randoma11y.com/\n\n- **Inspiration**\n  - https://tiny-helpers.dev/\n  - https://klart.io/pixels\n  - https://tympanus.net/codrops/\n  - https://codepen.io/oliviale/full/xxboXzo\n  - https://webflow.com/discover/popular#recent\n  - https://www.landingfolio.com/\n  - https://timetravel.pixelfika.com/\n  - https://www.stefanjudis.com/today-i-learned/\n  - https://onepagelove.com/inspiration/landing-page\n  - https://www.landingfolio.com/\n  - https://github.com/bradtraversy/50projects50days\n  - https://tinyblocks.cc\n  - https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/\n  - https://www.insanelyusefulwebsites.com/\n\n- **Design Resources**\n  - https://blush.design/\n  - https://www.drawkit.io/\n  - https://undraw.co/\n  - https://logoipsum.com/\n  - https://www.lapa.ninja/blog/free-illustrations-library-for-your-project/\n  - https://www.pixeltrue.com/free-illustrations\n\n- **Extra's**\n  - https://keyboardsimulator.xyz/\n  - https://ctjs.rocks/\n  - https://kaboomjs.com\n  - https://www.frontendpractice.com\n  - https://yare.io\n  - https://godotengine.org/\n  - https://lab.reaal.me/jsrobot/?mc_cid=3192c5c130\u0026mc_eid=f481edc5e2#level=1\u0026language=en\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkteekman%2Ffrontend-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkteekman%2Ffrontend-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkteekman%2Ffrontend-resources/lists"}