Crouther.github.io

https://drive.google.com/file/d/1DfnvJWVQ6gozlBV9dVgWjPXr9Ly4T4sw/view?usp=drivesdk

Readers,

This repository is a reflection of my web development practices. The site is developed from scratch using personal knowledge and open resources. No major library or framework is leveraged. The site is powered by original code or fundamental HTML, CSS, or Javascript features. This is a digital portfolio of work I've done and a simple resume of my coding capabilities.

GitHub Stats (7/26/19) -

Commits	Repos (Evaluated)	Lines of code
415	8	43788

Custom Template Styleguides

(Divvied among multiple, customized, base templates; such as AvantFlat, StrictlyBusiness, and FirstLanding)

HTML	CSS	JavaScript
~3000+ lines	~1000+ lines	850+ lines

Documentation

This is a collection of documentation and resources I used to build each iteration of my portfolio and many other web stack applications and concepts.

Markup Languages:

HTML:

Best resources for learning and practicing HTML is from major resource libraries and websites that review the fundamentals language.

Documentation:

• https://www.w3schools.com/html/default.asp

• https://developer.mozilla.org/en-US/docs/Web/HTML

• https://www.udemy.com/the-complete-web-developer-course-2/

Other Frequent References:

“10 HTML Tags You Didn’t Know You Needed” by Emma Wedekind https://link.medium.com/tE9k3M4DgVzÆ

CSS:

Best resources for learning and practicing CSS is from major resource libraries and websites that review the fundamentals language. Also listed are various guides for additional markup implementations of CSS like SCSS / SASS

Documentation:

• https://www.w3schools.com/css/default.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS

• https://medium.freecodecamp.org/the-complete-guide-to-scss-sass-30053c266b23

Other Frequent References:

Flexbox & Grid-

• https://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468

• https://www.sitepoint.com/introduction-css-grid-layout-module/

Transformations:

• Transform and Skewing Objects (Canvas)-

  • https://www.w3schools.com/cssref/css3_pr_transform.asp

• Applications:

  • Inspiration:

    • http://bestfolios.com/casestudy/ebaycardpattern

Scripting Languages:

JavaScript:

Best resources for learning and practicing JavaScript is from major resource libraries and websites that review the fundamentals language.

Documentation:

• http://www.cheat-sheets.org/sites/javascript.su/

• https://developer.mozilla.org/en-US/docs/Web/JavaScript

• https://www.w3schools.com/js/

Other Frequent References:

• Promises-

  • https://developers.google.com/web/fundamentals/primers/promises

• WebGL-

  • http://learningwebgl.com/blog/?page_id=1217

• Web Component Concepts-

  • https://scotch.io/bar-talk/a-new-code-editor-for-the-web/amp

• Full Page Load Time Animation & Priority-

  • https://stackoverflow.com/questions/12557378/javascript-jquery-page-load-specific-images-first-in-order

• Slideshow-

  • https://www.the-art-of-web.com/css/fading-slideshow-no-jquery/

• Text Print Out Loop-

  • https://codepen.io/hi-im-si/pen/DHoup

PHP:

Learning the basics of PHP and creating WordPress Themes:

• https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/

• https://colorlib.com/wp/how-to-create-unique-wordpress-themes-tutorials/

Web Components

Animations:

There are various ways to implement web animations. CSS3 released a large library of native transformations, translations, and motions. Leveraging keyframes and “functions” one can animate specific tags and “ID’s”. Writing your own JavaScript animations or jQuery function can also work. SVG is an image format with support for animating its graphics. Review documentation below to get the gist of what’s available.

Documentation:

• https://api.jquery.com/

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc

Other Frequent References:

• SVG Line Animations-

  • https://css-tricks.com/svg-line-animation-works/

• Ripple Animations-

  • https://codepen.io/anon/pen/aVyygE

• Box-

  • https://codepen.io/Rplus/pen/lEDBj

• Menu Button-

  • https://codemyui.com/hamburger-button-doughnut-menu-animation/

Concepts:

Growing Roots- "Box with image, image border radius fluctuates, based on time like branches of a tree or roots growing and shrinking"

Launch Animation- An object is selected form the header, the object drops like a diamond/raindrop, hits the bottom of the screen, bounces back up and opens the web page.

The trick to fluid animations is the predication of motion on the display and hyperbolizing the motion to make the gesture more eccentric

Inspiration:

I like how they did these mild motion graphics-
https://discordapp.com/invite/apple

Resources:

Icon Packs:

https://icons8.com/
https://www.flaticon.com/
https://www.flaticon.com/packs/web-seo-3
https://www.flaticon.com/packs/development-47
https://www.flaticon.com/packs/design-thinking

Marketplaces:

WordPress- https://www.linkedin.com/pulse/8-marketplaces-where-you-can-sell-wordpress-plugins-themes-samdani

