Full Stack Web Development for Beginners- Part 1: HTML, CSS, Responsive Design | Chris Dixon | Skillshare

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 Videos (5h 36m)
    • Welcome to the course!

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

      1:16
    • Understanding HTML (Getting Started)

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

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

      5:56
    • HTML Headings (Beginning HTML)

      6:52
    • Div and span (Beginning HTML)

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

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

      6:25
    • HTML Lists (Beginning HTML)

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

      5:58
    • Working with images (Beginning HTML)

      5:52
    • Links (Beginning HTML)

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

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

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

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

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

      5:11
    • HTML Comments (Beginning HTML)

      3:52
    • Entities and symbols (Beginning HTML)

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

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

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

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

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

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

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

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

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

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

      6:26
    • Understanding CSS (Beginning CSS)

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

      6:25
    • Internal stylesheets (Beginning CSS)

      5:12
    • External stylesheets (Beginning CSS)

      4:08
    • Fonts (Beginning CSS)

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

      5:35
    • Margin and padding (Beginning CSS)

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

      9:17
    • The box model (Beginning CSS)

      5:21
    • List styling (Beginning CSS)

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

      8:09
    • Float and clear (Beginning CSS)

      12:36
    • The position property (Beginning CSS)

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

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

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

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

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

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

      4:42
    • Scalable units (Responsive Design)

      7:47
    • Fluid layout (Responsive Design)

      4:43
    • Understanding media queries (Responsive Design)

      8:51
    • Mobile first styling (Responsive Design)

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

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

      6:47
    • Picture and srcset (Responsive Design)

      7:23
    • Time to practice (Responsive Design)

      1:01
    • Thank you

      1:05
    • Follow me on Skillshare!

      0:23
22 students are watching this class

About This Class

Welcome to Full Stack Web Development for Beginners!

This course is designed to teach beginners everything they need to know to build full stack websites and applications!

This is part one of this huge course, teaching you all about HTML, CSS and Responsive Web Design.

We begin with a little background into HTML, what it is and how it came about.

Then we take a deep dive into learning about how to use HTML, learning things such as:

  • Setting up a HTML project
  • HTML Structure
  • Headings
  • Div and span elements
  • Adding text and links
  • Formatting text
  • Lists
  • Images
  • Semantic elements
  • Comments, entities and symbols
  • Tables
  • Forms and inputs
  • Iframes
  • Integrating Google Maps

All of this while building a Tech Store project.

We then move onto styling with CSS, covering:

  • What is CSS
  • Inline, internal and external stylesheets
  • Fonts and colors
  • Classe's and id's
  • Margin and padding
  • Block, inline and inline-block display types
  • The CSS box model
  • Styling lists and links
  • Psuedo classes
  • Float and clear
  • The position property
  • Styling forms and inputs
  • Specificity and the cascade

We then take the project even further by learning all about responsive design to make your websites look great on all size devices.

You will learn about:

  • What responsive design is
  • The viewport meta tag
  • Scalable units 
  • Fluid layout
  • Media queries
  • Mobile first styling
  • Styling for all size devices
  • Picture element and srcset

This first part of the course covers all of the fundamentals you need to go on to building full stack websites.

In future parts we will cover lot's more including:

  • CSS Grid and Flexbox
  • Bootstrap 4
  • Javascript
  • The terminal
  • Node.js
  • Express
  • Working with API'S
  • Mongoose
  • Mongo DB
  • And so much more

So, enjoy this class and check out the rest of the parts as they become available!

734

Students

1

Project

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Chris Dixon

Web Developer & Online Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website...

See full profile

Report class