Responsive Design, Fullscreen Video Using Html5 & Css3

Posted By: ELK1nG

Responsive Design, Fullscreen Video Using Html5 & Css3
Last updated 7/2019
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 915.91 MB | Duration: 2h 10m

Let's make an awesome website with a moving video background using Dreamweaver CC 2017 & Premiere Pro CC 2017

What you'll learn
Build a basic responsive website
Understand how to manipulate video content on websites for mobile
Create a basic website that has a moving video background
How to best export video for website use.
Requirements
No previous coding or design skills are necessary. This course is for beginners.
You'll need a copy of Dreamweaver CC 2017 or above. A free 30 day trial can be download from Adobe.
You'll need a copy of Premiere Pro CC 2017 or above. A free 30 day trial can be download from Adobe.
You'll need a copy of Media Encoder CC 2017 or above. A free 30 day trial can be download from Adobe.
If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.
Description
Hi there, I’m Dan. In this course we’ll learn how to create and edit a video for our website. Then we’ll go and build the site from scratch. It looks fancy, but it’s not particularly hard. 
I built this course for beginners. You do not need to know how to code or how to edit video to take this class. We’ll start with the super basics. This could totally be your very first website, wouldn’t starting with a video background be a super cool first project?
We’ll go through the full process. I’ll show you where to find some video, I’ll show you how to edit it in Premiere Pro. We’ll do cool video effects like blurs, tints and transitions. I’ll show you how to export the video so we can get the file size super small. Once we’ve created our video we’ll build a basic website together and make our video all cool and full screen. 
We’ll also create a second option where the video peeks in through a specific box.
In this course I’ve got exercise files so you can play along. I’ll also save my files as I go through each video so you can compare yours to mine - handy if something goes wrong. We’ll be using Dreamweaver & Premiere Pro but 95% of this can be done in generic web & video tools. 
Remember: I’m happy to help & I’m pretty handy with replying. Also - there is a handy cheat sheet you can print out. 
The best thing - is that it’s not that hard. But a super awesome video background will impress the heck out of your clients. 

Overview

Section 1: Overview

Lecture 1 Introduction

Lecture 2 Resources & what is covered in the course

Lecture 3 Cool examples of full screen video backgrounds on websites

Section 2: Creating your video background

Lecture 4 Where to get video for your background

Lecture 5 Setting up your video background & basic editing in Premiere Pro

Lecture 6 Adding texture color opacity to your background video in Premiere

Lecture 7 How to make your html background video super small file size

Lecture 8 How to make a WebM video file in Adobe Media Encoder & Premiere Pro & After Effe

Section 3: Creating the video background website

Lecture 9 Add background video to a specific div tag box on your website

Lecture 10 Adding a fullscreen background video to a website using Dreamweaver

Lecture 11 Basic text & images on top of our video background

Lecture 12 Production Video - Building the rest of our website

Lecture 13 Make a fullscreen video background mobile friendly & responsive

Lecture 14 Add background video to a specific div tag box on your website

Section 4: Cheat Sheet

Lecture 15 Cheat Sheet

This course is for creatives who want to upgrade their website design knowledge and add an awesome new web technique to their skill-set.,Dreamweaver users that want to update their skills and learn new techniques.,People that want to begin learning about video editing and exporting for web.