English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 11.5 Hours | 2.66 GB
eLearning | Skill level: All Levels
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
Together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course. Step-by-step, you will learn more and more HTML5 and CSS3 features, from beginner to advanced. These are the latest web technologies, used by every website in the world. And we even added some jQuery to the mix.
This huge project will teach you all the real-world skills to build real-world HTML5 and CSS3 websites. This will allow you to build any website you can imagine… From complete scratch.
Coding is great, but it’s not everything that matters. That’s why we will go through the entire process of building and launching our website project. This includes designing, coding, planning, writing clean and organized code, website optimization, best practices, and so much more.
Designing is really, really important. Have you seen all these beautiful and modern websites lately? Great! Because I will show you how it’s done. And not just in theory, but also in practice. This is the only course on the market which focuses on both coding and designing, together.
By the end of the course, you will have a complete, ready-to-launch website that looks great on any computer, tablet and smartphone. Of course you get the entire code and all the images and graphical assets that I designed especially for the course as a free download.
Please check out the promo video to see the final website.
With the right guidance, HTML5, CSS3 and responsive web design are really easy to learn and use in the real world. With a bunch of random tutorials and YouTube videos? Not so much. That’s why I structured this training around a cool and complete project that’s fun to code.
So here is exactly what we cover in this training:
- Easy-to-follow and hands-on web development with HTML5, CSS3 and some jQuery.
- The proven 7 real-world steps from complete scratch to a fully functional and optimized website.
- Simple-to-use web design guidelines and tips to make your website stand out from the crowd.
- How to get and use images, fonts and icons to make your website shine — all for free.
- Responsive web design: learn how to create websites that work beautifully on all screen sizes.
- How to use jQuery for super cool effects like animations, scroll effects and “sticky” navigation.
- How to optimize your website for good speed performance and for search engines (SEO).
- How to launch your website for the world to see it.
1 Let’s start this amazing journey
2 READ BEFORE YOU START!
3 E-book Resources 2_0
4 First things first_ download your free e-book here
Dive into HTML
5 Download the Code
6 Our main tool_ Brackets text editor
7 What is HTML_
8 The structure of an HTML document
9 Starting to fill the structure
10 Images and attributes
11 One more thing_ links
Formatting with CSS
12 Getting started with CSS
13 Starting to make our webpage pretty_ text
15 Classes and ID’s
16 The CSS box model
17 Building a simple layout
18 Polishing our blog post
19 Relative vs_ Absolute
20 Getting started with the Chrome Developer Tools
Web design basics
21 Introduction to web design
22 Beautiful typography
23 Using colors like a pro
24 The meaning of colors in web design
25 Working with images
26 Working with icons
27 Spacing and layout
28 Introduction to user experience
29 Getting inspired_ the secret ingredient for stunning web design
30 Wrapping up what we’ve learned in this section
31 The ultimate cheatsheet_ all web design guidelines in one place
The killer website project
32 Download the Code
33 The 7 real-world steps to a fully functional website
34 Download the 7 steps here
35 Omnifood Project FAQs 8212 READ BEFORE YOU START!
36 Starting to put the 7 steps into action
37 First development steps
38 Setting up the fluid grid for responsive web design
39 Building the header – Part 1
40 Building the header – Part 2
41 Building the header – Part 3
42 Building the features section – Part 1
43 Building the features section – Part 2
44 Building the favorite meals section – Part 1
45 Building the favorite meals section – Part 2
46 Building the how-it-works section – Part 1
47 Building the how-it-works section – Part 2
48 Building the cities section – Part 1
49 Building the cities section – Part 2
50 Building the customer testimonials section – Part 1
51 Building the customer testimonials section – Part 2
52 Building the sign-up section – Part 1
53 Building the sign-up section – Part 2
54 Building the contact form form – Part 1
55 Building the contact form form – Part 2
56 Building the footer – Part 1
57 Building the footer – Part 2
Responsive web design with media queries
58 Making the webpage responsive – Part 1
59 Making the webpage responsive – Part 2
60 A note about web browsers
Let’s add some cool effects
61 Download the Code
62 Introduction to jQuery
63 Building a 8Usticky8221 navigation – Part 1
64 Building a 8Usticky8221 navigation – Part 2
65 Scrolling to elements
66 Adding animations on scroll
67 Making the navigation responsive
Optimizing and launching our website
68 Final touch_ creating a favicon
69 Performance optimization_ site speed
70 Basic search engine optimization (SEO)
71 Let8217s launch our webpage!
72 Google Analytics
73 You made it! Congratulations!
74 Super effective ways to improve your website8217s conversion
75 Adding a map to the Omnifood website
76 Using PHP to make our form work
77 My Special Gift for You_ Never Stop Learning!