Code Resources

Code Demos

• Parallax Mouse Move code
• Basic Site Template
• 
• Lots of cool tricks from Elementor
• Sketch.js
• full width infinite slidehow
• One Page Smooth Scroll
• Parallax milti-item-floatscode
• TinyPNG.comvideo
• Javascript in 14 minutes
• Slick Slideshow code (zip)video
• Fairy lights photo gallery
• Background image swap
  code
• Scrolling clouds background image animation using css
  code
• typewriter effect
  code | video
• Hamburger nav
  action shot code
• Seven Minute ScrollMagic Video Demo
• Video Demo: SVG Animations with CSS
• Vertical Centering
• A bunch of accordian website demos
• Nice vertical slide carousel
• Alanna's Parallax Demo

  code

• Animate On Scroll
• Infinite looping marquee
• Image cube effect
• This not this + svg rotate layer
  code
• 

  code view it in action

• Justified - auto grid an image gallery with images of different heights and widths
• Make Background
• 

  code

• jquery modal
• Scroll Magic - Good horizontal scroll plus scroll points.

  Free Course

• Backstretch - Have a slideshow in your background
• FormSpree forms
• Absolute Positioning

  code

• Potato, aka the jquery click-reveal
• 
• 
  SVG circle sunset using CSS Animation

  code

• 

  examples

Articles

• wireframing for clients
• how to create your first wireframe

JQuery tutorials

• The jquery version of W3Schools
• Traversy Media: JQuery Intro and selectors
• Traversy Media: JQuery - Events
• Traversy Media: JQuery DOM manipulation

JQuery snippets and libraries

• Thom Hine's carousel slideshow code and my video on how to get it to work.
• sticky pages
• Time
• CircleType.js
• FitText.js
  
• locomotive parralax
• The Gooey Effect gooey menu
• Image Slice flip ripple Codepen

JQuery tutorials

• The jquery version of W3Schools
• Traversy Media: JQuery Intro and selectors
• Traversy Media: JQuery - Events
• Traversy Media: JQuery DOM manipulation

JQuery snippets and libraries

• SPZoom (square zoom):
• OKZOOM (round zoom lens): github:
• Pan Zoom - a little too crazy
• BackStretch add a slideshow to your background images
• Scroll Magic
• typewriter Version One
• typewriter Version Two | View Code | See Video Demo
• Thom Hine's carousel slideshow code and my video on how to get it to work.
• Background image swap
• sticky pages
• Time
• Scrolling clouds background image animation using css
• CircleType.js
• FitText.js
  
• locomotive parralax

Modals

• six(ish) flavors https://codepen.io/obadaa/pen/gObyjmB
• basic modal: https://codepen.io/elyanaa/pen/OJPGOeL

Useful Links

• Ultimate Google Font Pairings
• MixFont Google font pairing generator
• The Pattern Library
• Subtle Patterns
• Undraw Free vector graphics

P5.js

Books and Docs

• DevDoc.io

Beyond!

FreeCodeCamp.org has... you guessed it! A free code camp! Actually they have several paths to choose from. A few front-end ones are: responsive web design, front-end libraries. They also have a fantastic YouTube channel chock full of videos.

I just discovered Coder Coder. She focuses on front-end HTML and CSS

I really love skillshare for classes on front-end web development and design, UX, UI, and branding. It's a monthly subscription that costs $15 a month. They have some free classes too

p5.js, the javascript version of the processing library that is taught in the creative coding class is a fun way to add animations to your websites.

You can buy your own custom domain and hook it up to github pages! Yep! For like less than $10 a year, you can have a free website. Here's how to set it up if you register with namecheap. Here's how to set it up if you register through google domains.

LearnWebCode has a Learn HTML, Learn CSS, and Learn JQuery and Javascript playlist on his YouTube channel.