Get a 50% discount when you buy 2 courses or more!
NEW PRE-ORDER Building an immersive creative website from scratch without frameworks By Luis Henrique Bizarro
This offer ends:
$100 $35
Building an immersive creative website from scratch without frameworks
English English, Spanish, French (+3)
6 Hours Course

Building an immersive creative website from scratch without frameworks

Pre-order $100 $35

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.

Pre-order. This special price is available as you are buying the course in advance. The course will be available at the end of April. The price will increase as we get closer to the date and once it’s online it will be full price - so register now for a big discount.

(*) The times of the chapters as well as the total duration of the course are approximate and may have some variation

  • JavaScript
  • Three.js
  • Front End
  • UX Design
  • Interaction Design
  • GSAP
  • Pug
Course Table of Contents
What will you learn?

8 sections • 37 lectures • 6 Hours total length

  • Welcome
    4 lectures 19:30 Mins
    • Introduction
      02:20 Mins
    • Why should you learn how to implement websites from scratch?
      05:00 Mins
    • The advantages of using plain JavaScript without frameworks
      03:40 Mins
    • How your workflow can help get up to speed on what really matters
      08:30 Mins
  • Workflow and Tooling
    5 lectures 1 Hour 15 Mins
    • What tools are we going to use and why?
      10:30 Mins
    • Introduction to build: npm and Webpack
      20:15 Mins
    • Introduction to architecture: Express, Prismic and SEO
      15:40 Mins
    • Introduction to tools: Pug, SCSS and Babel (ES6+)
      17:30 Mins
    • Introduction to libraries: GSAP, Lodash and OGL
      20:15 Mins
  • Setup
    5 lectures 1 Hour 4 Mins
    • Installing Node.js + NPM
      20:10 Mins
    • Using npm to install dependencies in your project
      15:30 Mins
    • Why you should create your own boilerplate
      08:40 Mins
    • Setting up your project build structure using Webpack
      15:20 Mins
    • How to make your folders and files organized
      05:10 Mins
  • Building the project structure
    3 lectures 1 Hour 16 Mins
    • Structuring the views of your project using Express + Pug
      15:40 Mins
    • Including the stylization of your project using SCSS + BEM + PostCSS
      30:10 Mins
    • Implementing the plain JavaScript architecture of your project
      30:15 Mins
  • Integrating with CMS
    5 lectures 1 Hour 5 Mins
    • Why the plain JavaScript approach is platform agnostic and works with any CMS/structure
      10:30 Mins
    • Integrating Prismic with your project
      15:30 Mins
    • Creating your Prismic account
      08:10 Mins
    • Organizing your pages and fields in Prismic
      12:40 Mins
    • How to integrate your views with Prismic and Express
      18:20 Mins
  • Architecture of plain JavaScript
    8 lectures 2 Hours 54 Mins
    • Setting up ES6 reusable classes with OOP concepts
      15:15 Mins
    • How to break down your scripts into minimal functions and classes
      12.20 Mins
    • Implementing your application entrypoint: App.js
      18:35 Mins
    • Structuring your application with components, pages and utilities classes
      25:15 Mins
    • Implementing your own routing system with AJAX and Promises
      30:40 Mins
    • Integrating animation guards in your pages with animate in/out functions
      30:10 Mins
    • Creating reusable animations and components with classes
      15:30 Mins
    • How to integrate your application with WebGL in a non-complex way
      25:50 Mins
  • Releasing your project
    6 lectures 59:55 Mins
    • Introduction to Digital Ocean
      08:05 Mins
    • Creating your Digital Ocean account
      05:10 Mins
    • Setting up everything needed in a Digital Ocean droplet
      12:25 Mins
    • Testing web performance with Lighthouse
      15:20 Mins
    • Setting up HTTPS + HTTP2.0 and other server-related configurations
      20:15 Mins
    • Releasing your project to the world
      08:40 Mins
  • Conclusion
    1 lectures 10:45 Mins
    • Review of what you’ve learned and all future possibilities
      10.45 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

  • JavaScript
  • Three.js
  • Front End
  • UX Design
  • Interaction Design
  • GSAP
  • Pug
$35 65% off $100

This offer ends:

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese
  • 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

    @lhbizarro

    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.

    bizar.ro

Similar Courses