HTML & CSS: Building Responsive Websites For Beginners (version 2.0) | Jonathan Grover | Skillshare

HTML & CSS: Building Responsive Websites For Beginners (version 2.0)

Jonathan Grover, Developer / Designer / Creative Technologist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
75 Lessons (6h 29m)
    • 1. Computer Setup

      3:25
    • 2. How The Web Works

      3:38
    • 3. Web Terminology

      3:05
    • 4. Site Organization

      2:25
    • 5. HTML Syntax

      2:45
    • 6. HTML Document Structure

      1:51
    • 7. HTML Text Formatting

      1:48
    • 8. HTML Lists

      1:16
    • 9. HTML Tables

      1:00
    • 10. HTML Forms

      7:32
    • 11. HTML Images

      1:40
    • 12. HTML Links

      4:11
    • 13. HTML Iframes

      0:39
    • 14. HTML Grouping Elements

      2:00
    • 15. HTML Semantic Elements

      2:54
    • 16. HTML Comments

      0:34
    • 17. HTML Depricated Elements

      0:20
    • 18. HTML Validation

      0:25
    • 19. HTML Reference

      0:58
    • 20. Code Along - Introduction

      0:45
    • 21. Code Along - Part 1

      47:21
    • 22. HTML Validation

      5:08
    • 23. Developer Tools - Part 1

      3:10
    • 24. CSS Syntax

      1:13
    • 25. CSS Formats

      1:42
    • 26. CSS Type Selector

      0:17
    • 27. CSS ID Selector

      0:42
    • 28. CSS Class Selector

      1:06
    • 29. CSS Compound Selector

      0:43
    • 30. CSS Descendent Selector

      0:49
    • 31. CSS Child Selector

      1:23
    • 32. CSS Universal Selector

      0:17
    • 33. CSS Attribute Selector

      1:42
    • 34. CSS Pseudo Selector

      1:43
    • 35. CSS Inheritance

      3:53
    • 36. CSS Authority

      3:14
    • 37. CSS Comments

      0:17
    • 38. CSS Color Values

      2:16
    • 39. CSS Typography

      3:23
    • 40. CSS Web Fonts

      2:26
    • 41. Code Along - Part 2

      34:42
    • 42. CSS Validation

      2:21
    • 43. Developer Tools - Part 2

      3:21
    • 44. CSS Box Model

      6:12
    • 45. CSS Box Sizing

      5:01
    • 46. CSS Layout Types

      7:40
    • 47. CSS Overflow

      1:54
    • 48. CSS Display

      6:12
    • 49. Code Along - Part 3

      20:46
    • 50. Developer Tools - Part 3

      3:06
    • 51. CSS Float and Clear

      4:32
    • 52. CSS Clearfix

      6:01
    • 53. CSS Simple Float Layout

      7:53
    • 54. CSS Custom Grid System

      12:00
    • 55. CSS Using Third Party Grids

      0:51
    • 56. Code Along - Part 4

      24:13
    • 57. CSS Position

      6:21
    • 58. CSS Z-index

      2:18
    • 59. CSS Backgrounds

      1:25
    • 60. CSS Borders

      0:43
    • 61. CSS Border Radius

      0:37
    • 62. CSS Box Shadow

      0:17
    • 63. CSS Opacity

      0:37
    • 64. CSS Gradients

      2:10
    • 65. CSS Box Styles

      5:56
    • 66. Code Along - Part 5

      32:21
    • 67. Responsive Design

      2:52
    • 68. CSS Media Queries

      8:08
    • 69. Responsive Media

      1:56
    • 70. Responsive Type

      3:23
    • 71. Responsive Layout

      7:18
    • 72. HTML Meta Viewport

      1:14
    • 73. Responsive Support

      0:19
    • 74. Code Along - Part 6

      29:07
    • 75. Site Publishing Using FTP

      9:16

About This Class

33e51b47

About This Course