Inspirational Code Samples:
Mock-ups-
https://dribbble.com/shots/6157473-C4D-Essential-Training-Part-2?utm_campaign=2019-03-18&utm_medium=email&utm_source=replay

https://cdn.dribbble.com/users/1145170/videos/17425/holo_design_system_website_1.mp4

Resources and Design Tools: https://icons8.com/
Landing Pages- Dribbble
Landing Pages- Behance
Web Apps- CoDrops
Design Company- Heckhouse
Animations- https://codemyui.com/
Responsive Company- http://tiguandesign.com/
Web Designers- https://www.reddit.com/r/web_design/comments/3m74v4/looking_for_inspiration_sites_like_codrops_and/?st=jeinryqb&sh=3482c88d
Designers Trends- https://medium.muz.li/dribbble-trend-mondrianizm-c19f3fafa5e9
Design Collection- https://designmodo.com/free-tools-web-developers/

Stock Images / Photography:

Images:

https://unsplash.com/public-domain-images

https://www.flickr.com/photos/biodivlibrary

Technology Photographs:

https://lh3.googleusercontent.com/5gQoY9GL9dHa_Pakl6WQYyWkTeD0jISLdhaqbSBmtdfGJKaTrgsGaGWK1WWuNjbpuqUPWf6yrt74asgXgDlPrkbLDzzQg1d3AIavqjRpxhhbpWq-EQ3mv1GI5nrjEaoTqf853R_j6UBz-twGKN4cv8dtKCxbwOJEd0-ZFkis7qRcbYZYBxuTDVFcPRQNVFfdDjEr6olfzLP8URFpRj9DoCgD-cEQQeudnUWhObfHlvt2Ls_SA0jcwMHHlSb5L44ExPvEv6RYUDYpN9YZZ2DNhmKYnzxg9MzNEopNpMkaAe0Ard0qEUzNho9lsjzPVY7xFTKX-b2bwBDl5XKFCSWvxbhP8KflKEYnFt2ESws3mLpdMlmCeeo37cIF4a1-3dFcS4f3A_80jVznSdM9OwzGCzeE5bh7Mn07TAQ-LAymdIJEegvtd-TpMvWDtzAfmAHxqWH6AFPuHUaQ-Y3G0d2eF_UiguVIyhJJzp1iaxvJDDbVpEGGvv54nfEw2hV3jo6M0-BZ6XeG5ov5Ybot7UgR_v6Tm99fQK6Us8ryOXn_UI6RJnDAvuX6-474yT-LfTDELyVYE-YCU3cNpV8SASG6azCbWVx1pjag3xGHnApdPHs=w2600-h1952-no

https://lh3.googleusercontent.com/rLD-BJRLy0LTroZ9q5ZvEqgAVv46TwY93WCO6leAM_TfirthxpqkutTr8e4f4MnVWabW7BjMuRLJt-QVLl1s5pgjvxzRvXRH7hWxGprYayeRXbUBrCOIG0YYuncWoJgzRZbRXy4Qq4zjjvADXvrP_WmjMMjI42JN69ZSPu0eaY4X7Wlmm1aPt8fEvhjHiHPPIBoMAVaCO3NVh3ZANti9BPLWVwSVSgnZHgzO3BjWYFsOQp9WB8loG4A73Uhtbp0kedESnDZAXzJdrmCjTSwfNBH9fm1lfudwWUPINmzhz32NlHul5mnA5HMiFDpiTBz6bajpDLZLUICG7_gkreTWmu6agHl_I9Sm14VNjT-v3eIUsWxPWOeYyUPuEoeFGYwO994zdEcfaJml9ImKGSApAr0wwvFfBRmRm9T2yrwZmeVLTKfHsxgH6hDmKfmmU0-b8eiyMSeZ-YqQL0yRp3zL1Bjl68WN9c88J88fzO6dzmkwIZt6DXiq_PqYLxPZGQ0Q5WI42P_X_rLw9rcyoSk-KVKZjr3dlDwvSMdpF5RztC5alUWyV-thkLvlfMI4_mDXc8zmvSEAlPhJpy7U9sKI7RycCrkbImgAOjhKzpbINVU=w2600-h1952-no

Concept Idea:

Binary numbers forming diamonds with alternating color schemes. Combining the ideas and producing images based off of the files given from links attached below:

https://www.freepik.com/free-vector/polygonal-shapes-on-a-transparent-background_1074458.htm

https://www.freepik.com/free-vector/vector-background-abstract-polygon-triangle-polygonal-design-geometrical_1374767.htm

Research:

Topics:

https://arxiv.org/pdf/1806.00923.pdf
http://omdbapi.com/
http://github.com/joeldevlearning/javascript-2 https://drive.google.com/file/d/1npRkyjo00pOTqfJ67Gt1jHekpkZVHNTG/view?usp=sharing