Hurry Up! Vote for your favorites this month in the Awwwards Honors!

Building an immersive creative website from scratch without frameworks

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 25 Hours 52 Mins
Now
11.99$
/$100

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.

Category Course format Language Duration Level
Code, UX Design Online English with Subt. 25 Hours 52 Mins All Levels

Requirements

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.


Description

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. 

More Info

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.

You will learn

  • How to set up your own boilerplate from scratch
  • The latest tools and libraries you need to get up to speed
  • The right approach to using plain JavaScript in a website
  • Learn most used Front End technologies and tools
  • Integrate everything with GSAP, OGL and Three.js

The course includes

  • 25 hours of practical and condensed knowledge
  • Immediate access to the entire collection of videos
  • Course Documentation
  • Source Code
  • Valuable links and resources for every lesson

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Introduction
    • 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
  • Lesson 2
    Workflow and Tooling
    • 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
  • Lesson 3
    Setup
    • 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
  • Lesson 4
    Building the project structure
    • 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
  • Lesson 5
    Architecture of plain JavaScript
    • 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
  • Lesson 6
    Implementation of WebGL interactions
    • 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
  • Lesson 7
    Releasing the project
    • Introduction to Digital Ocean
    • Setting up Digital Ocean droplet

Meet the teacher

Luis Henrique Bizarro

Interactive Developer at Active Theory

Luis Henrique Bizarro is a Brazilian Creative Developer based in São Paulo, Brazil currently working at Active Theory. He has worked in technically challenging projects for renowned international brands like Nike, Google, Airbnb, Samsung, Lufthansa, Shell, Corvette, Chevrolet, HBO, and Cartoon Network using cutting-edge technologies such as WebGL, GLSL, and JavaScript.

Now
11.99$
/$100

Course Content

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.

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • All Levels
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses