The Basics

The Basics

  • Slides
  • Videos
  • Challenges
  • Blog

›The Basics

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

Course Introduction

Quick intro the course.

Intro Slide Deck

Skip Ahead?

Lesson 1 Lesson 1 Slide Deck

The Basics: Introduction

Welcome!

My name is Lennyroy Robles.

I am a frontend developer at IV Interactive.

I am a self taught programmer.

I have been coding professionally for 2 years at a full service marketing agency.

What makes the basics special?

This course will present the same material in a few different ways. The slide decks will mirror the content of these pages. It is up to you to determine which style works for you. Good luck!

Course Purpose

This course was designed to for absolute beginners.

By focusing on exclusively on fundamental frontend concepts, this course aims to prepare students for the modern web landscape.

This course offers the same material in different mediums.

Videos, podcast, blogs, slide deck, etc.

Whatever works for you!

Course Goals

What will you learn?

  • Students will understand the Box Model in CSS.

  • Students will learn all basic HTML tags & CSS Properties.

  • Students will understand how to use Glitch to create live sites.

  • Students will understand how to effectively leverage documentation.

  • Students will be exposed to Mobile-First Responsive Design.

Course Tutorial

Using Codepen within the slides

Codepen challenges

Gold icon takes you to the course homepage

Slide navigation

Ready to start?

Intro to HTML

Contact Info

Email: lennyroycodes@gmail.com

Website: lennyroyrobles.com

Social Media: @lennyroyroy

GitHub

Codepen | Glitch

Slide Deck Gallery

Lesson 1: Intro to HTML
Lesson 2: Intro to CSS
Extra: Creating Accounts
Extra: Creating Glitch Tutorial
Lesson 3: Layout
Lesson 4: HTML Structure
Lesson 5: Flexbox
Lesson 6: Responsive Design
Lesson 7: Responsive Design
Good luck!
First Steps in HTML →
  • The Basics: Introduction
  • What makes the basics special?
  • Course Purpose
  • Course Goals
  • Course Tutorial
    • Using Codepen within the slides
    • Codepen challenges
    • Gold icon takes you to the course homepage
    • Slide navigation
  • Ready to start?
  • Contact Info
  • Slide Deck Gallery
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