(720) 728-8931

It All Starts with HTML5/CSS3

HTML5/CSS3 Project Screenshot

HTML5/CSS3 Project Screenshot

The first thing you need to learn to become a Front-End Developer is how to structure your web page with HTML5 and then style it using CSS3.  In the class, It All Starts with HTML5/CSS3, you will learn how to use these two technologies to build your first working website and walk away with a complete template you can continue to use for practice.

Course Description and Prerequisites

Learn to code HTML5/CSS3 to produce eye-catching web designs, including a working Form to gather your user’s information. Acquire the basics of the new HTML5/CSS3 standard to further enhance your design and gain more control of your forms. The first day focuses on structuring your website and adding your content using HTML5. Day 2 is spent laying out and styling your design with CSS3 for optimal presentation to your users. Leave the class with a working web design layout. This class focuses heavily on HTML5 & CSS3 coding and separation of structure/content and styling. Prerequisite: Proficiency using Windows and a Web Browser.

Day One: HTML5

On the first day of this 2-day class we will step through the process of soundly structuring our template using valid HTML5 semantic tags. We will discuss proper structure of the HTML5 document including proper DOCTYPE, laying out the HEAD and BODY sections and adding all visible content of the page. After completing the main template structure we will learn how to construct a proper FORM while looking at some of the new HTML5 INPUT types and helpful attributes. If time allows we will also cover the use of HTML TABLES.

Day One Outline Register CFU Outline PDF
  1. Greetings and Introductions

  2. Brief History of HTML

  3. HTML Syntax

    1. Tag Structure Open/Close
    2. Attributes and Values
    3. Self Closing Tags
  4. Structure and Content

    1. HTML is for Structure and Content – The Bones
    2. CSS is for Styling and Layout – The Skin
    3. Programming Languages – The Muscles
    4. The Database – The Brains
  5. Nesting and the DOM

    1. The Important Concept of Nesting
    2. The Document Object Model (DOM)
      1. Parents
      2. Children
      3. Siblings
  6. A Little About Text Editors

    1. Free Downloads Available
    2. Syntax Highlighting
    3. Line Numbering
  7. Coding Our First HTML Document

    1. DOCTYPE, HTML, Head and Body Tags
    2. Page Wrapper or Container
    3. Setup the Main Sections of the Page
      1. Structure the Main Header
      2. Structure the Main Nav
      3. Structure the Sidebar
      4. Structure the Main Content Area
      5. Structure the Footer
    4. Lorem Ipsum as Content Placeholder
  8. HTML Forms

    1. The Form Tag and Attributes
    2. Fieldset and Legend Tags for Grouping
    3. Using the Label Tag
    4. The Input Tag and It’s Various Types
    5. Textarea and Select Tags
  9. HTML Tables

Day Two: CSS3

Now that we understand and know how to use basic HTML, we turn our attention to styling our web page using CSS3. Through the use of CSS (Cascading Style Sheets) we can custom define the layout and look of our site to meet our needs. We will methodically layout each HTML section of our site while applying style elements including fonts, text colors, background colors and more to achieve a pixel perfect representation of our desired design. In addition, we will examine various ways to implement the CSS pseudo class HOVER to give our page some action and explore new CSS3 properties to give our page depth and sophistication.

