Build an HTML and CSS Website From Scratch Premium class

Jonathan Grover, Developer / Designer / Creative Technologist

57 Videos (11h 4m)
  • HTML and Web Fundamentals

    • Trailer

      01:03
    • Web Fundamentals

      4
      4
      10:30
    • Getting Started

      02:17
    • Document Structure

      1
      1
      16:35
    • Text Formatting

      1
      1
      24:13
    • Images

      12:37
    • Links

      2
      2
      22:00
    • Validating HTML

      06:29
    • Site Publishing

      14:01
  • Tables, Forms, and Iframes

    • Introducing Tables, Forms, & Iframes

      7
      7
      19:27
    • Tables

      10:14
    • Iframes

      04:47
    • Forms

      08:31
  • HTML5 Elements

    • Introducing HTML5 Media, Semantic Elements, and Metadata

      10
      10
      23:36
    • Video

      11:01
    • Prep for HTML5

      10:40
    • HTML5 Semantic Elements

      1
      1
      13:19
    • Metadata

      04:14
  • CSS Fundamentals

    • Styling the Front-end

      8
      8
      10:05
    • Setting up an External Style Sheet

      04:23
    • Type Selector

      1
      1
      14:28
    • Color Systems

      15:11
    • Font Shorthand

      02:46
    • Web Fonts

      06:36
    • Class Selector

      07:52
    • ID Selector

      1
      1
      08:47
    • Descendant Selector

      1
      1
      06:58
    • Psuedo Selector

      1
      1
      14:54
    • Developer Tools (part 1)

      11:51
  • Building Page Layouts

    • Element Display

      5
      5
      09:39
    • Box Model

      10
      10
      38:08
    • Box Aesthetics

      6
      6
      17:51
    • Floating

      8
      8
      37:08
    • Prep Layout

      08:26
    • Applying Box Properties

      06:43
    • Styling Tables

      06:44
    • Styling Forms

      06:29
    • Styling Iframe

      01:43
    • Centering Content

      04:30
    • Applying Box Shadow

      03:28
    • Applying Gradients

      04:07
    • Styling the Logo

      03:27
    • Styling Main Sections

      06:32
    • Styling Details Section

      01:45
    • Creating Column Structure

      26:48
    • Developer Tools (part 2)

      06:49
  • Positioning and Sprites

    • Positioning Techniques

      11:01
    • Z-Index Layering

      04:51
    • Sprite Rollovers

      04:51
    • Styling Navigation

      16:17
    • Styling the Social Media Bar

      16:55
  • Responsive Layout

    • Responsive Layout Techniques

      12:31
    • Setting Up Local Responsive Testing

      11:47
    • Prep HTML for Responsive Layout

      08:48
    • Applying CSS3 Media Queries

      40:31
  • Finishing Touches and Onward

    • Adding PHP Mailer Script

      16:16
    • Resets, Grid Systems, & Templates

      10:11

About This Class

This class is perfect for anyone with a great website idea or just an interest in learning how to code. This is a beginner-level class so if you have basic computer literacy and an internet connection, you're all set. Learn at your own pace. 

You'll leave this class with the skills to create your very own stylish, professional, and responsive website.

What You Will Learn

  • HTML and Web Fundamentals. You'll start with text editing basics, headings, images and linking between pages.
  • Tables, Forms, and Iframes. After learning the essentials you'll learn how to add more elements like tables, forms, and Iframes to your pages.
  • HTML5 Elements. You'll add HTML 5 semantic containers, metadata, and media to your pages.
  • CSS Fundamentals. You'll use CSS to create a style sheet that will allow you to fluidly change your pages contents.
  • Building Page Layouts. You'll build with columns and utilize the box model.
  • Positioning and Sprites. You'll use z-index and sprites to creat advanced layout features. 
  • Responsive Layout. You'll create responsive site design that allows your site to alter its style and content positioning based on the size of the device it is being viewed on.

ba250a83

What You'll Make

Spread throughout the course are Code Challenges. Code Challenges are opportunities for you to put what you've learned to practice by coding on your own. A continuous project will be built out of the code challenges adding more to your site project with each challenge.

Handouts and Resources

You will be provided with extensive handouts and suggested reference materials to continue your learning even after the course.

100% Positive Reviews 204 See All

This is very good course for beginners. Take a look.
Ivan Kusakovic

Web developer beginner

Very inforamtive and step by step instructions. I am someone with very little compueter skill or understanding and I have been able to follow along and get a site up! now I am just making my site more dynamic by getting into the more advanced classes. Great couorse. highly recommended to anyone who wants to build a site and has no idea where to start. If you are a little more advanced and already have a site I feel that this course could help you make your site more interesting and effective.
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. I have been unable to find another course as amazing as this one. I wish there was one for javascript!! :)

637

Projects

6,851

Students

Jonathan Grover

Developer / Designer / Creative Technologist

I'm a web designer & nationally recognized digital artist with over five years of teaching experience in creative programming, interactivity, web development, circuitry & DIY electronics. I received a BFA in Graphic Design from the University of Akron and an MFA in Design & Technology from the San Francisco Art Institute. I've held instructing positions at the San Francisco Art Institute, Pittsburgh Art Institute, 3rd Ward, and General Assembly. Currently, I serve as a faculty member at Flatiron School, a NYC based immersive style web development program. My interests include creating interactive artwork, programming, building things, animals, travel, and scuba diving.

@jongrover