English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6 Hours | 3.04 GB
Build 6 projects using HTML, CSS and JavaScript. Master in CSS Animations, CSS Transforms and create 3D effects.
If you want to get your hands dirty in three core technologies – HTML, CSS and JavaScript, then this is the right course for you. You will be able to build 6 modern, beautiful and creative projects. Learn how to create cool CSS animations and awesome 3D effects.
INCLUDED:
Project 1 – Invisible Card
In this project you will build nice profile card. You will be able to learn how to manipulate on backgrounds and create some cool effects. Project will be built based on HTML and CSS
Project 2 – Sign Up Form
The second project will represent modern-looking and beautiful sign-up form. Project will consist of two parts. First part will be nice banner with little CSS animation and using banner button you will be navigated to sign-up form. Project will be created using HTML, CSS and JavaScript
Project 3 – Profile Cards
In this project you will build three beautiful profile cards with some cool animations. Besides cards, we will have heading with typing text animation. It will be created using JavaScript. Also, we will use CSS keyframes to create nice animated button with hover effect.
Project 4 – Slideshow
Fourth projects is going to be slideshow. It will consist of two parts. We will have banner with header and 3D button. Banner elements will have some really nice and beautiful animations. By clicking button, we will move on to slideshow. Slideshow will be created using pure CSS. Each slide will represent the famous cities of world. Project will be based on HTML, CSS and JavaScript.
Project 5 – Hamburger Menu
In this project, you will be able to learn how to create Hamburger Menu. Project will consist of two parts. First part is going to be banner, in which you will be able to build 3D button with hover effect. By clicking on Hamburger menu icon, we will be navigated to second part of project. It will be Navbar with two different Navigations. In this project, you will learn about how to create really modern and nice 3D effects. Project will be based on HTML, CSS and JavaScript
Project 6 – Cube
Sixth project will be the most interesting and advanced one. We will create slideshow represented by 3D cube. Project will be based on HTML, CSS and JavaScript. We are going to use really advanced stuff from CSS and relatively lots of JavaScript. After building this project you will be capable to create modern, advanced and beautiful projects on your own.
What you’ll learn
- You will meet lots of modern CSS tricks and techniques
- You will work on projects created based on three core technologies; HTML, CSS and JavaScript
- You will learn about how to create advanced CSS animation using keyframes, transitions and transforms
- You will get practice in DOM manipulation
- You will be able to make each project fully responsive on different screen sizes using CSS media queries
Table of Contents
Welcome!!!
1 Introduction
2 How to Watch Lectures in High Resolution
3 Setup
Project 1 – Invisible Card
4 Project Preview
5 Create Structure of Project
6 Style – Part 1
7 Style – Part 2
8 Style – Part 3
9 Style – Part 4
Project 2 – Sign Up Form
10 Project Preview
11 Create Structure of Project
12 Style Banner
13 Styling Sign Up Form – Part 1
14 Styling Sign Up Form – Part 2
15 Styling Sign Up Form – Part 3
16 Add JavaScript to Project
17 Make Project Responsive
Project 3 – Profile Cards
18 Project Preview
19 Create Structure of Project
20 Style Profile Cards – Part 1
21 Style Profile Cards – Part 2
22 Add CSS Animation to Project
23 Typed Text Animation Using JavaScript
24 Blinking Cursor Animation Using CSS
25 Make Project Responsive
Project 4 – Slideshow
26 Project Preview
27 Create Structure of Project
28 Style Banner
29 Add Animations to Banner
30 Create Cool Hover Effect
31 Create Slideshow – Part 1
32 Create Slideshow – Part 2
33 Make Project Responsive
Project 5 – Hamburger Menu ( 3D )
34 Project Preview
35 Make Hamburger Menu Working
36 Make Project Responsive – Part 1
37 Make Project Responsive – Part 2
38 Create Structure of Project
39 Style Banner
40 Create 3D Button
41 Manage Top Navigation Layout
42 Create 3D navigation Items
43 Manage Bottom Navigation Layout
44 Prepare Social Icons
45 Create 3D Effects With Social Icons
Project 6 – Cube (3D Slideshow)
46 Project Preview
47 Create Structure of Project
48 Prepare 3D Environment
49 Build Up Cube – Part 1
50 Build Up Cube – Part 2
51 Style Controls
52 Add JavaScript to Project – Part 1
53 Add JavaScript to Project – Part 2
54 Add JavaScript to Project – Part 3
BONUS
55 Bonus Lecture Check Out
Resolve the captcha to access the links!