Day Two Outline Register CFU Outline PDF
  1. CSS Syntax

    1. Selecting HTML Elements
      1. Select by Tag Name
      2. Select by ID [#]
      3. Select by Class [.]
    2. Define a Group of CSS Properties [{}]
    3. Setting Properties and Values
      1. Property Names Always Lower Case [:]
      2. Multiple Word Properties [-]
      3. Values and Units [;]
  2. CSS Reset

  3. Setting Up Defaults and Page Container

    1. Begin by Styling the Body Tag
      1. Set Default Font Properties
      2. Background Colors and Images
    2. Center the Page Container Selecting by ID
    3. Defaults for Text Tags
      1. Style the Heading Tags
      2. Style the Anchor Tags
  4. Laying out the Header

    1. The 4 Positions
    2. Borders as a Developer Tool
    3. The Logo: Content or Style?
    4. Using the Float Property
    5. The Box Model
      1. The Width and Height Properties
      2. The Margin Property
      3. The Padding Property
      4. Borders and Outlines
    6. CSS3 Fun with Text Shadows
  5. Interactive Navigation Menus

    1. Horizontal List Without Bullets
    2. Nav Button Width or Padding?
    3. Block Elements vs Inline Elements
    4. Hover State for Interaction
    5. Inheritance and Nested Drop Down Menus
  6. CSS for Sidebars and the Main Content Area

    1. More Practice with Margin and Padding
    2. Defining Properties on a Class
    3. Using Float with Images
    4. CSS3 Fun with 3D Borders, Rounded Corners and Drop Shadows
  7. Setting up the Footer with CSS

    1. The Clear Property for Dynamic Content Loading
    2. Using Absolute Positioning
    3. Changing Images with Hover
  8. Notes on Styling HTML Forms

    1. Use Opposing Floats on Labels vs Inputs
    2. Attribute Selector for Forms
    3. Differences in Width on Input vs Select Tags
    4. Limitations on Form Element Styling

What Former Students Have Said

This was perfect for me – I never could have learned this on my own so quickly.

Catherine H. - May, 2016

Great class!

Christian M. - April, 2016

This was a great & very helpful class to start learning the basics. It encouraged me to be interested in the more advanced classes. HTML/CSS is easy!

Julia H. - April, 2016

Course Materials would be helpful – showing steps, outcomes expected, etc. of what we did instead of just oral instructions – I like to have written material to refer back to. Great course – Thanks!

Linda K. - April, 2016

The class was really engaging and I’m surprised at how much we did in just 2 days! Donnie is patient and knowledgeable. He made HTML/CSS seem easy. 🙂

Jessica D. - March, 2016

Great class! Learned a lot.

Genevieve T. - January, 2016

Great class! Great Instructor! I learned so much in 2 days!! Thank you!

Ann Marie K. - January, 2016

Great class – moves fast.

Serena S. - December, 2015

Build in some informal skills tests along the way yo make sure we’re getting the info.

Martina S. - December, 2015

Nice small class. Good pace for learning. Handouts which cover the information presented on the white board would have been nice for reference.

Jeremy G. - October, 2015

The instructor can teach the material but he can also figure out where the student went wrong. That is the tough part but he is good at it.

Richard T. - September, 2015

Good class!

David R. - July, 2015

The instructor was very helpful and patient with all of us. We have all been given good tools for being able to continue on our own from here on out.

Alexa B. - July, 2015

Great class! The instructor is patient, helpful and knowledgeable.

Amy B. - July, 2015

A few handouts with codes / instructions to have on hand.

Sylvie I. - July, 2015

Pace the class a little faster, so we don’t go over, especially day 1. Great class overall! I learned a lot and highly recommend it.

Marina C. - June, 2015

Excellent! Covered a great deal of very helpful material. Really enjoyed the class!

Nancy W. - June, 2015

Good class. Moved a little too quickly through some sections. Made it hard to follow.

Stuart S. - May, 2015

The instructor’s teaching style is very effective for technical knowledge transfer.

Valerie D. - May, 2015

Great class! Thank you! Will be back for HTML, JavaScript and PHP when you get it.

Jessica C. - April, 2015

This class far surpassed my expectations. The material covered was presented in a way that made learning easy.

Justin G. - April, 2015

Great class! Thanks a lot!

Mike K. - April, 2015

The small class size was great!

Karen M. - February, 2015

Class was only 2 people – allowed for lots of flexibility and interaction. The instructor covered any questions we had.

Nancy H. - February, 2015

I learned so much!

Christine T. - October, 2014

Very helpful!

Susan H. - October, 2014

One of the best classes I’ve taken here. Excellent!

Jaima L. - October, 2014

Great class!

Scott H. - September, 2014

Need more hands-on problem solving by students.

John U. - September, 2014

This was so helpful! Thanks!

Marisa R. - July, 2014

Donnie teaches with great enthusiasm. He is extremely helpful and has passion for his field of study. A great experience!!

Hilarie S. - June, 2014

I was intimidated by the subject matter before I came to this class. The instructor presented it very logically and made it fun. After understanding everything easily on the first day, I was excited for the second day!

Jeff T. - March, 2014

The class offered a great framework for understanding HTML/CSS and was the right speed for a beginner with tangible results at the end.

Lucas A. - March, 2014

Great! Perfect pace and surprisingly interesting. Thank You!

Diana D. - March, 2014

The instructor was patient, clear, willing to answer all questions and clearly enthusiastic about the material. Good instructor.

Amy S. - March, 2014

Awesome class, easy to follow and empowering!

David G. - January, 2014

Great class!

Katherine O. - January, 2014