Release date:2021

Author:Luis Henrique Bizarro

Skill level:Beginner

Language:English

Exercise files:Yes

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.

01 Introduction to our project Floema by Luca Franceschetti 02 Why should you learn how to implement websites from scratch 03 The advantages of using plain JavaScript without frameworks 04 Introduction to build npm and Webpack 05 Introduction to architecture Express Prismic and SEO 06 Introduction to tools Pug SCSS and Babel ES6 07 Introduction to libraries GSAP Lodash and OGL 08 Installing Node js NPM 09 Installing VS Code and Plugins 10 Why you should create your own boilerplate 11 Setting up your project build structure using Webpack 12 How to make your folders and files organized 13 Structuring the views of your project using Express Pug 14 Integrating Prismic with your project 15 Implementation of semantic HTML with Pug Prismic and Express 16 Including the stylization of your project using SCSS BEM PostCSS 17 Tips and Tricks of exporting assets from XD and using Pixel Perfect to implement CSS in your project 18 Implementing responsive styles using SCSS 19 Setting up the JavaScript architecture of your application 20 Structuring your application components and implementing preloading transitions 21 Implementation of smooth scrolling and animation library GSAP 22 Using IntersectionObserver to animate in elements in your application 23 Polishing up transitions in the application and wrapping up HTML CSS and JavaScript implementation 24 Fixing History API and implement UA Parser for mobile tablet desktop checks 25 Introduction to WebGL and industry standard libraries 26 Implementation of initial WebGL structure with OGL 27 Implementing a draggable view with WebGL 28 Transforming draggable view in infinite 29 Implementing WebGL page transitions and an infinite slider 30 Including slightly rotation in our WebGL infinite slider 31 Integration of WebGL slider with DOM elements active deactive states 32 Performance improvements by preloading all textures to GPU 33 Implementing vertex distortion using GLSL code 34 Seamless WebGL transitions between pages using fake elements 35 Updating Collections page interactions 36 Introduction to Digital Ocean 37 Setting up Digital Ocean droplet

[Awwwards] Building an immersive creative website from scratch without frameworks_Subtitles.7z

  Channel    and      Group

下载说明：用户需登录后获取相关资源
1、登录后，打赏30元成为VIP会员，全站资源免费获取！
2、资源默认为百度网盘链接，请用浏览器打开输入提取码不要有多余空格，如无法获取 请联系微信 yunqiaonet 补发。
3、分卷压缩包资源 需全部下载后解压第一个压缩包即可，下载过程不要强制中断 建议用winrar解压或360解压缩软件解压！
4、云桥网络平台所发布资源仅供用户自学自用，用户需以学习为目的，按需下载，严禁批量采集搬运共享资源等行为，望知悉！！！
5、云桥网络-CG数字艺术学习与资源分享平台，感谢您的关注与支持！