Full Stack Web Development for Beginners- Part 1: HTML, CSS, Responsive Design

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
59 Lessons (5h 36m)
    • 1. Welcome to the course!

      2:07
    • 2. What will you need for this course (Getting Started)

      1:16
    • 3. Understanding HTML (Getting Started)

      6:29
    • 4. Setting up a web project (Beginning HTML)

      3:09
    • 5. Structuring a web page (Beginning HTML)

      5:56
    • 6. HTML Headings (Beginning HTML)

      6:52
    • 7. Div and span (Beginning HTML)

      5:23
    • 8. Adding paragraphs and text (Beginning HTML)

      3:31
    • 9. Text emphasis, importance and formatting (Beginning HTML)

      6:25
    • 10. HTML Lists (Beginning HTML)

      4:52
    • 11. Time to practice - Create the project lists (Beginning HTML)

      5:58
    • 12. Working with images (Beginning HTML)

      5:52
    • 13. Links (Beginning HTML)

      10:20
    • 14. Time to practice - Linking to pages (Beginning HTML)

      3:40
    • 15. What are semantic elements? (Beginning HTML)

      4:21
    • 16. Adding semantic elements into our project (Beginning HTML)

      5:25
    • 17. Time to practice - Adding more products (Beginning HTML)

      1:28
    • 18. Solution - Adding more products (Beginning HTML)

      5:11
    • 19. HTML Comments (Beginning HTML)

      3:52
    • 20. Entities and symbols (Beginning HTML)

      6:01
    • 21. Time to practice - Product detail page (Beginning HTML)

      3:22
    • 22. HTML Tables (Forms, Tables & iFrames)

      9:53
    • 23. HTML Forms (Forms, Tables & iFrames)

      7:55
    • 24. Labels, name and id (Forms, Tables & iFrames)

      5:01
    • 25. Checkboxes and radio buttons (Forms, Tables & iFrames)

      9:03
    • 26. Select input (Forms, Tables & iFrames)

      7:08
    • 27. Datalist & submit (Forms, Tables & iFrames)

      10:41
    • 28. Other useful form elements (Forms, Tables & iFrames)

      7:30
    • 29. IFrames (Forms, Tables & iFrames)

      6:25
    • 30. Adding Google maps (Forms, Tables & iFrames)

      6:26
    • 31. Understanding CSS (Beginning CSS)

      2:37
    • 32. Inline styles and adding color (Beginning CSS)

      6:25
    • 33. Internal stylesheets (Beginning CSS)

      5:12
    • 34. External stylesheets (Beginning CSS)

      4:08
    • 35. Fonts (Beginning CSS)

      6:53
    • 36. Classes and id's (Beginning CSS)

      5:35
    • 37. Margin and padding (Beginning CSS)

      6:26
    • 38. Block, inline and inline-block (Beginning CSS)

      9:17
    • 39. The box model (Beginning CSS)

      5:21
    • 40. List styling (Beginning CSS)

      5:01
    • 41. Styling links and psuedo classes (Beginning CSS)

      8:09
    • 42. Float and clear (Beginning CSS)

      12:36
    • 43. The position property (Beginning CSS)

      7:20
    • 44. Styling forms and inputs (Beginning CSS)

      5:12
    • 45. Time to practice: final project styling (Beginning CSS)

      1:19
    • 46. Solution: final project styling (Beginning CSS)

      6:10
    • 47. Specificity and the cascade (Beginning CSS)

      11:16
    • 48. What is responsive design? (Responsive Design)

      3:25
    • 49. The viewport meta tag (Responsive Design)

      4:42
    • 50. Scalable units (Responsive Design)

      7:47
    • 51. Fluid layout (Responsive Design)

      4:43
    • 52. Understanding media queries (Responsive Design)

      8:51
    • 53. Mobile first styling (Responsive Design)

      5:03
    • 54. Styling for medium devices (Responsive Design)

      4:26
    • 55. Styling for large devices (Responsive Design)

      6:47
    • 56. Picture and srcset (Responsive Design)

      7:23
    • 57. Time to practice (Responsive Design)

      1:01
    • 58. Thank you

      1:05
    • 59. Follow me on Skillshare!

      0:23
151 students are watching this class

Project Description

As you progress though this course, we will build a fully responsive "Tech Store" project.

Feel free to put your skills to the test and fully customise any of the HTML and CSS, or even change breakpoints to better suit your layout.

Can't wait to see what you create, don't forget to share to inspire others too!

Student Projects

project card
Luke Aimson
1 comment
project card
Mary Jonah
2 comments
project card
1 comment
project card
Beth Singer
1 comment