Advanced Web Programming

Course Overview

CSCI 4513

Week 1, Lecture 1

Welcome to the course!

Today's Agenda

📚 Course Introduction
🌐 The Odin Project
📅 Course Schedule & D2L
💻 Intermediate HTML/CSS Topics

Course Resources

Where to Find Everything

Course Website: Weekly schedule, lecture slides
D2L: Gradebook, assignment submissions, announcements
The Odin Project: Primary curriculum resource
GitHub: Version control and project repositories

The Odin Project

Our primary curriculum follows The Odin Project, a free, open-source web development curriculum.

Why The Odin Project?

✅ Comprehensive, project-based learning
✅ Industry-relevant skills and best practices
✅ Strong emphasis on problem-solving
✅ Active community support

theodinproject.com

Norse Mythology in This Course

Since we're following The Odin Project (named after the Norse god of wisdom), we'll deepen that connection by exploring Norse mythology throughout the semester.

How We'll Use Norse Stories:

📖 Each major topic begins with a relevant Norse myth
🔗 Stories parallel technical concepts you're learning
💡 Makes abstract programming ideas more memorable
🎨 Adds narrative flavor to our technical journey

Example: Odin's sacrifice for wisdom mirrors your commitment to learning. The dwarven forges parallel ES6 modules. Thor's impossible challenges reflect async complexity!

Intermediate HTML & CSS

Our foundations only scratched the surface. Now we dig deeper!

What You'll Learn

Advanced HTML elements (forms, tables)
CSS variables, functions, shadows
Grid layouts
Animations and accessibility (later in course)
Responsive design (later in course)

💡 Goal: Recreate any web design you find on the internet!

Emmet

Write HTML & CSS Faster

Emmet is a plugin built into VS Code that provides shortcuts for writing HTML and CSS.

Quick Demo

Type: ! then press Enter

→ Generates complete HTML5 boilerplate!

Emmet Abbreviations

Common Shortcuts

p.text

→ <p class="text"></p>

div>p

→ <div><p></p></div>

Multiply Elements

li.item*3

Creates 3 <li> elements with class "item"

🔑 Tip: Set up custom keybindings for "Wrap with Abbreviation" and "Remove Tag"

SVG (Scalable Vector Graphics)

What are SVGs?

SVGs are scalable image formats that retain quality at any size.

Best For:

Icons
Graphs/Charts
Simple images
Logos

Not Good For:

Photos
Complex textures
Detailed images

SVG: Vector vs Raster

Vector graphics are defined by math formulas, not pixels.

SVG is XML

                <svg xmlns="..." viewBox="0 0 100 100">

                  <rect x=0 y=0 width=100 height=50 />

                  <circle cx="50" cy="50" r="10"/>

                </svg>

✨ Benefits: Human-readable, works with CSS/JavaScript, no quality loss when scaled!

Embedding SVGs

✅ Linking (Simple)

Cleaner code, cacheable, but can't modify with CSS/JS

🎨 Inline (Powerful)

Full control with CSS/JS, but harder to read and less cacheable

HTML Tables

Tables create two-dimensional grids of rows and columns.

                <table>

                  <tr>

                    <th>Header 1</th>

                    <th>Header 2</th>

                  </tr>

                  <tr>

                    <td>Data 1</td>

                    <td>Data 2</td>

                  </tr>

                </table>

⚠️ Warning: Never use tables for page layout! Use CSS Grid/Flexbox instead.

SVG Resources

Finding Quality SVG Icons

🎨 Glyphs.fyi - Pure SVG Code

Website: https://glyphs.fyi/

A fantastic resource for getting starter SVGs in pure SVG code form. Perfect for web development!

✅ Copy-paste ready SVG code
✅ Clean, optimized paths
✅ Easy to customize with CSS
✅ Great for inline SVG implementation
✅ Free to use

💡 Pro Tip: When you need inline SVG for full CSS/JavaScript control, Glyphs.fyi gives you clean code you can paste directly into your HTML without messy export tools.

Default Browser Styles

Every browser applies default styles (user-agent stylesheets).

Examples

Larger, bold h1 elements
Blue, underlined links
Default margins and padding

CSS Resets

CSS resets remove or normalize default styles for consistency across browsers.

💡 Note: Resets are optional and opinionated. Choose what works for you!

CSS Units

Absolute vs Relative

Absolute Units

px is the only absolute unit you should use for web.

Pixels don't change relative to anything else on the page.

📏 Other absolute units: in (inch), cm (centimeter) - better for print!

Relative Units

em vs rem

1em = font-size of the element (or parent)
1rem = font-size of the root element (:root or html)

👍 Best Practice: Prefer rem over em for consistency!

Viewport Units

1vh = 1% of viewport height
1vw = 1% of viewport width

Perfect for full-height heroes or app-like interfaces!

More Text Styles: Fonts

System Font Stack

font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

Web Fonts

Import fonts from libraries like Google Fonts or host them yourself.

⚠️ Always include fallback fonts! External APIs can fail.

Text Style Properties

font-style: Make text italic
letter-spacing: Adjust space between letters
line-height: Adjust space between lines
text-transform: Change case (uppercase, capitalize)
text-shadow: Add shadows to text
text-overflow: ellipsis: Truncate with ...

💡 Tip: Use <em> for semantic emphasis, font-style for visual styling.

In-Class Activity

Setup & Exploration

Create a new HTML file in VS Code
Use Emmet to generate boilerplate (type ! and press Enter)
Practice Emmet shortcuts: p.text, div>p, ul>li*3
Create a simple table with 2 rows and 2 columns
Experiment with text-transform and letter-spacing

Today's Takeaways

You Can Now:

✅ Navigate course resources (Website, D2L, Odin Project)
✅ Use Emmet to write HTML faster
✅ Understand SVGs and when to use them
✅ Create HTML tables
✅ Work with CSS units (px, rem, vh/vw)
✅ Apply advanced text styling

📅 Next Class: Forms & More CSS

📝 Homework: Complete Odin Project readings + Sign-up Form project