Course Description
There has never been a better time to learn responsive web design and take a mobile first approach.
Smartphone and tablet users no longer accept that they should have a poor web browsing experience because of the device they are using. Catering for mobile users is now essential.
This course teaches you how to put your HTML & CSS skills to great use by creating mobile first and responsive websites, which look great on any device.
This course covers:
We will go over what responsive design is and why a mobile first approach can be beneficial
Tools you can use to help your project
Fluid grids and relative sizes
The Viewport Meta Tag
Media queries and breakpoints
Building a responsive website project from scratch, using a responsive grid
We will then add jQuery plugins to the project to create a responsive sliding carousel and social sharing buttons
Dealing with responsive images and the picture element
How to optimise our images and files
CSS Flexbox including building our own basic grid
Using responsive frameworks such as Bootstrap
This course is beginner friendly but at least a basic HTML & CSS knowledge is required.
The web is going mobile, make sure your websites are ready!
What are the requirements?
A basic computer knowledge.
A basic knowledge of HTML & CSS.
What am I going to get from this course?
Understand what responsive design it and why it is important.
Produce websites using fluid grids.
Adopt a mobile first approach to design to make sure the user experience is the same regardless of the device size.
Use relative units confidently to improve responsive design.
Add the viewport meta tag to your projects.
Understand and be able to apply media queries and breakpoints.
Confidently build a responsive website from scratch or by using a framework.
Add responsive jQuery plugins such as sliding carousels and social share buttons.
Include the picture element to serve the correct size images for the users device.
Improve website performance and page loading times.
Improve page layout using the CSS Flexbox
Overcome common design problems using the Flexbox.
Use Bootstrap framework for creating responsive, mobile first websites.
Create a responsive jQuery drop down menu.
Learn how to use jQuery Mobile to build touch optimised mobile websites.
What is the target audience?
This course is beginner friendly, however you should have some HTML & CSS experience, I will be trying to concentrate on the responsive elements rather than explain HTML & CSS in detail.
You should take this course if you are new to responsive design or need to fill in some gaps.
This course is not intended for experts or experienced web designers/developers.
This course may also be useful for anybody looking to learn modern techniques such as dealing with different images sizes to suit different devices, CSS flexbox or even to gain a better understanding of responsive frameworks such as Bootstrap.
| Section 1: Welcome & Getting Started | |||
|---|---|---|---|
| Lecture 1 |
Welcome to the course
|
01:56 | |
| Lecture 2 |
Finding your way around
|
02:36 | |
| Lecture 3 |
What is responsive design?
|
09:42 | |
| Lecture 4 |
What you will need and useful tools
|
05:25 | |
| Lecture 5 |
Why mobile First?
|
02:48 | |
| Quiz 1 |
Understanding Responsive Design
|
2 questions | |
| Section 2: Fluid Grids & Responsive Essentials | |||
| Lecture 6 |
Getting started with the fluid grid
|
07:51 | |
| Lecture 7 |
Relative units
|
06:29 | |
| Lecture 8 |
Viewport Meta Tag
|
03:10 | |
| Lecture 9 |
Media Queries & Breakpoints
|
14:19 | |
| Section 3: Lets Get Building | |||
| Lecture 10 |
Download Project Images
|
1 page | |
| Lecture 11 |
Wireframe with Gliffy
|
04:21 | |
| Lecture 12 |
Setting up the project
|
15:43 | |
| Lecture 13 |
Header & Navigation
|
14:34 | |
| Lecture 14 |
Adding the main content
|
10:01 | |
| Lecture 15 |
Creating the sign up area & footer
|
10:41 | |
| Lecture 16 |
Mobile first styling
|
10:43 | |
| Lecture 17 |
Mobile styles continued & adding media queries
|
11:06 | |
| Lecture 18 |
Finishing our project
|
09:01 | |
| Section 4: JQuery Plugins for Responsive Design | |||
| Lecture 19 |
Responsive Sliding Carousel
|
06:19 | |
| Lecture 20 |
Responsive Social Share buttons
|
08:02 | |
| Section 5: Responsive Images & Improving Page Load Times | |||
| Lecture 21 |
Responsive Images Introduction
|
02:01 | |
| Lecture 22 |
Reducing Image File Sizes
|
03:44 | |
| Lecture 23 |
Important Update- please read
|
Article | |
| Lecture 24 |
Minification & Page Speed Insights
|
07:12 | |
| Lecture 25 |
Picture Element
|
12:17 | |
| Lecture 26 |
Adaptive Images
|
02:23 | |
| Quiz 2 |
Responsive Images Quiz
|
2 questions | |
| Section 6: CSS Flexbox | |||
| Lecture 27 |
Introduction to Flexbox
|
10:41 | |
| Lecture 28 |
Flexbox grid
|
07:32 | |
| Lecture 29 |
Holy Grail Layout using Flexbox
|
08:43 | |
| Lecture 30 |
Flexbox sticky footer
|
03:02 | |
| Quiz 3 |
Flexbox Quiz
|
2 questions | |
| Section 7: Responsive Frameworks | |||
| Lecture 31 |
Bootstrap Framework
|
12:02 | |
| Lecture 32 |
jQuery Mobile Part 1
|
18:33 | |
| Lecture 33 |
jQuery Mobile Part 2
|
10:00 | |
| Lecture 34 |
Other popular frameworks
|
03:11 | |
| Section 8: Thank You | |||
| Lecture 35 |
Final project files
|
Article | |
| Lecture 36 |
Thank You
|
01:15 | |
| Lecture 37 |
Keep on learning
|
Article | |
Instructor Biography
Chris Dixon, Web Developer and teacher at Core Web Training
Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.
Whatever your reason for learning to build websites you have made an excellent career choice.
My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.
I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.
Thanks for taking an interest and I look forward to you joining me.
Chris