Learn to build your own professional HTML5 & CSS3 responsive websites from scratch! Your site will be viewable on any device and work in all browsers. This course is geared towards absolute beginners. It will walk you through planning a website, organizing your files, the fundamentals of HTML for building rich content sites with text, images, links, video, audio, as well as embedded maps, and social media content. We will discuss the fundamentals of CSS for styling content by adjusting text, loading custom web fonts, adding background images, gradients, shadows, and more. We will look at industry standard techniques for site layouts that will respond and adjust to look great on any device. We will also cover search engine optimization, site publishing, and more.

Sure, you could use a template to make your site with Wordpress or SquareSpace, but then you’re just a consumer limited to another companies vision. Break the chains and learn to code your own site from scratch and the sky is the limit! You will be able to build anything you can imagine! Let's get started!

Prerequisites

Students are expected to have a general knowledge of computers, opening, saving files, etc. Students will need a personal laptop computer for this course. Macs are highly encouraged (but commands are given for PC Windows as well). Students can expect to commit to a minimum of 5 - 6 hours per week on this course with approximately 1.5 - 2 hours watching videos and coding exercises and another 4 hours working on labs and building a personal site project each week. However the course is self paced so students can do more and move at a faster pace if desired. These time estimates are merely a baseline and suggested minimum amount of weekly engagement.

Instructor

Jonathan is the Founder of CodePajamas.com a code learning website. Previously: Lead Front-End Instructor at Flatiron School, Instructor: General Assembly, 3rdWard, PAI, SFAI. MFA from SFAI, BFA University of Akron. Media Coverage: Creative Quarterly, The San Francisco Chronicle, NBC BayArea. Interests: New Media Art, Sculpture, Travel. Jonathan currently resides in Brooklyn, NY managing CodePajamas.com, teaching, creating tech-art, and working as a freelance web developer.

Testimonials

The best course I've taken on coding. - Rhema Aminu

This class is a great way to get into coding! I also liked that I could jump around easily from topic to topic depending on what I was working on. - Denise Bee

This class launched my career as a freelance website developer. It gave me the applicable skills, the confidence, and the staying motivation to keep playing, experimenting and learning while at the same time applying them so I understood what I was doing. - Clorama Dorvilias

I knew nothing about HTML and CSS- this class has taught me a lot about how web pages are designed and I feel that is an extremely valuable skill in this day and age. I encourage you if you have any doubts about taking this class- take it! - Maurice Cunningham

Coding sounds difficult and is usually assumed to be understood by only the highly intellect ones. But this class completely defied that theory . . . highly recommend to absolutely anyone and everyone who wishes to learn how to build a super website with ease. - Sweta Modi

The instructor made everything really clear and easy to follow, and learning by creating my own project in parallel with hands-on exercises really solidified the concepts and made it fun! In the few weeks it took me to complete this course, I learned way more than I could have spending months trying to teach myself. - Rose Weixel

I was really impressed with the instructor. He explained the positives and negatives of coding in certain ways and explained why he made every coding decision. I found this approach super helpful as someone just trying to sink my teeth into website design through a guinea pig project and learn as much as I can in the process. Thank you!! - Julian Cooper

Very comprehensive. If you're a beginner, it will get you started and going really fast. If you're intermediate, it will give you the details you might have missed and get you to work faster and more effective. - Kasia K.

Excellent pacing, everything is explained so clearly and demonstrated very well. Not only am I learning and applying the information, I am also retaining it. - Seema Shariat

Excellent class. Very detailed and easily explained. I learned a lot... THANK YOU! - Sharnie Ivery

I've always been intimidated by code and never touched code before but this class made it very approachable and easy to understand. By far the best and most empowering class I've taken! - Adam Chung

This has been one of the best class I've ever taken in my life. I learned from the basics to the advanced. Each class is very enjoyable, and very well organized, I have learned a lot. In addition, in the office hours, the teacher gives very thoughtful tips and advises. The teacher is a true expert. I'll take more classes with him. I look forward to enroll in new classes from him. Thank you very much Jonathan. You are the best! - Javier Hurtado

Syllabus

If you wish, you can download the full course syllabus here.