What You Will Learn?
- Build a responsive website that fits any screen
- What is an em, a rem and other core concepts of Responsive web design
- How to create the best possible user experience for the visitors of your website
Complete this course of responsive web design to master responsive CSS and learn how to build a website that fits any screen. This course was designed for those who already know the basics of HTML and CSS. If you are a beginner in HTML and CSS, you should check out Space Doggos 2 course.
However, you do not need any pre-knowledge of responsive web design before you start. By going through one easily digestible lecture after another, you will learn web design step by step. By solving interactive lectures and working with amusing examples, you will quickly understand how to use responsive CSS and resize HTML content. That way you will absorb and recall the fundamental elements and core principles of responsive web design much quicker than you would if you enrolled in a traditional course.
Learn Responsive Web Design in a Fun Way
When large quantities of complex information written in textbook-style assault your senses, it becomes increasingly easy to forget or overlook crucial details that make the code work. In addition, theory alone is insufficient! Reading coding theory is a dull experience and hardly a great way to learn responsive web design, which needs to be seen to be fully understood. That is why the learning experience in this responsive web design course is interactive and has been carefully tested and tweaked to offer involving, intuitive and fun way to learn.
You will be a developer of two websites: a fashion blog and a web page for a coffee shop. You will resize them and refit them to respond to the ever-changing needs of the everyday user experience. Each lecture will provide you with a pinch of theory to familiarize you with the core concept of responsive web design (for example - what are the relative measures in the responsive CSS code) and will give you a task to fully and firmly fix the theory in your memory. And you won’t ever get stuck on a task, because the hints will help you with the solution. With this seamless and interactive learning experience, you won’t ever feel like you’re back at school or doing homework. Each lesson will build upon the previous one and before long you will be able to code complex lines you couldn’t have imagined you were capable of. This way you will soon be able to build a website with responsive web design.
Web Design Done With User Experience in Mind
The purpose of any design is to seamlessly combine aesthetic and functional elements into a working product to provide the best possible user experience - and web design is no different. The best web design guides the user to the content on the website without distracting the user or drawing the attention to the design itself. But now every user experience is different. Users browse the internet on multiple devices: desktop computers, tablets and phones. Every single one of these devices has a screen of varying size and proportion. That’s why web developers of today have a unique problem on their hands: how to create the best user experience when every user experience is different and how to create a web design that takes into consideration all the different screen sizes.
The Future Has Arrived
Responsive web design is the answer. Responsive web design is also the future. As of today, more than 51 percent of global web traffic originates from mobile devices. A web page with a web design that considers only desktops is losing half its possible traffic. That’s why responsive web design is a relatively new approach to web design, which makes web pages work well on a variety of devices, window and screen sizes. Content, design and performance are necessary across all devices to ensure a satisfying user experience.
So do not hesitate any longer, take this course and learn about responsive CSS and other core concepts of responsive web design. And then - build your website, one that’s ready for the future.
- No pre-knowledge is required - enthusiasm is all you need!
- A PC or Mac is required. Mobile not supported yet;
- No special software is required in advance of the course.
Section 1: Element size
- Lecture 1: Relative measurements
- Lecture 2: Em unit
- Lecture 3: Rem unit
- Lecture 4: Percentages: Height & Width
- Lecture 5: Percentages: Padding & Margin
- Lecture 6: Width: Minimum & Maximum
- Lecture 7: Height: Minimum & Maximum
- Lecture 8: Scaling media
- Lecture 9: Scaling Background Image
- Lecture 10: Summary
Section 2: CSS Media Queries
- Lecture 1: Media Queries
- Lecture 2: Range
- Lecture 3: Dots Per Inch (DPI)
- Lecture 4: AND operator
- Lecture 5: Comma Separated List
- Lecture 6: Breakpoints
- Lecture 7: Review: Media Queries