Welcome to Discussion #1!

CS 160 · User Interface Design and Development · Spring 2024

Do Now: Create a Figma account here

(Use berkeley email)

Back to index

Agenda

Get to know eachother
Learn HTML
Learn CSS

Introductions

Figma ↗

Before we begin...

High Level Strategies

Don't start completely from scratch if you don't have to. Use the starter code/templates, inspect the code of websites you like, etc.

Good news: You can (and should) Google/chatGPT as needed. But remember, always cite your sources!

HTML

Hyper Text Markup Language

Example HTML

DOM

Document Object Model

Activity Time: Group Website

Work with the people around you to recreate your figma cards - If your team is confident, go ahead and recreate your shared board!

Go to CodePen and click on "Start Coding"
- Or, open up VSCode or any editor, create .html file
Place all the content on the page, we'll look at how to style it later
- How do you place images?
- Is there an element that makes font bigger?
- Bonus: start thinking about page hierarchy... what is a container?

Recap

Write HTML and display
- CodePen
- VSCode
HTML tags: <div>

CSS

Cascading Style Sheets

4 Ways to Add CSS to HTML

Inserting a style tag (in <head>):

Reference external style sheet:

Using the attribute style on a tag:

Javascript (we'll look at this later)

Activity Time: Demo

Throwing y'all in headfirst! I'll give a brief overview, then explore the other example with a partner. Once you're a bit more confident, return and style your html card.

http://tiny.cc/css-160

http://tiny.cc/160buttons

Inspect Element

We'll look at this more in depth when we work with javascript, but for now, you should know how to access developer tools

HTML DOM
Computed Styles
Select tool
Console

Recap

4 ways to add css
- Style tag
- External style sheet
- Attribute style
- Javascript
CSS properties
Inspect element

Thank you!

Other resources:

Tim! https://160.tja.io/sp2024/week1/
Documentation:
- Mozilla
- W3