frontend-resources
frontend-resources copied to clipboard
markteekman
A list of resources concerning front-end web development. From HTML, CSS and JavaScript to testing, accessibility, Atom packages, UI Design and Design Systems.
Frontend Resources
A list of resources concerning front-end web development.
-
Learning HTML
- https://9elements.com/bem-cheat-sheet/
- https://www.codecademy.com/courses/learn-html/lessons/html-forms/exercises/forms-intro
- https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/introduction-to-semantic-html
- https://getfrontend.tips/all.html
- https://web.dev/learn/html/
-
Learning CSS
- https://moderncss.dev
- https://every-layout.dev
- https://css-animations.io/
- https://flukeout.github.io/
- https://wattenberger.com/blog/css-percents
- https://mastery.games/p/flexbox-zombies
- https://sass-lang.com/blog/the-module-system-is-launched
- https://dev.to/huijing/understanding-positioning-in-css-7mn
- https://cssguidelin.es/
- https://sass-guidelin.es/
- https://wattenberger.com/blog/css-cascade
- https://dev.to/emmawedekind/css-specificity-1kca
- https://sass-lang.com/documentation/style-rules/declarations#custom-properties
- https://ishadeed.com/article/learn-css-positioning/
- https://learn.shayhowe.com/advanced-html-css/complex-selectors/
- https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/
- https://css-tricks.com/animate-different-end-states-using-one-set-css-keyframes/
- https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/
- https://www.youtube.com/watch?v=biOMz4puGt8&feature=youtu.be
- https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/?mc_cid=dc1f45ab23&mc_eid=f481edc5e2
- https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
- https://ishadeed.com/article/understanding-z-index/
- https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3
- https://thisthat.dev/
- https://web.dev/learn/css/
- https://mozilladevelopers.github.io/playground/css-grid/
- https://cssgridgarden.com/?mc_cid=3192c5c130&mc_eid=f481edc5e2#nl
- http://www.flexboxdefense.com/?mc_cid=3192c5c130&mc_eid=f481edc5e2
- https://css-tricks.com/a-complete-guide-to-custom-properties/
- https://web.dev/learn/css/
-
Advanced CSS techniques
- https://ishadeed.com/article/css-scroll-snap/
- https://codersblock.com/blog/what-can-you-put-in-a-css-variable/
- https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/?mc_cid=dc1f45ab23&mc_eid=f481edc5e2
- https://ishadeed.com/article/css-min-max-clamp/
- https://ishadeed.com/article/clip-path/
- https://ishadeed.com/article/css-short-long-content/
- https://www.albertwalicki.com/fall-in-love-with-single-div-images
- https://www.joshwcomeau.com/animation/css-transitions/
- https://christianheilmann.com/2021/03/13/conditional-animation-with-css-properties/
- https://css-tricks.com/exploring-property-and-its-animating-powers/
- https://calibreapp.com/blog/css-performance
- https://ishadeed.com/article/handling-text-over-image-css/
- https://ishadeed.com/article/practical-css-variables/
- https://markodenic.com/css-tips/
- https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/
- https://ishadeed.com/article/custom-scrollbars-css/
- https://css-tricks.com/conjuring-generative-blobs-with-the-css-paint-api/
- https://www.joshwcomeau.com/animation/3d-button/
- https://www.joshwcomeau.com/css/transforms/
- https://www.joshwcomeau.com/animation/keyframe-animations/
- https://www.joshwcomeau.com/css/make-beautiful-gradients/
- https://ishadeed.com/article/learn-css-subgrid/
- https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/
- https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/#naming-css-classes
- https://tilda.education/en/web-animation-course
-
Learning JavaScript
- https://htmldom.dev/
- https://1loc.dev
- https://learnjavascript.today/
- https://gist.github.com/joyrexus/7307312
- https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
- https://denic.hashnode.dev/use-consolelog-like-a-pro
- https://github.com/ryanmcdermott/clean-code-javascript
- https://www.joshwcomeau.com/operator-lookup/
- https://javascript30.com
- https://1loc.dev
- https://egghead.io/courses/your-ultimate-guide-to-understanding-dom-events-6c0c0d23
-
Learning TypeScript
- https://www.totaltypescript.com/tutorials/beginners-typescript
-
Testing and accessibility
- https://wcag.nl/
- https://design-system.w3.org/
- https://wave.webaim.org/
- https://validator.w3.org/
- https://squizlabs.github.io/HTML_CodeSniffer/
- https://khan.github.io/tota11y/
- https://github.com/GoogleChromeLabs/ProjectVisBug
- https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector
- https://hacks.mozilla.org/2019/09/webhint-in-firefox-devtools-improve-compatibility-accessibility-and-more/
- https://seesparkbox.com/foundry/semantic_tags_aria_attributes_descriptive_links_for_website_accessibility
- https://adamsilver.io/articles/building-an-accessible-autocomplete-control/
- https://fymmot.github.io/inclusive-dates/
- https://a11yresources.webflow.io/
- https://comica11y.humaan.com/
- https://gerireid.com/forms.html
- https://inclusive-components.design/
- https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
- https://www.voorhoede.nl/nl/blog/why-skip-links-are-important-for-accessibility/
- https://practical-accessibility.today
- https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
- https://www.smashingmagazine.com/2021/03/good-better-best-untangling-complex-world-accessible-patterns/
- https://css-tricks.com/front-end-testing-is-for-everyone/
- https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/
- https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/
- https://web.dev/building-a-button-component/
- https://web.dev/learn/accessibility/
- https://www.a11yproject.com/checklist/
-
Email Coding
- https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4
- https://thebetter.email/design/
- https://mjml.io/
- https://useparcel.com/
-
Learning VIM
- https://medium.com/actualize-network/how-to-learn-vim-a-four-week-plan-cd8b376a9b85
- https://danielmiessler.com/study/vim/
- https://www.openvim.com/tutorial.html
- http://www.vimgenius.com/
- https://vim-adventures.com
- https://vimvalley.com/
- https://www.tecmint.com/learn-vi-commands-with-pacvim-game/
- https://laracasts.com/series/vim-mastery
- https://www.barbarianmeetscoding.com/blog/2019/02/08/boost-your-coding-fu-with-vscode-and-vim
- https://www.youtube.com/playlist?list=PLnc_NxpmOxaNqdGvUg8RBi8ZTaZGPdqBD
- https://www.youtube.com/watch?v=l-FKO2UXFdk
- https://www.youtube.com/watch?v=SO9Sre5v6NA
- http://vimcasts.org/training/core-vim-course/
-
Learning Vue
- https://vueschool.io/?ref=blog
- https://accessible-vue.com/
- https://logaretm.com/blog/making-the-most-out-of-vuejs-injections/
-
Learning UI Design
- https://www.designbetter.co/
- https://refactoringui.com/
- https://learnui.design/
- https://radicaldesigncourse.com/
- https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
- https://www.zeichenschatz.net/typography/font-follows-feeling
- https://growth.design/psychology/
- https://fifty.user-interface.io/50_ui_tips.pdf
-
Design Systems
- https://designsystemchecklist.com/
- https://www.designbetter.co/design-systems-handbook
- https://seesparkbox.com/foundry/designing_for_design_systems
- https://designsystemsforfigma.com/
- https://component.gallery
- https://design-system.w3.org/
-
Practice
- https://www.keybr.com/
- https://bezier.method.ac/
- https://regexlearn.com/
- https://ohmygit.org/
-
Code Snippets
- https://github.com/markteekman/tiny-code
- https://www.30secondsofcode.org/
-
Tools
- https://caniuse.com/
- https://whocanuse.com/
- https://www.caniemail.com/
- https://caninclude.glitch.me/
- https://browserdefaultstyles.com/
- https://github.com/alyssaxuu/flowy
- https://source.unsplash.com/
- https://www.shapedivider.app/
- https://www.magicpattern.design/tools/css-backgrounds
- https://yqnn.github.io/svg-path-editor/
- https://squircley.app/
- https://blobs.app/
- https://doodad.dev/pattern-generator/
- https://omatsuri.app/
- https://brumm.af/shadows
- https://www.svgwaves.io
- https://ray.so
- https://www.svgrepo.com
- https://responsively.app
- https://plaiceholder.co
- https://bennettfeely.com/clippy/
- https://form.taxi/en
- https://www.svgbackgrounds.com/
- https://www.transition.style/
- https://pavellaptev.github.io/warp-svg/
- https://svgartista.net
- https://www.svgator.com
- https://svgjs.com/docs/3.0/
- https://www.smashingmagazine.com/2021/03/svg-generators/
- https://gitexplorer.com
- https://www.smashingmagazine.com/2021/04/vanilla-javascript-code-snippets/
- https://fluid-typography.netlify.app
- https://www.haroldjs.com
- https://www.happyhues.co
- https://haikei.app/
- https://astro.build/
- https://flagpack.xyz/
- https://www.joshwcomeau.com/shadow-palette/
- https://www.tldraw.com/
- https://fffuel.co/nnnoise/
- https://fffuel.co/ssshape/
- https://fffuel.co/nnneon/
- https://doodleipsum.com/
- https://atroposjs.com/
- https://motion.dev
- https://domevents.dev/
- https://letsenhance.io/
- https://reasonable.work/colors/
- https://pika.style/
- https://cleanup.pictures/
- https://www.scriptkit.com/
- https://partytown.builder.io/
- https://accesslint.com/
- https://randoma11y.com/
-
Inspiration
- https://tiny-helpers.dev/
- https://klart.io/pixels
- https://tympanus.net/codrops/
- https://codepen.io/oliviale/full/xxboXzo
- https://webflow.com/discover/popular#recent
- https://www.landingfolio.com/
- https://timetravel.pixelfika.com/
- https://www.stefanjudis.com/today-i-learned/
- https://onepagelove.com/inspiration/landing-page
- https://www.landingfolio.com/
- https://github.com/bradtraversy/50projects50days
- https://tinyblocks.cc
- https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/
- https://www.insanelyusefulwebsites.com/
-
Design Resources
- https://blush.design/
- https://www.drawkit.io/
- https://undraw.co/
- https://logoipsum.com/
- https://www.lapa.ninja/blog/free-illustrations-library-for-your-project/
- https://www.pixeltrue.com/free-illustrations
-
Extra's
- https://keyboardsimulator.xyz/
- https://ctjs.rocks/
- https://kaboomjs.com
- https://www.frontendpractice.com
- https://yare.io
- https://godotengine.org/
- https://lab.reaal.me/jsrobot/?mc_cid=3192c5c130&mc_eid=f481edc5e2#level=1&language=en
Metadata
20
Stars
3
Forks
Watchers
Owner
markteekman
Metadata
A list of resources concerning front-end web development. From HTML, CSS and JavaScript to testing, accessibility, Atom packages, UI Design and Design Systems.