awwwards.com
Место встречи, где профессионалы цифрового дизайна со всего мира находят вдохновение, делятся знаниями и опытом, общаются и делятся конструктивной и уважительной критикой. «Всегда сомневаюсь», «всегда развиваюсь».
Создание Креативного Веб-сайта с Нуля без Фреймворков
Building an immersive creative website from scratch without frameworks
★4.6 (всего оценок - 49)
Продолжительность
26 ч 4 мин
Категория
JavaScriptКоличество уроков
37 Видео
Дата добавления
14 июн. 2021 г., 00:38
Язык
Английский
Дата выхода
10 мар. 2021 г., 02:00
Дата обновления
29 апр. 2026 г., 10:09
Этот курс идеально подходит для тех, кто хочет создавать по-настоящему уникальные, креативные и высокопроизводительные веб‑сайты без привязки к громоздким фреймворкам. Вы узнаете, как управлять каждой деталью проекта — от архитектуры и анимаций до оптимизации и интеграции современных инструментов.
Почему стоит создавать сайты без фреймворков
Разработка без React, Vue или Angular открывает дополнительные возможности: вы полностью контролируете код, избегаете лишнего «веса» и формируете архитектуру под собственные задачи. Такой подход особенно ценен в проектах, где важны уникальные анимации, высокая производительность и полная креативная свобода.
Основные преимущества
- Максимальная скорость загрузки и отзывчивость сайта.
- Гибкая архитектура, не ограниченная правилами фреймворка.
- Простота настройки под креативные анимации и современную графику.
- Полный контроль над каждым этапом разработки.
Что вы изучите в процессе обучения
Курс последовательно проведет вас через весь процесс создания собственного шаблона для проекта — с нуля и до интеграции продвинутых анимационных библиотек.
Работа с современным JavaScript
- Использование Fetch API и History API для создания плавной навигации.
- Построение архитектуры на основе классов ES2015+.
- Создание цепочек промисов для анимации и переходов между страницами.
Повторно используемые компоненты
Вы научитесь разрабатывать собственные классы компонентов, которые ускоряют разработку, улучшая читаемость кода и автоматизируя типовые процессы.
Интеграция с библиотеками анимации
- GSAP для управляемой таймлайнами анимации.
- OGL и Three.js для 3D‑графики и эффектов.
- Создание современных, живых, иммерсивных интерфейсов.
Инструменты, с которыми вы будете работать
Вы получите практический опыт со всеми основными инструментами современного Frontend‑стека.
Шаблоны и стилизация
- Pug — шаблонизатор для структурирования HTML.
- SASS/SCSS + PostCSS — мощная система для написания и оптимизации CSS.
Компиляция и сборка
- Babel — использование всех преимуществ современного JavaScript.
- Webpack — гибкая и масштабируемая сборка проекта.
Кому подойдет этот курс
Курс создан как для новичков, так и для разработчиков среднего уровня, которые хотят углубиться в фундаментальные принципы JavaScript и научиться создавать сайты без зависимости от фреймворков. Пошаговые уроки и практические проекты помогут легко освоить материал.
Итог
По завершении курса вы сможете самостоятельно создавать уникальные веб‑проекты, интегрировать современные инструменты и библиотеки, а также выстроить собственный процесс разработки для создания максимально выразительных и технически продвинутых сайтов.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:05:19Introduction to our project: Floema by Luca Franceschetti
- Урок 2. 00:10:06Why should you learn how to implement websites from scratch
- Урок 3. 00:08:04The advantages of using plain JavaScript without frameworks
- Урок 4. 00:01:44Introduction to build - npm and Webpack
- Урок 5. 00:06:49Introduction to architecture - Express, Prismic and SEO
- Урок 6. 00:14:35Introduction to tools - Pug, SCSS and Babel (ES6+)
- Урок 7. 00:11:30Introduction to libraries - GSAP, Lodash and OGL
- Урок 8. 00:03:16Installing Node.js + NPM
- Урок 9. 00:07:42Installing VS Code and Plugins
- Урок 10. 00:05:03Why you should create your own boilerplate
- Урок 11. 01:41:42Setting up your project build structure using Webpack
- Урок 12. 00:14:23How to make your folders and files organized
- Урок 13. 01:08:28Structuring the views of your project using Express + Pug
- Урок 14. 01:24:17Integrating Prismic with your project
- Урок 15. 01:26:34Implementation of semantic HTML with Pug, Prismic and Express
- Урок 16. 00:52:55Including the stylization of your project using SCSS + BEM + PostCSS
- Урок 17. 03:17:40Tips and Tricks of exporting assets from XD and using Pixel Perfect to implement CSS in your project
- Урок 18. 01:02:09Implementing responsive styles using SCSS
- Урок 19. 01:11:44Setting up the JavaScript architecture of your application
- Урок 20. 00:43:18Structuring your application components and implementing preloading transitions
- Урок 21. 00:43:27Implementation of smooth scrolling and animation library GSAP
- Урок 22. 00:49:17Using IntersectionObserver to animate in elements in your application
- Урок 23. 00:48:37Polishing up transitions in the application and wrapping up HTML, CSS and JavaScript implementation
- Урок 24. 00:25:11Fixing History API and implement UA Parser for mobile, tablet, desktop checks
- Урок 25. 00:20:05Introduction to WebGL and industry-standard libraries
- Урок 26. 00:38:05Implementation of initial WebGL structure with OGL
- Урок 27. 00:53:06Implementing a draggable view with WebGL
- Урок 28. 00:47:22Transforming draggable view in infinite
- Урок 29. 00:55:41Implementing WebGL page transitions and an infinite slider
- Урок 30. 00:30:12Including slightly rotation in our WebGL infinite slider
- Урок 31. 00:50:57Integration of WebGL slider with DOM elements active-deactive states
- Урок 32. 00:46:59Performance improvements by preloading all textures to GPU
- Урок 33. 00:50:13Implementing vertex distortion using GLSL code
- Урок 34. 01:32:16Seamless WebGL transitions between pages using fake elements
- Урок 35. 00:30:07Updating Collections page interactions
- Урок 36. 00:03:17Introduction to Digital Ocean
- Урок 37. 00:22:38Setting up Digital Ocean droplet
Автор - awwwards.com
Комментарии
Please update, thank you.