frontend-resources

KO | EN

gitlite — search

#php #python #javascript #ruby #hacktoberfest #vim #video #dotfiles #macos #plugin #osdev #cross-platform

frontend-resources

★ 20 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

frontend-resources

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README