Creating a Responsive Web Design | Chris Converse | Skillshare

Creating a Responsive Web Design

Chris Converse, Designer & Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
55 Lessons (3h 48m)
    • 1. Introduction to this course

      1:51
    • 2. About this course

      1:06
    • 3. Terms and technology we'll be covering

      2:36
    • 4. What you'll need to complete this course

      1:29
    • 5. About the exercise files

      1:27
    • 6. Setting up our project

      4:07
    • 7. The HTML strategy for our layout

      1:40
    • 8. Creating the main HTML containers

      2:40
    • 9. Adding content into the header

      3:52
    • 10. Add content to main section

      3:25
    • 11. Add content to atmosphere section

      2:18
    • 12. Add content to the How-To section

      5:19
    • 13. Adding the navigation

      5:02
    • 14. Adding the footer content

      2:20
    • 15. Importing a Google Font

      3:54
    • 16. Defining the basic text styles

      4:18
    • 17. Style the heading and page container

      4:45
    • 18. Style the logo and hero item

      6:50
    • 19. Creating the button style

      4:32
    • 20. Setting up three-column row

      6:04
    • 21. Adding graphics to the main section

      4:54
    • 22. Clearing floats with CSS pseudo-elements

      4:03
    • 23. Styling the Atmosphere section

      3:25
    • 24. Styling the How-To Section aside elements

      5:09
    • 25. Styling the How-To Section blockquote element

      5:37
    • 26. Adding content with pseudo-elements

      5:35
    • 27. Styling the Footer

      3:22
    • 28. Re-positioning the Nav

      4:39
    • 29. Styling the nav list-items and links

      6:50
    • 30. Showing and Hiding the nav sub menus

      5:42
    • 31. Device compatibility options for nav

      3:25
    • 32. Adding indication arrows

      7:24
    • 33. Making minor adjustments for larger screens

      4:51
    • 34. Making adjustments for large screens

      5:50
    • 35. Making adjustments for medium screens

      5:24
    • 36. Moving the navigation for smaller screens

      4:04
    • 37. Adjusting to the logo and hero elements

      3:46
    • 38. Rearranging the main and atmosphere sections

      4:26
    • 39. Rearranging the how-to section

      5:24
    • 40. Rearranging the navigation

      6:07
    • 41. Adjusting the spacing of the navigation and footer

      3:54
    • 42. Adjustments for the header and hero

      5:26
    • 43. Adjusting the How-To section

      2:48
    • 44. Adjusting the footer

      3:56
    • 45. Strategy for printing

      3:58
    • 46. Linking a CSS file for print

      2:33
    • 47. Setting up the base styles

      4:36
    • 48. Setting up the header

      4:34
    • 49. Displaying URLs when printing

      6:05
    • 50. Setting up the Main section

      4:41
    • 51. Setting up the Atmosphere section

      2:34
    • 52. Switching our image tags with CSS

      5:05
    • 53. Styling the footer

      4:24
    • 54. Setting page breaks with CSS

      2:30
    • 55. Where To Go From Here

      0:55

About This Class

This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen size, as well as on paper when printed.

Web design requires the coordination of HTML, CSS, and graphics in order to construct a layout and design that can respond to the varying needs of your websites visitors.

In this step-by-step course, we’ll cover every aspect of converting a design into a fully functioning web page. We’ll create navigation menus, style typography, format and position graphics, create CSS animations, import free web fonts from Google, as well adjust our layout to fit a wide range of screens and devices.

And for those new to HTML, CSS, or web graphics, we have a few lessons explaining the core fundamentals of each, so you’ll be able to work through the course without missing a beat.

To get a full sense of the scope of this course, watch the first chapter — it’s FREE.

Running Time: 3:47 (225 minutes)