Nmd Webinar Responsive Twitter Xvga

@jonippolito • UMaine.edu/newmedia

How to enjoy this webinar

🖥 Load this webinar script

Link in the chat panel

🖊 Get a CodePen account

⌨️ Type in the Zoom "chat" panel

(not the Q&A panel)

🗣 To enable your audio or video speak

Click Raise Hand ✋ to be promoted to panelist)

New Media webinars

Nmd Webinar Responsive Instagram Xvga
Nmd Webinar Nft Sq 1080
Nmd Webinar Careers Instagram
Nmd Webinar Mobile Sq Xvga

UMaine.edu/newmedia

New Media faculty

Mit Logo Tra
Upenn Logo Tra
Harvard Logo Tra
Yale Logo Tra

New Media alumni

Adobe Logo
Amazon Logo
Apple Logo Silver Tra
Wikipedia Logo Tra Ill
Bbc Logo Vga
Katy Perry Ryan Genz Kdress

Popular New Media concentrations

User Experience (UX) design
Ux Diagram Svga
User Experience Word Cloud Svga
Digital storytelling
Story Diagram Svga
Digital Storytelling Word Cloud Svga
Web and mobile apps
Web Diagram Svga
Web Mobile Word Cloud Svga

Flipped classrooms

Digital badges

Badge Array

Why responsive design?

Responsive Design Graphic Xvga Google Mobile Apocalypse Headline

Ways to make a responsive website

Feature
Web builder (WordPress)
CSS framework (Bootstrap)
Plain CSS (grid, @media)
No coding
Free
😐
Customizable
😐
😐
Distinctive
😐
😐
Lightweight

The three horsemen of the modern web

Html Css Js Shield Icons

HTML

Web Anatomy Html Screenshot

HTML

The First Web Page

Berners Lee First Web Page

Tim Berners-Lee, 1991

HTML

HTML

🎗 Close tags twice

1. Close every tag with an "end angle" >


	<div>

2. Close start tags with an "end tag" that has a slash /


	<div>Welcome to my page!</div>

CSS

Web Anatomy Css Screenshot

World Wide Web (W3) Consortium, 1996

CSS

Controls the style of HTML tags


	/* A "tag" style applies to every block of text. */
	div {
		font-family: verdana ;
	}
	/* a "class" style applies to all "cat" divs. */
	.cat {
		width: 100px ;
	}
	/* An "id" style applies to a unique "cat" div. */
	#grumpy {
		color: red ;
	}

Size

Position

Color

Font

Meme Car Html Css

HTML + CSS = Web design

Css Ninja Screenshots 1
Css Ninja Screenshots 2
Css Ninja Screenshots 3
Css Ninja Screenshots 5
Css Ninja Screenshots 4
Css Ninja Screenshots 6

Don't forget the semicolon

Code Syntax Highlight Max Headroom Meme Meme Pointing At Semicolon

/