ASMR Programming: TESLA Website Project (No Talking)

In this ASMR Programming video I will be rebuilding the Tesla Website Homepage with smooth scroll snapping and css animation transitions effects on scroll. This is an HTML, CSS and JS Project. It will make use of the Javascript IntersectionObserver to figure out which section is visible, and will also be using fixed positioning on the content.

This video has keyboard typing sounds only, using the Nuphy Air 75 Keyboard.

Source Code: https://github.com/pilercodes/tesla

My Gear:

Nuphy Air 75 Keyboard: https://amzn.to/3RxSKe8
Sony ZV E10 Camera: https://amzn.to/3jBo3bh
Logitech Vertical Mouse: https://amzn.to/3l9urHo
HyperX Quadcast Microphone: https://amzn.to/3Y3UP45
Tobi Eye Tracker: https://amzn.to/3DSBbj9
Jarvis Desk: https://amzn.to/3jwuAnI

My Code Editor: Sublime Text 3

Chapters:

0:00 Base HTML Coding Using Emmet
4:10 Adding a Similar Free Google Font
5:10 Adding the Base CSS
12:11 Adding The Remaining HTML Sections For Scroll Snapping
15:44 Fixing CSS Issues/Typos
16:46 Adding IntersectionObserver and CSS Transition Animations
20:38 Adding Smooth Scroll Snapping
21:53 Make Footer Show On Last Snap Panel

Disclaimer: Please assume that any and all links in my video descriptions that lead you to a product or service are affiliate links, that I will receive a small commission on. I will only link to products and services that I use personally or have investigated and and believe they will deliver you value.

This video and build are for educational and entertainment purposes only.

#asmr #asmrcoding #programming #coding #css #html #webdevelopment #notalking #typing #keyboard

Тэги:

#asmr #asrm_programming #asmr_coding #html #css #js #javascript #css_grid #css_flex #css_flexbox #flexbox #grid #frontend #typing #clicking #website_project #html_css_project #js_project #no_talking #tesla_website #smooth_scrolling #snap_scrolling #scrolling_animation #css_transitions #css_smooth_scrolling #programming #web_development #websites

Скачать видео