Building An Immersive Creative Website From Scratch Without Frameworks - CoursesGhar
There are countless advantages to creating websites from scratch without using JavaScript frameworks such as React, Vue, or Angular. Especially when you want to create something unique that has never been done before on any other website. Writing code from scratch can be pleasant, easier and speed up your entire workflow by focusing on what really matters in an immersive web experience: animations, interactivity, and performance - and not in learning how to be productive within certain rules of a framework.

In this course, you'll learn how to set up your own boilerplate from scratch with all the technologies, tools, and libraries you need to get up to speed. We’ll teach you the right approach to using plain JavaScript in a website: we’ll cover Fetch API and History API, then integrate it with ECMAScript 2015+ classes that will use Promises to animate in and animate out your views in a seamless way.

We’ll also learn how to construct reusable component classes that can speed up your development process. Finally, we’ll learn how to integrate the plain JavaScript setup with animation-focused libraries such as GSAP, OGL, and Three.js, making your website stand out from all the rest.

By the end of this course, you’ll be able to create a top-notch website, learn some Front End technologies and tools such as Pug (Template Engine), SASS/SCSS + PostCSS (CSS Preprocessor), Babel (ECMAScript 2015+ JavaScript compiler), and Webpack (Assets Bundler) and finally learn how to integrate everything with industry-standard libraries like GSAP, OGL and Three.js to enhance your website even more.

This course is for all professional levels. Both beginners, as well as intermediate students, will be able to follow using the step-by-step approach.

Course Outline:

Introduction to our project: Floema by Luca Franceschetti

Why should you learn how to implement websites from scratch
The advantages of using plain JavaScript without frameworks
Introduction to build - npm and Webpack
Introduction to architecture - Express, Prismic and SEO
Introduction to tools - Pug, SCSS and Babel (ES6+)
Introduction to libraries - GSAP, Lodash and OGL
Installing Node.js + NPM
Installing VS Code and Plugins
Why you should create your own boilerplate
Setting up your project build structure using Webpack
How to make your folders and files organized
Structuring the views of your project using Express + Pug
Integrating Prismic with your project
Implementation of semantic HTML with Pug, Prismic and Express
Including the stylization of your project using SCSS + BEM + PostCSS
Tips and Tricks of exporting assets from XD and using Pixel Perfect approach to implement CSS in your project
Implementing responsive styles using SCSS
Setting up the JavaScript architecture of your application
Structuring your application components and implementing preloading transitions
Implementation of smooth scrolling and animation library GSAP
Using IntersectionObserver to animate in elements in your application
Polishing up transitions in the application and wrapping up HTML, CSS and JavaScript implementation
Fixing History API with back forward browser and implement UA Parser for mobile, tablet, desktop checks
Introduction to WebGL and industry-standard libraries
Implementation of initial WebGL structure with OGL
Implementing a draggable view with WebGL
Transforming draggable view in infinite
Implementing WebGL page transitions and an infinite slider
Including slightly rotation in our WebGL infinite slider
Integration of WebGL slider with DOM elements active-deactive states
Performance improvements by preloading all textures to GPU
Implementing vertex distortion using GLSL code
Seamless WebGL transitions between pages using fake elements
Updating Collections page interactions
Introduction to Digital Ocean
Setting up Digital Ocean droplet