The Basics

The Basics

  • Slides
  • Videos
  • Challenges
  • Blog

›Intro to HTML

The Basics

  • Course Introduction

Intro to HTML

  • First Steps in HTML
  • HTML Syntax
  • HTML Tags In Action
  • The Paragraph Tag
  • Heading Tags
  • Strong & Italic Tags
  • Line Break & Horizontal Rule
  • Link Tags
  • Link & Attribute Review
  • Attributes
  • Image Tags
  • List Tags
  • Review
  • HTML Tags Challenge
  • Advanced Challenge
  • HTML Resources & Extras

Intro to CSS

  • CSS Syntax & The Style Tag
  • Breaking down CSS Rule Syntax
  • CSS Color
  • CSS Background Color

Layout

  • Layout Overview
  • Creating a Layout - Non Semantic

HTML Structure

  • The HTML Tag

CSS Flebox

  • Essential Tools for Web Developers

Responsive Design

  • Essential Tools for Web Developers

Review & Final Project

  • Essential Tools for Web Developers

Advanced Challenge

Optional challenge, use w3 schools for reference. Google anything you don't know how to do!

Open Slide

The Basics: Advanced Challenge

Codepen Lesson

  • Use an image tag to display and image of a computer
  • Wrap the image around a link tag to make it clickable
  • Make the image open a link in a new tab
  • Add a border around the image and turn it green, make the border 5px thick
  • Add 5 inline css styles anywhere in the project

Open Codepen

Video Walkthrough

Test your HTML Skills

View Youtube Video

Helpful Links

  • W3 reference
  • Inline Styles
  • Hints
  • Dev.to Blog Post
← HTML Tags ChallengeHTML Resources & Extras →
  • The Basics: Advanced Challenge
    • Codepen Lesson
    • Video Walkthrough
    • Helpful Links
The Basics
Lennyroy Codes
Intro to HTMLIntro to CSSLayoutHTML StructureCSS FlexboxResponsive DesignReview & Final Project
Features
Slide LibraryVideo LibraryChallengesBlog
Learn More
GitHubTwitterLinkedInPortfolioStar
Buy me a coffee!Buy me a coffee!
Copyright © 2019 Lennyroy Codes