Professor Lisa Friedrichsen's

Computer Science YouTubes, Resources & Reference Material

HyperText Markup Language (HTML) & Cascading Style Sheets (CSS)

HTML Introductory Material

• Creating your first web page
• Creating your html wireframe
• Whitespace in html and css - spaces, tabs, line breaks
• Applying professional web development habits
• (HTML & CSS Part 1 of 2) playlist
• (HTML & CSS Part 2 of 2) playlist

WEB 110 Good Things to Know

• Notepad++ Tips
• Showing File Extensions in Windows
• How Lisa Grades WEB 110 Projects
• Fixing an Error in a Published File

HTML & CSS Validation

• Validating html and css files and correctly coding unordered lists
• Common html errors that are not found by the validator
• Common css errors that are not found by the validator

Hyperlinks

• Adding hyperlinks and inline content
• Five different types of hyperlinks

Images

• Adding flexible images
• Creating hot spots on an image, an image map

CSS Introductory Material

• Introduction to CSS, cascading style sheets
• CSS and the cascade: linked, embedded, and inline styles
• CSS selectors - styling an id or class
• The Power of css courtesy of csszengarden.com

Box Model

• The box model
• Inline vs. block content
• div (block) and span (inline), our nonsemantic tags

Float

• Floating an image
• Floating two columns and floating images in columns
  
• Two ways to clear float
• What happens to a parent container when all elements are floated?

Tables

• HTML Tables and using the CSS :hover pseudoclass

Forms

• Creating an html form part 1
• Creating an html form part 2
• Creating an html form part 3

Responsive Web Design

• Principles of Responsive Web Design
• Media queries
• Using <img> versus the CSS background-image property and troubleshooting CSS issues with Chrome Developer tools
• CSS flexbox and preparing images for a flexbox gallery
• Introduction to CSS grid in a media query (with comparisons to flexbox)

Other

• Introduction to the html DOM, Document Object Model
• HTML 4 vs. xhtml vs. HTML 5 reference page
• Math Order of Operations -- why do we care?
• Math Order of Operations using HTML and JavaScript

Johnson County Community College (JCCC) Information

• Intro to Canvas
• Intro to HTML & CSS (WEB 110)
• Prereqs for JavaScript I (WEB 114)
• Prereqs for JavaScript II (WEB 124)
• Publishing your files to the JCCC Student Web server using Filezilla

WEB 110: HTML and CSS Course Objectives playlist

• Objective 1: Web Page Building Blocks and standards
• Objective 2: HTML structure and CSS formatting
• Objective 3: Using FTP to publish Web Pages
• Objective 4: HTML tables
• Objective 5: Hyperlinks: relative, absolute, image links, image maps
• Objective 6: Cascading Style Sheets!
• Objective 7: Testing and Validation
• Objective 8: Web Forms
• Objective 9: Responsive Web Design!

Basics of Web Design textbook playlist

• Chapter 1 Internet and Web Basics
• Chapter 2 HTML Basics
• Chapter 3 Web Design Basics
• Chapter 4 CSS Cascading Style Sheets Basics
• Chapter 5 Graphics & Text Styling Basics
• Chapter 6 More CSS Basics
• Chapter 7 Page Layout Basics (CSS float)
• Chapter 8 Responsive Basics (flexbox, grid, media queries)
• Chapter 9 Table Basics
• Chapter 10 Form Basics
• Chapter 11 Media and Interactivity Basics
• Chapter 12 Web Publishing Basics

If you like these YouTubes, please subscribe! Thank you!!

Feedback? Comments? Ideas? Write to Lisa Thank you!!

Top