Framer Crash Course - From UI/UX to Frontend with No Code
https://framer.com ๐ Start using Framer today for Free!
https://bit.ly/3Es29zd ๐ Want to learn UI/UX? Use "UI2022" for 22% Off!
-- Today, we've got a big one for ya! Framer has been around for awhile, but they've recently updated in a big way. Think of Framer as an all-in-one solution. Framer is like if Figma and VSCode had a baby, except you can skip the coding process and go straight from your design, to a fully responsive website. Need a backend? They even have a CMS. So, in this video, you're going to get a crash course in using Framer to build a fully responsive landing page.
Project โฆ
Watch on YouTube โ
(saves to browser)
Chapters (16)
Introduction
1:03
Framer UI Overview
3:30
Editing the Navbar
11:23
Hero Section
20:37
Features Section
27:40
Third Section
31:01
FAQ Section
34:26
Final Section
35:10
Adding a YouTube Embed
36:33
Adding a Footer
37:37
Responsiveness (Tablet)
39:42
Responsiveness (Mobile)
44:20
Adding Scroll Animations
45:57
Deploying the Project
46:55
Additional Pages
49:24
Conclusion
Playlist
Uploads from DesignCourse ยท DesignCourse ยท 0 of 60
โ Previous
Next โ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Photoshop Pen Tool Tutorial (Tattoo Design)
DesignCourse
How to Design the Microsoft Logo in Photoshop
DesignCourse
Photoshop Gradients Video Tutorial
DesignCourse
Your Guide to Layer Styles
DesignCourse
Layer Masks in Photoshop
DesignCourse
iOS App Icon Design Tutorial in Illustrator CS6
DesignCourse
Illustrator CS6 Logo Design Tutorial - Archfold
DesignCourse
Photoshop CS6 3D Tutorial - Magic Tent Illustration
DesignCourse
How to Design a Tshirt Tutorial - Adobe Illustrator
DesignCourse
Types of Logos - Lettermark & Monogram Logo Type
DesignCourse
Banner Design in Photoshop CS6
DesignCourse
How to Design a Logo in Illustrator CC
DesignCourse
Designing a Logo in Photoshop CC
DesignCourse
1. Launch & Market a Web Based Business - Introduction
DesignCourse
2. Launch & Market a Web Based Business - Logo Design
DesignCourse
3. Home Page Mockup in PS : Part 1
DesignCourse
4. Home Page Mockup in PS : Part 2
DesignCourse
5. Home Page Mockup in PS : Part 3
DesignCourse
6. Home Page Mockup in PS : Part 4
DesignCourse
7. Home Page HTML & CSS - Part 1
DesignCourse
8. Home Page HTML & CSS - Part 2
DesignCourse
Using Photoshop to Showcase Mobile Projects
DesignCourse
Flat Icon Design Tutorial in Illustrator CC
DesignCourse
Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
DesignCourse
Logo Design Follow Along 1: Emblem Logo Design
DesignCourse
Showcasing Logos in 3D with Blender
DesignCourse
How to Design an Effective Lettermark Logo
DesignCourse
Squeeze Page Design Tutorial in Photoshop (Part 1)
DesignCourse
Squeeze Page Design Tutorial in Photoshop (Part 2)
DesignCourse
Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
DesignCourse
Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
DesignCourse
Flat Mobile App Design in Photoshop CC - Weather App
DesignCourse
Create Reflective 3D Text in Blender (Beginner)
DesignCourse
Animating a Logo with Adobe After Effects CC (Beginner)
DesignCourse
Design a Game Website Mockup in Photoshop CC (Part 1)
DesignCourse
Design a Game Website Mockup in Photoshop CC (Part 2)
DesignCourse
Photo Manipulation Tutorial in Photoshop CC (Beginner)
DesignCourse
Advertising Illustration Tutorial in Photoshop CC
DesignCourse
Perspective Warp Tool Tutorial in Photoshop CC
DesignCourse
Free Giveaway Contest. (WiseBanner Banner Maker).
DesignCourse
Design an Animated Loading/Download Icon (GIF)
DesignCourse
Contest Winners (WiseBanner)
DesignCourse
Model & Animate a 3D Push Button in Blender (Beginner)
DesignCourse
Mega Tutorial - iPhone Breathalyzer - Project Introduction
DesignCourse
Part 1 - iPhone Breathalyzer - Blender
DesignCourse
Part 2 - iPhone Breathalyzer - Rendering & GUI Design
DesignCourse
Part 3 - iPhone Breathalyzer - UI Animation in After Effects
DesignCourse
Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
DesignCourse
Part 5 - iPhone Breathalyzer - HTML Part 1
DesignCourse
Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
DesignCourse
Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
DesignCourse
Part 7 - iPhone Breathalyzer - Finishing Touches
DesignCourse
Square Space Logo Maker - C'mon People.
DesignCourse
Design a Bloody Knife in Photoshop CC
DesignCourse
Typographic Poster Design Tutorial in Illustrator (Part 1)
DesignCourse
Typographic Poster Design Tutorial in Illustrator (Part 2)
DesignCourse
Modern Business Card Design in Illustrator CC (Part 1)
DesignCourse
Modern Business Card Design in Illustrator CC (Part 2)
DesignCourse
Parallax Tutorial using Parallax.JS
DesignCourse
Interview: Andrew Price of BlenderGuru.com
DesignCourse
DeepCamp AI