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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5h 36m | 4.06 GB

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
  • Building your own API
  • Mongo DB
  • SASS
  • React.js
  • And so much more

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

Table of Contents

01 Welcome to the course!
02 What will you need for this course (Getting Started)
03 Understanding HTML
04 Setting up a web project
05 Structuring a web page
06 HTML Headings
07 Div and span
08 Adding paragraphs and text
09 Text emphasis, importance and formatting
10 HTML Lists
11 Time to practice Create the project lists
12 Working with images
13 Links
14 Time to practice Linking to pages
15 What are semantic elements
16 Adding semantic elements into our project
17 Time to practice Adding more products
18 Solution Adding more products
19 HTML Comments
20 Entities and symbols
21 Time to practice Product detail page
22 HTML Tables
23 HTML Forms
24 Labels, name and id
25 Checkboxes and radio buttons
26 Select input
27 Datalist & submit
28 Other useful form elements
29 IFrames
30 Adding Google maps
31 Understanding CSS
32 Inline styles and adding color
33 Internal stylesheets
34 External stylesheets
35 Fonts
36 Classes and id’s
37 The box model
38 Block, inline and inline-block
39 Margin and padding
40 List styling
41 Styling links and psuedo classes
42 Float and clear
43 The position property
44 Styling forms and inputs
45 Time to practice final project styling
46 Solution final project styling
47 Specificity and the cascade
48 What is responsive design
49 The viewport meta tag
50 Scalable units
51 Fluid layout
52 Understanding media queries
53 Mobile first styling
54 Styling for medium devices
55 Styling for large devices
56 Picture and srcset
57 Time to practice
58 Thank you