(720) 202-6148
It All Starts With HTML5/CSS3 Class Project Screenshot
It All Starts With HTML5/CSS3 Class 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. It is not too difficult to start learning HTML5 and CSS3, so join us today and build your skills.

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.

Download Outline PDF Register Online CFU

It All Starts With HTML5/CSS3 Course Description

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 learning HTML5 & CSS3 coding and separation of structure/content and styling.

Learning HTML5/CSS3 Prerequisites

  • Proficiency using Windows and a Web Browser.

Day One: Structure Your Site Using 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 Two: Layout and Style Your Design Using 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.

Download Outline PDF Register Online CFU

Former Students Share Their Insights

It All Starts With HTML5/CSS3 Class Resources

You will likely find the following resources for HTML and CSS very helpful on your journey to learning these basic website languages. The W3 Schools reference below gives you a complete HTML tag reference and comprehensive overview of all the CSS properties. In addition, there are several resources to help you with color scheming, making favicons and validating your code. We hope you find them useful in your quest to master HTML and CSS.

  • Colorado Free University

    Colorado Free University is a life long learning center offering a wide array of skill-based and enrichment courses. More of a learning network than a traditional school, CFU draws its teachers from the community and all teachers to share their expertise with you!

    Find A Class
  • CSS-Tricks Beginner Guide

    Just getting started as a front-end developer? Awesome. CSS & HTML are the foundation of building all websites. We have some stuff here that might be useful to you.

    CSS Tips and Tricks
  • W3 Schools HTML Reference

    W3 Schools is a web developer’s site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, and JQuery, covering most aspects of web programming. This link will take you to a complete, comprehensive list of all the HTML tags past and present with many examples to show you how they work. There are tools on the site such as the Try It Yourself coding application, a table of browser compatibility for each tag and a list of attributes and values available for each tag.

    HTML Reference
  • W3 Schools CSS Reference

    W3 Schools is a web developer’s site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, and JQuery, covering most aspects of web programming. This link will take you to a complete, comprehensive list of all the CSS properties and their available values with definitions and example uses. There are tools on the site such as the Try It Yourself coding application and a table of browser compatibility for each property

    CSS Reference
  • W3C HTML Validator

    The Markup Validator is a free service by W3C that helps check the validity of Web documents. Most Web documents are written using markup languages, such as HTML or XHTML. Validating Web documents is an important step which can dramatically help improve and ensure their quality, and it can save a lot of time and money.

    Validate Your HTML
  • W3C CSS Validator

    The W3C CSS Validation Service is a free service to help designers and developers check Cascading Style Sheets (CSS). This tool will compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability.

    Validate Your CSS
  • Lorem Ipsum Generator

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. The tool allows you to generate random filler text for your development purposes.

    Generate Placeholder Text
  • Favicon Generator

    Favicons (or site icon) are the small images that are associated with a website. They will be displayed on the address bar, on browser tabs, and in the bookmark list. Getting a favicon has never been easier. This tool provides you a quick way to create your own web tab identity.

    Make a Favicon
  • Learn CSS Grid

    CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way it makes the most sense when learning it.

    CSS Grid Reference
  • Complete Guide to Flexbox

    A comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

    CSS Flexbox Reference
  • CSS Filter Tricks

    CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

    CSS Filter Reference
  • HTML Entities & Symbols

    A complete reference of HTML Entities and Symbols. HTML Entities are used to implement reserved characters or to express characters that cannot easily be entered with the keyboard. The HTML Symbol Entities include mathematical symbols, Greek characters, various arrows, technical symbols and shapes.

    HTML Entities Reference
  • A Nerd’s Guide to Color on the Web

    There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let’s delve into some of the technical details of color on the web.

    Guide to Colors
  • The Meaning of Colors

    Understanding the colors on the color wheel and what they mean is the first step to decorating your space satisfactorily.

    Color Psychology
  • Color Scheme Designer

    When designing web pages, computer applications, or house interiors, we need to find good color scheme — a set of colors producing the best impression. This tool will find set of colors you can start with, and it may facilitate your looking for the optimal color palette.

    Create A Pallet
  • Deep Learning Color Generator

    A sophisticated, deep learning, color generator to help you create a color pallet for your website.

    Smart Color Picker
  • Read Color Hex Codes

    Ever wondered about those 6 digit hex codes and what they mean? Watch this video or read the transcript to learn how to read them and describe any hex color. You will get great insight into what the values mean and how to use them to greater benefit when designing a website.

    Read Color Hex Codes
Download Outline PDF Register Online CFU

Check out our other WordPress and SEO Classes or learn about our Corporate or One-on-One Instructional Offerings.