Creative Days 75% off
BESTSELLER Special offer Building an immersive creative website from scratch without frameworks By Luis Henrique Bizarro
Creative Days!
$100 $25
Building an immersive creative website from scratch without frameworks
English English, Spanish, French (+3) [Machine translation]
25 Hours 52 Mins Course

Building an immersive creative website from scratch without frameworks

Creative Days!     $100 $25

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.

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

7 sections • 37 lectures • 25 hours 52 mins

  • Introduction
    3 lectures 23:27 Mins
    • Introduction to our project: Floema by Luca Franceschetti
      Watch Free - 05:18 Mins
    • Why should you learn how to implement websites from scratch
      10:06 Mins
    • The advantages of using plain JavaScript without frameworks
      08:03 Mins
  • Workflow and Tooling
    4 lectures 34:34 Mins
    • Introduction to build - npm and Webpack
      01:43 Mins
    • Introduction to architecture - Express, Prismic and SEO
      06:48 Mins
    • Introduction to tools - Pug, SCSS and Babel (ES6+)
      14:34 Mins
    • Introduction to libraries - GSAP, Lodash and OGL
      11:29 Mins
  • Setup
    5 lectures 2 Hours 11 Mins
    • Installing Node.js + NPM
      03:15 Mins
    • Installing VS Code and Plugins
      07:41 Mins
    • Why you should create your own boilerplate
      05:03 Mins
    • Setting up your project build structure using Webpack
      1 Hour 41 Mins
    • How to make your folders and files organized
      14:23 Mins
  • Building the project structure
    6 lectures 9 Hours 9 Mins
    • Structuring the views of your project using Express + Pug
      1 Hour 8 Mins
    • Integrating Prismic with your project
      1 Hour 24 Mins
    • Implementation of semantic HTML with Pug, Prismic and Express
      1 Hour 26 Mins
    • Including the stylization of your project using SCSS + BEM + PostCSS
      52:55 Mins
    • Tips and Tricks of exporting assets from XD and using Pixel Perfect approach to implement CSS in your project
      3 Hours 17 Mins
    • Implementing responsive styles using SCSS
      1 Hour 2 Mins
  • Architecture of plain JavaScript
    6 lectures 4 Hours 40 Mins
    • Setting up the JavaScript architecture of your application
      1 Hour 11 Mins
    • Structuring your application components and implementing preloading transitions
      43:17 Mins
    • Implementation of smooth scrolling and animation library GSAP
      43:27 Mins
    • Using IntersectionObserver to animate in elements in your application
      49:16 Mins
    • Polishing up transitions in the application and wrapping up HTML, CSS and JavaScript implementation
      48:36 Mins
    • Fixing History API with back forward browser and implement UA Parser for mobile, tablet, desktop checks
      25:11 Mins
  • Implementation of WebGL interactions
    11 lectures 8 Hours 30 Mins
    • Introduction to WebGL and industry-standard libraries
      20:05 Mins
    • Implementation of initial WebGL structure with OGL
      38:04 Mins
    • Implementing a draggable view with WebGL
      53:05 Mins
    • Transforming draggable view in infinite
      47:21 Mins
    • Implementing WebGL page transitions and an infinite slider
      55:41 Mins
    • Including slightly rotation in our WebGL infinite slider
      30:11 Mins
    • Integration of WebGL slider with DOM elements active-deactive states
      50:57 Mins
    • Performance improvements by preloading all textures to GPU
      46:58 Mins
    • Implementing vertex distortion using GLSL code
      50:12 Mins
    • Seamless WebGL transitions between pages using fake elements
      1 Hour 32 Mins
    • Updating Collections page interactions
      30:07 Mins
  • Releasing the project
    2 lectures 25:54 Mins
    • Introduction to Digital Ocean
      03:17 Mins
    • Setting up Digital Ocean droplet
      22:37 Mins
Luis Henrique Bizarro
Work Work Work 
Work Work Work 

Learn the full process of creating websites from scratch without using JavaScript frameworks such as React, Vue, or Angular., from the talented and experienced Luis H. Bizarro, member of the Awwwards Jury and ten times Site of the Day winner.
Jessica Travieso
Jessica Travieso Chief Content Officer / Co-founder of Awwwards
Course details

Building an immersive creative website from scratch without frameworks

Building an immersive creative website from scratch without frameworks

By Luis Henrique Bizarro

$25 75% off $100

Creative Days

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • All Levels
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Luis Henrique Bizarro

    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.

Similar Courses