Welcome to Advanced Styling with Responsive Design. This course is an introduction to the theory and practice of creating responsive websites. What is a responsive site? The easiest answer may be to describe sites that aren't responsive. Have you ever visited a site on your phone and the content just seems crammed in? You maybe get the idea that the site was designed for a large screen and simply shrunk down for the phone. Or even worse, it wasn't shrunk at all and you have to do a lot of side-to-side scrolling? Or maybe you have been on a website on your tablet, but a bunch of key components are locked and you are forced to go back when you have access to a laptop or desktop? These are examples of sites that do not have responsive design.
This course is meant for people who are comfortable using HTML and CSS, but want to take the first steps to creating a single site that can display a different layout (or "look") on different platform.
There are three common approaches to responsive design.
Throughout the entire course there will be an emphasis on the importance of good habits and examples of potential pitfalls. All of the example code is provided to you as a starting place. For some learners, this will be sufficient to get a decent base on how responsive design works. For other learners however, there is nothing better than when they decide they can write better versions of the code.
This course assumes that you are familiar with the Document Object Model (DOM), HTML5 and CSS3. In each module you will be asked to do the following:
The information has been broken down into pieces to help you learn the material in the smallest chunks that still give you enough information to do something with it. The goal is to give you the ability to listen to these during any time you have. You will find that some of the videos have material that makes sense to you immediately. Sometimes you may want to replay other videos to clarify the material. Some of the videos are not traditional lectures, instead they are videos where I demonstrate the concepts from an earlier lecture. I highly recommend that you code along with me while you watch these videos. The key to success in this course is in writing code. I put these videos in so that you have something specific to practice. It is also a great way for you to see how often I mess up when I am coding!!
You may find that you can speed the videos up and still retain the information. On the other hand, my mom is always telling me I talk too quickly so you may want to slow the videos down. The important thing is to find something that works well for you. Use the in-video quizzes to help you gauge how your learning is going.
Each module will include reading material. It is impossible to learn everything you need to learn just by listening to the lectures. I provide some of the written material directly in Coursera. At times I will link to additional free, online resources.
Each module will include a graded quiz and/or a coding assignment. The quizzes are intended to reinforce your confidence in the material, not "trick" you. As often as possible each question will be linked to a specific lecture or reading. You can take the quizzes as many times as you like, but there is a limit on how many times you can take each quiz in a certain time period.
The coding projects generally expand upon an example covered in a lecture. You will need to provide some of the code yourself. These assignments will be peer-graded. Why? Because there are so many different ways to write the code that it is not possible to write a grader that can capture each possibility. IMPORTANT NOTE. I am changing all peer-graded assignments to optional. Right now it is hard to guarantee that students will get useful feedback. So until a better platform is provided I will leave these assignments as optional in hope that only students who really want to provide good feedback will submit.
There will also be optional material provided in many of the modules. These may range from links to recent articles to videos on pioneers in the fields of design and accessibility. None of these materials will be required for the quizzes, but rather provide additional ways for you to branch out and learn more about the history of the field or the emerging ideas.
Learners must pass every graded assessment to pass the course, regardless of their final grade. A passing grade for each of the quizzes is 80%. A passing grade for each of the assignments is 70%.