This week we will
Monday 2/7
Activity 1: HTML
We will review last week and talk about the Kahoots you’ve done.
There are these resources as well
Kahoots
Here are the challenges we did last week.
HTML Basics
- Game PIN: 02394275
- HTML Basics Game Link
HTML Content Sectioning Elements
- Game PIN: 02850126
- HTML Content Sectioning Elements Game Link
Content Sectioning
It is helpful to learn the elements of the page that will contain other elements. Most of these are a type called Content Sectioning elements (with an exception of div noted below).
The most commonly used content sectioning elements are:
(each element links out to related MDN reference page)
- main
- nav
- header
- footer
- article
- aside
- section
- div (not technically a content sectioning element, it is the generic block element that can contain other elements.
Headings <h1>–<h6>
Not to be confused with the header element, headings are technically content sectioning elements but they do not contain other elements like those above.
References
- Content Sectioning (MDN)
Basic Page Structure
Many web pages share a similar structure
- Header <header> with site title <h1> and main navigation <nav>
- same on each page
- Main content of the page <main>
- different on each page
- Footer <footer>
- same on each page
For this reason it’s good to learn the elements to use for these common sections. We are going to look at this CodePen, and then you will fork it and try adding in content sectioning elements for one of the portfolio sites you researched.
Action:
[1] Review CodePen
[2] Pick one of the sites you researched, look at the main areas of the page and
- Fork my Basic Page Content Sectioning page
- Change the title and nav to match your sites
- Add in content section elements inside of the <main> for the page sections.
- Copy and paste some of the footer content into the footer of the page (if it is a large footer you don’t have to copy and paste everything).
Activity 2: CSS
We will start to learn some CSS
CSS Basics Presentation
Mozilla Developers Network: MDN
This site sets the standard as a reference for all things web.
CSS: Cascading Style Sheets
This is the main area for all things CSS at MDN
CSS Syntax
CSS Reference
Activity 3: Gestalt
We will look at this post of Gestalt Principles.
Gestalt Activity
Using pens and index cards we will explore Connectedness and Proximity.
WEDNESDAY 2/9
Activity 1: CSS
We will look at some more selectors from the CSS Basics Presentation
Then we will do the CSS Basics Kahoot Challenge
- Game Pin: 08114491
- Game Link: https://kahoot.it/challenge/08114491?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1644445827093
Activity 2: Portfolio Brief
We will spend the rest of the class going over the Portfolio Brief.
Scoring Rubric
We will use the Portfolio Brief page to go over this
Written Sections
We will talk about the written sections and have you start writing. The following sections are written:
- Description
- Describe what the project is.
- Target Audience
- Describe the people who will visit the site (demographic information, interests, profession etc)
- Goals
- Describe your goals: why are you making the site.
- Describe the users’ (target audience) goals. What do they want to see? What information are they looking for?
- Look and Feel
- Describe the visual design and how you want the site design to make people feel. If there are interactive elements, describe those as well.
- Research (you already started this with your research/inspiration post)
- Provide two to three sites that provide inspiration. For each site:
- – name of the site
- – link to the site (can make the name the link or show url separately)
- – reason the site was chosen
- – optional screenshot
Visualizations
You will create two types of visualizations
- Site Map
- Wireframes
We will talk about these and look at Figma as a tool for creating them.
Figma Links
Free Wireframe UI Kit
https://www.figma.com/file/CnPg7yRagjKTEzaKe5FgT2/Free-Wireframe-UI-Kit-(Community)?node-id=2%3A2
Botique Travel Website Wireframes
Sitemap/Wireframes
https://www.figma.com/file/v6WjroyFBbCr2wSaS4PvCg/Sitemap%2F-Wireframes?node-id=0%3A1
