https://github.com/markteekman/frontend-resources

A list of resources concerning front-end web development. From HTML, CSS and JavaScript to testing, accessibility, Atom packages, UI Design and Design Systems.
https://github.com/markteekman/frontend-resources

accessibility css front-end html javascript

Last synced: 19 days ago
JSON representation

A list of resources concerning front-end web development. From HTML, CSS and JavaScript to testing, accessibility, Atom packages, UI Design and Design Systems.

• Host: GitHub
• URL: https://github.com/markteekman/frontend-resources
• Owner: markteekman
• License: mit
• Created: 2020-01-06T09:22:39.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T07:42:12.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T13:33:31.639Z (about 1 month ago)
• Topics: accessibility, css, front-end, html, javascript
• Homepage: https://markteekman.nl
• Size: 50.8 KB
• Stars: 19
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# 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