Web Design for Everybody (Basics of Web Development and Coding) Specialization

It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform is called responsive design. This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms such as Bootstrap. After the course, learners will be able to: ** Explain the mobile-first paradigm and the importance of wireframes in the design phase ** Create sites that behave across a range of platforms ** Utilize existing design frameworks such as Bootstrap This is the fourth course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.

100% online course

Start instantly and learn at your own schedule.

Approx. 8 hours to complete

Suggested: 4 weeks of study, 1-3 hours/week

English

Subtitles: English

Skills you will gain

Cascading Style SheetsJavascriptWeb DevelopmentWeb Design

100% online course

Start instantly and learn at your own schedule.

Approx. 8 hours to complete

Suggested: 4 weeks of study, 1-3 hours/week

English

Subtitles: English

Syllabus - What you will learn from this course

1

Section

2 hours to complete

Week One: Style with Responsive Design

What does it mean to have responsive design for your site? How can you tell if your existing site is responsive? This week we will begin with the theories behind the "mobile-first paradigm" - the idea that your mobile site should provide everything needed, not a pared-down version of a good page. We end the week by taking the first concrete step of using fluid measurements in your CSS....

6 videos (Total 37 min), 9 readings, 1 quiz

6 videos

Introduction to Responsive Design7m

What is Responsive Design?5m

Testing Existing Sites6m

Benefits of Responsive Design4m

Fluid Measurements7m

Code With Me: Fluid Measurements5m

9 readings

Syllabus10m

Resources10m

Frequently Asked Questions (FAQ)5m

Help us learn more about you!10m

Fluid Measurements background readings5m

Notice for Auditing Learners: Assignment Submission10m

Pixel to Em conversion tool2m

Dynamically change the size of font with sliders3m

Optional: CSS definitions of relative and absolute2m

1 practice exercises

Basic Concepts in Responsive Design approaches34m

2

Section

3 hours to complete

Week Two: Basic Concepts

This week you will get a chance to put the theories into practice using media queries in your CSS. These queries can automatically detect the size of the browser being used to view the page so that you can decide what type of look you want to achieve. There will also be a discussion on common practices for designing your different views at various screen sizes ("viewports")....

6 videos (Total 43 min), 1 reading, 3 quizzes

6 videos

Media Queries6m

Code With Me: Fluid Measurements and Media Queries3m

Wire Frames8m

Breakpoints6m

Media Queries Part Two9m

Code With Me: Responsive Navigation9m

1 readings

OPTIONAL: Good examples of responsive design2m

2 practice exercises

Practice Quiz -- Challenge Problem2m

Week Two Review: Media Queries and breakpoints20m

3

Section

4 hours to complete

Week Three: Use Existing Frameworks

After every good programmer has put in time creating sites from scratch, it is common to utilize existing tools out there. After all, why recreate the wheel? The work you have done up to this point will give you the knowledge needed to craft your own unique sites from these frameworks. This week we will work with Bootstrap, a framework that uses HTML5, CSS, and JavaScript (but don't worry if you have never used JavaScript yourself)....

7 videos (Total 55 min), 1 reading, 3 quizzes

7 videos

Frameworks4m

Introduction to Twitter Bootstrap 36m

Bootstrap Breakpoints5m

Getting Started with Twitter Bootstrap10m

Bootstrap Grid System11m

Code With Me: Grid Example7m

Bootstrap Navigation9m

1 readings

Optional - Demystifying Bootstrap2m

2 practice exercises

OPTIONAL - Grid System Check10m

Week Three Review: Bootstrap34m

4

Section

4 hours to complete

Week Four: Experiment!

This week is dedicated to solving those little issues that pop up when you move from theory to practice. We look at more advanced framework options and also hear from people who are using the techniques covered in this course....

9 videos (Total 60 min), 4 readings, 2 quizzes

9 videos

Responsive Images9m

Bootstrap Tables8m

Code With Me: Advanced Navigation5m

What Are Templates?6m

Optional Interview: M W7m

Optional Interview: H W6m

Optional: Interview with H N9m

Bootstrap 43m

Conclusion1m

4 readings

Optional: The Evolution of the Airbnb front-end deveopment3m

OPTIONAL - Debugging your style2m

OPTIONAL - More resources for learning to debug/develop2m

Post-course Survey10m

1 practice exercises

Responsive Design Final Assessment22m

Instructors

Colleen van Lent, Ph.D.

Lecturer

Charles Severance

Associate Professor

About University of Michigan

The mission of the University of Michigan is to serve the people of Michigan and the world through preeminence in creating, communicating, preserving and applying knowledge, art, and academic values, and in developing leaders and citizens who will challenge the present and enrich the future....

Frequently Asked Questions

When will I have access to the lectures and assignments?
Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.
What will I get if I pay for this course?
If you pay for this course, you will have access to all of the features and content you need to earn a Course Certificate. If you complete the course successfully, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. Note that the Course Certificate does not represent official academic credit from the partner institution offering the course.
What is the refund policy?
Is financial aid available?
Yes! Coursera provides financial aid to learners who would like to complete a course but cannot afford the course fee. To apply for aid, select "Learn more and apply" in the Financial Aid section below the "Enroll" button. You'll be prompted to complete a simple application; no other paperwork is required.

More questions? Visit the Learner Help Center

Web Design for Everybody (Basics of Web Development and Coding) Specialization