You must be logged in to take this course → LOGIN | REGISTER NOW
In this course you will learn the fundamentals of responsive web design. You’ll create your own
responsive web page that works well on any device – phone, tablet, desktop or anything in
between.
You’ll start by exploring what makes a site responsive and how some common responsive design
patterns work across different devices. You’ll also learn how to create your own responsive
layout using the viewport tag and CSS media queries.
Assessment
This course does not involve any written exams. Students need to answer 5 assignment questions to complete the course, the answers will be in the form of written work in pdf or word. Students can write the answers in their own time. Each answer needs to be 200 words (1 Page). Once the answers are submitted, the tutor will check and assess the work.
Certification
Edukite courses are free to study. To successfully complete a course you must submit all the assignment of the course as part of the assessment. Upon successful completion of a course, you can choose to make your achievement formal by obtaining your Certificate at a cost of £49.
Having an Official Edukite Certification is a great way to celebrate and share your success. You can:
- Add the certificate to your CV or resume and brighten up your career
- Show it to prove your success
Course Credit: Google
Course Curriculum
| Why responsive | |||
| Sites On Mobile | 00:01:00 | ||
| Share Your Great & Awful Sites | 00:01:00 | ||
| Intro to Project | 00:02:00 | ||
| Pan, Zoom, Touch, Ick | 00:01:00 | ||
| Emulators, Simulators and Real Devices | 00:01:00 | ||
| Setting up Chrome’s Dev Tools | 00:01:00 | ||
| Remote Debugging Intro | 00:01:00 | ||
| Setup for mobile | 00:01:00 | ||
| Using dev tools on mobile | 00:01:00 | ||
| Mobile tools for iOS | 00:01:00 | ||
| Lesson Summary | 00:01:00 | ||
| Starting small | |||
| Defining the Viewport | 00:02:00 | ||
| Pixels, pixels and moar pixels! | 00:02:00 | ||
| Pixelation | 00:01:00 | ||
| Calculating DPR | 00:01:00 | ||
| What’s the difference? | 00:01:00 | ||
| Calculating CSS Pixels | 00:01:00 | ||
| How wide is the viewport? | 00:01:00 | ||
| Setting the Viewport | 00:01:00 | ||
| Large Fixed Width Elements | 00:01:00 | ||
| Max-width on elements | 00:01:00 | ||
| Relative Sizes | 00:01:00 | ||
| Tap Target Sizes | 00:01:00 | ||
| Tap Targets | 00:01:00 | ||
| Start Small | 00:02:00 | ||
| Project Part 1 | 00:01:00 | ||
| Project Solution – Long | 00:06:00 | ||
| Lesson Summary | 00:01:00 | ||
| Building up | |||
| Lesson Intro | 00:01:00 | ||
| Basic Media Query Intro | 00:01:00 | ||
| Adding a Basic Media Query | 00:01:00 | ||
| Adding a basic media query 2 | 00:01:00 | ||
| Next Step Media Queries | 00:01:00 | ||
| Breakpoints | 00:01:00 | ||
| Breakpoints Pt. II | 00:02:00 | ||
| Number of Breakpoints | 00:01:00 | ||
| Picking Breakpoints | 00:01:00 | ||
| Picking Breakpoints 2 | 00:03:00 | ||
| Pick a Breakpoint | 00:01:00 | ||
| Complex Media Queries | 00:01:00 | ||
| What Styles Are Applied? | 00:01:00 | ||
| Grids | 00:01:00 | ||
| Flexbox Intro | 00:01:00 | ||
| Flexbox Container | 00:01:00 | ||
| Flex Item | 00:01:00 | ||
| Deconstructing a Flexbox Layout | 00:02:00 | ||
| Deconstructing a Flexbox Layout quiz | 00:01:00 | ||
| Lesson Summary | 00:01:00 | ||
| Common Responsive Patterns | |||
| Intro to Patterns | 00:01:00 | ||
| Pattern – Column Drop | 00:02:00 | ||
| Pattern – Mostly Fluid | 00:02:00 | ||
| Mostly Fluid Part 1 | 00:01:00 | ||
| Mostly Fluid Part 2 | 00:01:00 | ||
| Combining Fluid Layouts | 00:01:00 | ||
| Pattern – Layout Shifter | 00:02:00 | ||
| Which is Which? | 00:01:00 | ||
| Pattern – Off Canvas | 00:02:00 | ||
| Off Canvas Visualization | 00:01:00 | ||
| Project Update Part 2 | 00:01:00 | ||
| Lesson Summary | 00:01:00 | ||
| Optimizations | |||
| Lesson Intro | 00:01:00 | ||
| Images | 00:02:00 | ||
| Responsive Tables Intro | 00:01:00 | ||
| Responsive Tables – Hidden Columns | 00:01:00 | ||
| Hide Some Columns | 00:01:00 | ||
| Responsive Tables – No More Tables | 00:02:00 | ||
| Responsive Tables – Contained Scrolling | 00:01:00 | ||
| Fonts | 00:02:00 | ||
| Minor Breakpoints | 00:02:00 | ||
| Final Project Updates | 00:01:00 | ||
| Wrap Up | 00:01:00 | ||
Course Reviews
No Reviews found for this course.
Related Courses
