From 571a779803645faba632c19805051b178bd4370c Mon Sep 17 00:00:00 2001 From: "Anne S. Katzeff" Date: Thu, 22 Sep 2022 11:58:56 -0400 Subject: [PATCH 1/8] Intro-ask MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Link index page to my intro page • Add info. to my brief bio --- web-design-1/index.html | 2 +- web-design-1/intro-ask.html | 159 ++++++++++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 web-design-1/intro-ask.html diff --git a/web-design-1/index.html b/web-design-1/index.html index 08a305a..6be9268 100644 --- a/web-design-1/index.html +++ b/web-design-1/index.html @@ -37,7 +37,7 @@

Girl Develop It

Web Design Essentials 1

Class Slides

- Introductions + Introductions
Class 1 diff --git a/web-design-1/intro-ask.html b/web-design-1/intro-ask.html new file mode 100644 index 0000000..9a88049 --- /dev/null +++ b/web-design-1/intro-ask.html @@ -0,0 +1,159 @@ + + + + + + + + + + + + + GDI - Web Design Essentials 1, Class 1 + + + + + + + + + + + + + + + + +
+ +
+ + +
+ GDI Logo +
+

Welcome to Girl Develop It

+
+ + +
+

Web Design Essentials 1

+
+ + +
+

Introductions!

+

Anne Katzeff

+

Web Designer / Front-End Developer

+
    +
  • 20+ years in print design
    • +
  • 10+ years in web design
    • +
  • 15+ years teaching
    • +
  • 15+ years painting
    • +
  • Webmaestro: 20+ websites
    • +
  • ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.
    • +
+
+ + +
+

Introductions!

+
    +
  • Name?
    • +
  • Attending from?
    • +
  • Current favorite or binge TV show?
    • +
+
+ + +
+

Introductions!

+

What are your goals?

+

Why are you interested in Web Design?

+

What do you hope to get out of this series?

+
+ + +
+

Introductions!

+

Rate your level of experience with HTML & CSS

+
    +
  • 1 - Absolute beginner
    • +
  • 2 - Minimal experience (a tutorial here and there)
    • +
  • 3 - Some experience (familiar with the basics)
    • +
+
+ + +
+

Cohort Goals

+
    +
  • Foundational HTML and CSS
    • +
  • Basics of responsive web design
    • +
  • Web design best practices
    • +
  • CODING! Build simple static web pages
    • +
+
+ + +
+

As We Go Along ...

+
    +
  • Display your preferred name and pronoun
    • +
  • I am / We are here for you!
    • +
  • Every question is important
    • +
  • It's okay to be a little or very 'lost'
    • +
  • Participate. Try things. Have Fun!
    • +
+
+
+ +
+ +
+ GDI Logo +

Web Design Essentials 1 - Introductions

+ Creative Commons License +
+
+
+ + + + + + + + + \ No newline at end of file From c1d1a49c986db66f12485c9e561959857fccbc43 Mon Sep 17 00:00:00 2001 From: "Anne S. Katzeff" Date: Thu, 22 Sep 2022 12:28:06 -0400 Subject: [PATCH 2/8] Intro page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Add fragments for slower reveal --- intro-html-css/index-ask.html | 1109 +++++++++++++++++++++++++++++++++ web-design-1/intro-ask.html | 13 +- 2 files changed, 1116 insertions(+), 6 deletions(-) create mode 100644 intro-html-css/index-ask.html diff --git a/intro-html-css/index-ask.html b/intro-html-css/index-ask.html new file mode 100644 index 0000000..78141b3 --- /dev/null +++ b/intro-html-css/index-ask.html @@ -0,0 +1,1109 @@ + + + + + + + + + + + + GDI: Intro to HTML & CSS + + + + + + + + + + + + + + + +
+ +
+ + +
+ GDI Logo +
+

Welcome to Girl Develop It

+
+ + +
+ GDI Logo +
+

We create welcoming, supportive and accessible environments for women and non-binary adults to learn software development.

+
+ + +
+

We are dedicated to providing a welcoming and comfortable environment for all to learn coding and every attendee is expected to uphold our Code of Conduct:

+

girldevelopit.com/codeofconduct/

+

bit.ly/gdi-incident-report

+
+ + +
+

What Does
Girl Develop It
Teach?

+
+ +
+

Web Development

+

Data Science

+

UX Design & Research

+

Workforce Classes

+

Career-Building Events & Conferences

+
+ + +
+ GDI Logo +
+

Find All Our Classes & Events:

+

www.girldevelopit.com

+
+ + +
+ GDI Logo +
+

Upcoming Class:

+

Web Design Essentials 1

+
+ + + +
+

Housekeeping

+
    +
  • Display your preferred name and pronoun.
    • +
  • We are here for you!
    • +
  • Every question is important.
    • +
  • Participate, Experiment, Have Fun!
    • +
+
+ + +
+

Intro to HTML & CSS

+
+ + +
+

Instructor Intro

+

Anne S. Katzeff

+

Web Designer, Artist, Teacher
+ ASK Design

+
    +
  • 20+ years in print design
    • +
  • 10+ years in web design
    • +
  • 15+ years teaching
    • +
  • 15+ years painting
    • +
  • Webmaestro: 20+ websites
    • +
  • ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.
    • +
+ +
+ + +
+ +

TA Intro

+

Kimberly J. Suares

+

Full Stack Developer

+
+ + + + +
+

Welcome!

+
+

Tell us about yourself:

+
    +
  • Name?
    • +
  • Location?
    • +
+
+
+ +
+

Welcome!

+
+

Rate your experience with HTML & CSS:

+
    +
  1. - Absolute beginner
    2. +
  2. - Minimal experience (a few tutorials)
    3. +
  3. - Some experience (familiar with the basics)
    4. +
+
+
+ +
+

Welcome!

+

What do you hope to get out of this class?

+
+ +
+

Welcome!

+

Current favorite or binge TV show?

+
+ + +
+

Agenda

+

HTML

+

CSS

+

Q & A

+
+ + +
+

Course Goals

+
+
    +
  • Build a simple site using HTML and CSS.
    • +
  • Work with images, lists, links and basic styling.
    • +
  • Get resources, information about next steps.
    • +
+
+
+ + + + + +
+

HTML

+
+ + +
+

What is HTML?

+

HTML stands for Hyper Text Markup Language.

+
+ +
+

What is HTML?

+

HTML is the language that allows us to build websites.

+ Screenshot of the Girl Develop It Homepage +
+ +
+

A Very, Very Quick History of HTML

+
    +
  • Invented by Tim Berners-Lee
    • +
  • Created "hypertext" to share scientific papers
    • +
  • First web page built: August 6, 1991
    • +
  • Standardized by w3 Consortium
    • +
+
+ +
+

What is HTML?

+

HTML is composed of HTML tags that together provide a blueprint for a webpage.

+ Screenshot of the Girl Develop It Homepage +
+ +
+

What is HTML?

+

"Under the hood" of a website:

+ Screenshot of the Girl Develop It page source code +
+ + +
+

Anatomy of a website

+
+

Content (Text + Media)

+

+ HTML(Structure + Semantics)

+

+ CSS (Presentation + Design)

+

+ JavaScript (Interactivity)

+

= Website

+
+
+ +
+

Anatomy of a website

+
    +
  • A paragraph is your content.
    • +
  • Putting your content into an HTML tag to make it look like a paragraph is structure. +
    <p>A paragraph is your content</p>
+
    +
    • +
+
+ +
+

Anatomy of a website

+
    +
  • Making the font of your paragraph green and smaller is presentation. +

    This paragraph has been styled with CSS.

    +
    • +
+
+ + +
+

Basic Tools

+

Browsers:

+
    +
  • Chrome
    • +
  • FireFox
    • +
  • Safari
    • +
+
+ +
+

Basic Tools

+

Code or Text Editors:

+
    +
  • Visual Studio Code
    • +
  • Atom
    • +
  • Sublime Text
    • +
+
+ +
+

Basic Tools

+

Online Code Editors:

+
    +
  • REPL.it
    • +
  • Codepen.io
    • +
  • Codesandbox.io
    • +
+
+ + +
+

Let's Develop It!

+
+ + +
+

Get Started: REPL.it

+
    +
  • Create a free account on REPL.it.
    • +
  • Or an online editor of your choice.
    • +
+
+ + +
+

REPL.it Demo

+
+ + +
+

Anatomy of an HTML element

+

HTML pages are made up of elements.

+

Element

+
    +
  • An individual component of HTML.
    • +
  • Paragraph, heading, table, list, div, link, image, etc.
    • +
+
<p>This is a sample paragraph.</p>
+
+ +
+

Anatomy of an HTML element

+

Tag

+
    +
  • Marks the beginning & end of an element.
    • +
  • Tags contain characters that indicate the tag's purpose.
    • +
+
<tagname>Content</tagname>
+
<p>This is a sample paragraph.</p>
+
+ + +
+

Tag Breakdown

+ Tag breakdown
+
+

List of HTML Elements (MDN)

+
+ + +
+

Doctype

+

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

+
 <!DOCTYPE html>
+

* The doctype is case-insensitive.

DOCtype, doctype, DocType and DoCtYpe are all valid.

+
+ + +
+

HTML Tag

+

After <doctype>, the page content must be contained between <html> tags.

+
<!DOCTYPE html>
+<html>
+
+</html>
+
+
+ + +
+

Head and Body Tags

+

head: Information about the page, such as its title.

+ 
<!DOCTYPE html>
+  <html>
+   <head>
+    <title>The title of the page</title>
+   </head>
+  </html>
+
+
+ + +
+

Head and Body Tags

+

body: The actual content of the page, what shows up in the browser window.

+ 
<!DOCTYPE html>
+  <html>
+   <head>
+    <title>The title of the page</title>
+   </head>
+   <body>
+    The exciting content.
+   </body>
+  </html>
+
+
+ + +
+

Meta Tags

+

It's best practice to include meta tags that tell the browser the charset (character encoding) and
+ viewport (visible area of web page).

+
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Title of the page </title>
+ </head>
+</html>
+
+
+ + +
+

Nesting & Indentation

+

Elements "nest" inside the tag that contains them.

+

What elements are nested here?

+
<html>
+ <head>
+  <title>Title of the page</title>
+ </head>
+ <body>
+  <p>A paragraph inside the body tag</p>
+ </body>
+</html>
+
+

Notice: Whichever element opens first, closes last.

+
+ + +
+

Headings

+ Example of headings +
+ +
+

Element: Heading

+
+
+
+
<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+
+

* Heading number indicates hierarchy, not size.
Think of outlines from high school papers.

+
+ + +
+

Let's Develop It!

+

A basic page about your favorite television show.

+
    +
  1. Include an h1 header.
    2. +
  2. Add additional headings for potential sections of your page.
    3. +
+

*IMPORTANT: A page can contain only ONE h1 tag.

+
+ + +
+

Paragraphs

+

Paragraphs allow you to format your content in a readable fashion.

+ Example of Paragraphs in the wild +

* You can edit how paragraphs are displayed with CSS.

+
+ +
+

Element: Paragraph

+
+
+
<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+<p>Paragraph 3</p>
+
+
<p>Paragraph 1</p> <p>Paragraph 2</p>
+
+
<p>Paragraph 1</p>
+
+<p>Paragraph 2</p>
+<p>Paragraph 3</p>
+
+
+
+

Paragraph 1

+

Paragraph 2

+

Paragraph 3

+
+

* White space in your editor is only for humans. You can write your code with any spacing. But it's better to write code in a formatted structure or use a linter to clean up formatting issues.

+
+
+
+ + +
+

Formatted Text

+
+
<p>This paragraph has <em>emphasized</em> text 
+and <strong>important</strong> text.</p>
+
+

This paragraph has emphasized text and important text.

+
+

* em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.

+
+ + +
+

Let's Develop It!

+

Add on to the page for your favorite television show.

+
    +
  1. Text! You can either copy and paste from a Wikipedia article, or generate text from an Ipsum like Hipster Ipsum.
    2. +
  2. Add paragraph tags to break up your text into at least 2 paragraphs.
    3. +
  3. Add formatting tags to emphasize "important" words.
    4. +
+
+ + +
+

Element: Line Break

+
+
+
<p>
+Imagine there's no Heaven<br/>It's
+easy if you try <br/>No hell below
+us <br/>Above us only sky
+</p>
+
+
+
+

Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky

+
+
+
+ + +
+

Self Closing Tags

+ These elements don't need a closing tag:
+
<br/>
+<hr/>
+<img/>
+<link/>
+<input/>
+
+
+ + +
+

Let's Develop It!

+

Add a break tag or a horizontal rule to your code.

+
+ + +
+

Lists

+

Lists can be used to organize any list of items.

+ +

You'd be surprised how often lists are used in web design.

+
+ +
+

Unordered and ordered lists

+
+
+
<ul>
+ <li>List Item</li>
+ <li>Another List Item</li>
+</ul>
+
+
+
+
    +
  • List Item
    • +
  • Another List Item
    • +
+
+
+ +
+
+
<ol>
+ <li>List Item</li>
+ <li>Another List Item</li>
+</ol>
+
+
+
+
    +
  1. List Item
    2. +
  2. Another List Item
    3. +
+
+
+
+ + +
+

Let's Develop It!

+
    +
  1. Add an unordered list of characters from your favorite show to your code.
    2. +
  2. Add an ordered list of seasons or episodes to your code.
    3. +
  3. EXTRA CHALLENGE: +
      +
    • Nest an ordered list in an unordered list
      • +
    +
    4. +
+
+ + +
+

Element Details: Attributes

+
    +
  • Attributes describe additional characteristics of an HTML element
    • +
  • An attribute has 2 parts: Name & Value.
    • +
+
+
<tagname name="value">content</tagname>
+

*Values should be contained inside quotation marks.

+
+ + +
+

Images

+

To make an image, you need 3 parts:

+
    +
  • An image tag: <img />
    • +
  • A src attribute: the location and name of the image file
    • +
  • An alt attribute: a brief description of the image content
    • +
+
+ +
+

Images

+
+
+
<img src="img/example-gdi-logo.png"
+alt="Girl Develop It logo"/>
+
+
+
+ Girl Develop It logo +
+
+ +
+
+
<img src="img/blinkylights.gif"
+alt=""/>
+
+
+
+ +
+
+
+ + +
+

Let's Develop It!

+
    +
  1. Using the img tag, add an image of your TV show to your page. +
      +
    • Tip: Do an online search; copy an image link from the web.
      • +
    +
    2. +
  2. Include an ALT attribute in the img tag.
    3. +
+
+ + +
+

Links

+

To make a link, you need 3 parts:

+
    +
  • An anchor tag: <a></a>
    • +
  • An href attribute: the web address to where the link points
    • +
  • content: text or images between the tags that become the clickable link.
    • +
+
<a href="http://www.girldevelopit.com">Girl Develop It</a>
+
+

produces:
+ Girl Develop It +

+
+ + + +
+

Link Targets

+

An optional target attribute tells the browser to open the link in a new tab.

+
<a href="http://www.girldevelopit.com" target="_blank">Girl Develop It</a>
+

Opens the GDI site in a new tab:
+ Girl Develop It +

+
+ + +
+

Let's Develop It!

+

Add 2 or more links about your show that open up in a new tab.

+
+
+ + +
+

Comments

+

You can add comments to your code that will not be displayed by the browser, but only visible when viewing the code.

+
<!-- Comment goes here -->
+
+
+ +
+

Comments

+

Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.

+
<!-- Beginning of header -->
+<div id="header">Header Content</div>
+<!-- End of header -->
+
+<!--
+<ol>
+<li>List Item</li>
+<li>Another List Item</li>
+</ol>
+-->
+
+
+ + +
+

Break - 10 Minutes

+
+ + +
+

CSS

+
+ +
+

CSS: What is it?

+

CSS = Cascading Style Sheets

+

CSS is a "style sheet language" that lets you style the elements on your page.

+

CSS is works in conjunction with HTML, but is not HTML itself.

+
+ +
+

CSS: What can it do?

+

All colored text, position, and size

+ Screenshot of homepage +
+ + +
+

Anatomy of CSS

+

CSS consists of style rules.

+

Each style rule consists of a selector and declarations of property-value pairs: +

+
selector {
+  property: value;
+  property: value;
+}
+
+ +
+

Syntax

+
selector {
+  property: value;
+  property: value;
+}
+

Example:

+
body {
+  color: yellow;
+  background-color: black;
+}
+
+ + +
+

Connecting CSS to HTML

+

3 Ways:

+

Inline

+

Embedded

+

External

+
+ + +
+

Connecting CSS to HTML: Inline


+
<p style="color:red">Some text.</p>
+
+
    +
  • Uses the HTML style attribute.
    • +
  • Only applies to one element at a time.
    • +
  • Not preferred.
    • +
+
+ + +
+

Connecting CSS to HTML: Embedded

+
<head>
+  <style>
+    p {
+      color: blue;
+      font-size: 12px;
+    }
+  </style>
+</head>
+
+
    +
  • Inside <head> element.
    • +
  • Uses <style> tag.
    • +
  • Only applies to that page.
    • +
+
+ + +
+

Connecting CSS to HTML: External

+
<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+

+
    +
  • Can be referenced from multiple pages.
    • +
  • Reduced file size & bandwidth.
    • +
  • Easier to maintain in larger projects.
    • +
  • This is the best practice!
    • +
+
+ + +
+

Let's Develop It!

+

Embedded CSS:

+
    +
  1. In the head tag of your index.html file, beneath the title tag, add an opening and closing style tag.
    2. +
  2. Add / nest the CSS rule below in the style tag:
    3. + +
    body {
+  background-color: turquoise;
+}
+
    +
  3. Check your page and see what happens.
    4. +
+
+ + +
+

CSS: The Selector

+
selector {
+  property: value;
+  property: value;
+}
+

+ The selector is used to select which elements in the HTML page will be given the styles inside the curly braces. +

+
+ +
+

Types of Selectors: Element

+
p {
+property: value;
+}
+
+

Selects all paragraph elements.


+
img {
+property: value;
+}
+
+

Selects all image elements.

+
+ + +
+

CSS Properties

+
    +
  • 200? 300? 500?
    • +
  • You're not expected to know them all!
    • +
  • Focus on the commonly used ones
    • +
  • Be okay looking things up!
    • +
  • Note: CSS properties are case-sensitive
    • +
+
+

Common CSS properties (MDN)

+

All standard CSS properties (MDN)

+
+ + +
+

Property: color

+

The color property changes the color of the text.

+
p {
+  color: red;
+}
+
+
+ + +
+

Property: background-color

+

The background-color property changes the color of the background.

+
body {
+  background-color: hotpink;
+}
+
+
+ + +
+

CSS Color Values

+

Your browser can accept colors in many different ways:

+ + + + + + + + + + + + + + +
Color name: red
Hexadecimal value: #FF0000
RGB value: rgb(255, 0, 0)
+
+

W3Schools Color Picker

+

CSS Color Names

+
+ + +
+

Let's Develop It!

+

Colors!

+
    +
  1. Change the background color of your site. Use a color name, hexcode or RGB value
    2. +
  2. Change the font color of one or all of your heading.
    3. +
+ + +
+

Property: font-size

+

The font-size property specifies the size of font.

+
body {
+  font-size: 12px;
+  font-size: 1.5em;
+  font-size: 100%;
+}
+
+
+ +
+

Font-size units:

+
    +
  • Pixels - "px"
    • +
  • "rem" or "em"
    • +
  • Percentage - %
    • +
  • xx-small, medium, large, x-large, etc
    • +
+
+

font-size property (MDN)

+
+ + +
+

Property: font-family

+

The font-family property defines which font is used.

+
p {
+  font-family: "Times New Roman"; /* Specific font name */
+  /* or */
+  font-family: serif; /* Generic name */
+  /* or */
+  font-family: "Arial", sans-serif; /* Comma-separated list */
+}
+
+

*When listing multiple fonts, always list a generic name last.

+

Web Safe Fonts (W3 School)

+

Google Fonts

+
+ + +
+

Let's Develop It!

+

Typography

+
    +
  1. Change the font-size of your h1 element. Use the px unit.
    2. +
  2. Change the font-size of other elements on your page (headings or paragraphs).
    3. +
  3. Give your headings and/or paragraphs a different font type.
    4. +
+
+ + +
+

Let's Develop It!: Extra Tips

+
    +
  • Centering your entire page
    • +
  • (Re)Sizing your images
    • +
  • Checking for responsiveness (Using Dev Tools)
    • +
+
+ + +
+

You did it!

+ Happy woman jumping +

+ Photo credit: + Hannah Busing + cc + +

+
+ + +
+

Share What You've Built!

+
+ + + +
+

Give Us Your Feedback

+

Survey Link

+
+ + +
+

Q&A

+
+ + +
+

External Resources

+

Free Code Camp

+

Codecademy

+

CSS Tricks

+

Udemy

+
+ + + + + + +
+

Keep in Touch

+

Instructor: LinkedIn, Github

+

TAs: LinkedIn, Github

+
+ + +
+ GDI Logo +
+

Thank You!

+
+
+ +
+ +
+ GDI Logo +

Intro. to HTML & CSS

+ Creative Commons License +
+
+
+ + + + + + + + + diff --git a/web-design-1/intro-ask.html b/web-design-1/intro-ask.html index 9a88049..64e7308 100644 --- a/web-design-1/intro-ask.html +++ b/web-design-1/intro-ask.html @@ -49,13 +49,14 @@

Introductions!

Anne Katzeff

Web Designer / Front-End Developer

    -
  • 20+ years in print design
    • -
  • 10+ years in web design
    • -
  • 15+ years teaching
    • -
  • 15+ years painting
    • -
  • Webmaestro: 20+ websites
    • -
  • ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.
    • +
  • 20+ years in print design
    • +
  • 10+ years in web design
    • +
  • 15+ years teaching
    • +
  • 15+ years painting
    • +
  • Webmaestro: 20+ websites
    • +
  • ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.
+ From 2552c4eca147118bbfc1a30899d0df501e0fec44 Mon Sep 17 00:00:00 2001 From: "Anne S. Katzeff" Date: Thu, 22 Sep 2022 15:30:37 -0400 Subject: [PATCH 3/8] Create README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Create README.md file --- web-design-1/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 web-design-1/README.md diff --git a/web-design-1/README.md b/web-design-1/README.md new file mode 100644 index 0000000..90bb169 --- /dev/null +++ b/web-design-1/README.md @@ -0,0 +1 @@ +# gdi-html-css \ No newline at end of file From e473e300d6ed322b8f89fe5a96751d4c6df2cd2d Mon Sep 17 00:00:00 2001 From: "Anne S. Katzeff" Date: Thu, 22 Sep 2022 15:37:58 -0400 Subject: [PATCH 4/8] Update README.md --- web-design-1/README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/web-design-1/README.md b/web-design-1/README.md index 90bb169..3916f51 100644 --- a/web-design-1/README.md +++ b/web-design-1/README.md @@ -1 +1,28 @@ -# gdi-html-css \ No newline at end of file +# gdi-html-css / web-design-1 + +

Course Information

+

This README file should contain course details, outline, guidelines, tips etc for instructors--essentially what instructors will need to run the course "out of the box".

+ +

(Course slides are hosted at: https://askdesign.github.io/gdi-html-css/web-design-1/)

+ +

Course Description

+

tk

+ +

Course Objectives

+

tk

+ +

Course Outline

+
  • tk
    • + +

    Suggested Exercises

    +
  • demo of all of the properties.
    • +
  • review the previous lesson.
    • +
  • code along on to a project to use outside of class.
    • + +

    Resources

    +
  • MDN Web Docs
    • +
  • CSS Tricks
    • +
  • Cupcake Ipsum
    • +
  • replit
    • + +

    FAQs-Notes-Tips

    From 4c2ed39e93c72e729e1e9381778dc24a7682144e Mon Sep 17 00:00:00 2001 From: "Anne S. Katzeff" Date: Fri, 23 Sep 2022 17:05:06 -0400 Subject: [PATCH 5/8] Class #3 slides correx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Class #3 slides correx • Slide 7 - s/b "Extensions" • Slide 15 - s/b "product-text product-container" --- web-design-1/class3.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-design-1/class3.html b/web-design-1/class3.html index b6762a4..3f1bcc0 100644 --- a/web-design-1/class3.html +++ b/web-design-1/class3.html @@ -90,7 +90,7 @@

    Download and Install

    Code Editor Demo

    Project Folder Setup

    -

    VS Code Extenstions

    +

    VS Code Extensions

    @@ -181,7 +181,7 @@

    Class Selector

    background-color: yellow; } -
    <p class="product-text product-bground">Some product detail.</p>
+
    <p class="product-text product-container">Some product detail.</p>
 
    
       
 

From f88bec1c1c175945aa471bfbe5124a1c5da45e02 Mon Sep 17 00:00:00 2001
From: "Anne S. Katzeff" 
Date: Tue, 27 Sep 2022 09:06:18 -0400
Subject: [PATCH 6/8] Update intro-ask
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Add TA (Tinu)
---
 web-design-1/intro-ask.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web-design-1/intro-ask.html b/web-design-1/intro-ask.html
index 64e7308..92b8c39 100644
--- a/web-design-1/intro-ask.html
+++ b/web-design-1/intro-ask.html
@@ -59,6 +59,13 @@ 
    Introductions!
    
 
       
 
+      
+      
    
+        
    Introductions!
    
+        
    Tinuola "Tinu" Awopetu
    
+        
    Software Engineer
    
+      
    
+
       
       
    
         
    Introductions!
    

From 43edf7931eb8fa3952f62b578ca276e7a6d752e2 Mon Sep 17 00:00:00 2001
From: "Anne S. Katzeff" 
Date: Tue, 27 Sep 2022 09:12:11 -0400
Subject: [PATCH 7/8] Update intro-ask
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Minor change in wording
---
 web-design-1/intro-ask.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-design-1/intro-ask.html b/web-design-1/intro-ask.html
index 92b8c39..b3ef4c2 100644
--- a/web-design-1/intro-ask.html
+++ b/web-design-1/intro-ask.html
@@ -45,7 +45,7 @@ 
    Web Design Essentials 1
    
 
       
       
    
-        
    Introductions!
    
+        
    Instructor Introductions!
    
         
    Anne Katzeff
    
         
    Web Designer / Front-End Developer
    
         
-			
    
-			
    
-				
    Questions about Transitions & Transforms?
    
-				
    Let's review...& practice!
    
-				
    
-				
    
-				
-			
    
-			
    
-				
    Questions about Transitions & Transforms?
    
-				
    Let's review...& practice!
    
-				
    
-				
    
-				
-			
    
-			
    
-				
    Intro to Animation & Keyframes
    
-			
    
-			
    
-				
    Animation vs Transitions
    
-				
    How is the animation property different from the transition property?
    
-					
      
-						
    • can run automatically, as well as be triggered by a user
      • 
-						
    • can loop infinitely
      • 
-						
    • for more complex movements
      • 
-						
    • we can change more than just the start & finished states.
      • 
-					
    
-					
-						mdn docs | CSS Animations
-					
-				
-				
-				
-			
    
-			
-			
    
-				
    Accessibility
    
-					
    we want everyone to have access to what we create for the web. 
    
-					
-					
-			
    
-			
    
-				
    Accessibility
    
-				
    prefers-reduced-motion is a media query used to detect if the user has settings that minimize non-essential motion. 
    
-				
-					 mdn docs | prefers-reduced-motion.
-				
-			
     
-			
    
-				
    Accessibility
    
-				
    prefers-reduce-motion example
    
-				
    -					
-.animation{
-
-	animation:pulse 1s linear infinite both;
-
-}
-
-@media(prefers-reduce-motion){
-	.animation{
-		animation-name:none;
-
-/*here is where you write the styling that you want to
- replace the animation with*/
-	}
-}
-		
-
-					
-				
    
-				
-				mdn docs | prefers-reduced-motion
-				
-				
    
-				
-					 CSS Tricks | Introduction to reduced motion media query
-					
-			
    
-			
-			
-			
    
-				
    prefers reduce motion in action
    
-				webkit.org
-				
    
-				
-				codepen.io | prefers-reduced-motion-demo
-				
-			
    
-			
    
-				
    Animation  has three required components
-				
-						
      
-							
    • animation-name 
      • 
-							
    • animation-duration
      • 
-							
    • keyframes
      • 
-						
    
-						
    -							
-div{
-	width:150px;
-	height:150px;
-	background-color: #fe6437;
-	animation-name:whatever;
-	animation-duration:3s;
-}
-							
-						
    
-					animation-demo | codepen.io
-					
-			
    
-			
    
-				
    @keyframes
    
-				
    defines the start and finish of the animation
    
-				
    ...and the steps in between
    
-				
-				mdn docs | @keyframes
-				
-
-			
    
-			
    
-				
    @keyframe keywords
    
-					
    keywords we use to determine the steps in the @keyframe
    
-						
      
-							
    • from & to
      • 
-							
    • percentages
      • 
-							
    • px
      • 
-					
-						
    
-						
    -							
-@keyframes whatever{
-	0% { transform: translateX(0);}
-	10%{transform:translateX(100px);}
-	100% {transform: translate(500px, 400px);}
-	}
-							
-						
    
-			
    
-			
    
-				
    Practice
    
-				
    Let's see the different ways we can write @keyframes
    
-				
-				codepen.io | keyframes in action
-				
-
-			
    
-			
    
-				
-					
    Let's Develop It!
    
-					
    changing a background animation
    
-					codepen.io | changing background colors
-			
-			
    
-			
    
-				
    additional animation properties
    
-					
      
-						
    • animation-timing-function
      • 
-						
    • animation-delay
      • 
-						
    • animation-iteration-count
      • 
-						
    • animation-direction
      • 
-						
    • animation-fill-mode
      • 
-						
    • animation-play-state
      • 
-					
    
-					
    
-					
    
-					
-						mdn docs | animation properties
-					
-					
-			
    
-			
    
-				
-
-				
-					
    animation-timing-function
    
-					
    sets how an animation progresses through the duration of each cycle.
    
-
-					
    -						
-
-animation-timing-function:ease-in;
-
-						
-					
    
-					mdn docs | animation-timing-function
-					
    
-					
-						Animation-timing-function | Codepen.io
-					
-			
    
-			
    
-				
-				
    animation-delay
    
-				
    sets the amount of time to wait before applying the animation to the element. 
    
-
-				
    -					
-
-animation-delay:2s;
-
-					
-				
    
-				mdn docs | animation-delay
-				
    
-				
-					Animation-delay | Codepen.io
-				
-		
    
-		
    
-				
-				
    animation-iteration-count
    
-				
    sets how an animation progresses through the duration of each cycle.
    
-				
    basically you can control the function from going back to its start. 
    
-
-				
    -					
-
-animation-fill-mode: forwards;
-
-
-					
-				
    
-				mdn docs | animation-fill-mode
-				
    
-				
-					Animation-timing-function | Codepen.io
-				
-		
    
-	
-		
    
-	
-			
    animation-direction
    
-			
    declares whether an animation should play forwards, backwards, or alternate back & and forth.
    
-
-			
    -				
-
-animation-direction:alternate;
-
-
-		
-	
    
-		mdn docs | animation-direction
-		
    
-		
-		animation-direction | Codepen.io
-		
-	
    
-	
-
-
-	
    
-		
    animation-play-state
    
-		
    sets whether an animation is running or paused.
    
-
-		
    -			
-
-animation-play-state:paused;
-
-
-			
-		
    		
-		mdn docs | animation-play-state
-		
-	
    
-	
    
-		
    animation shorthand
    
-		
    -			
-div {
-animation: |animation-name|animation-duration| animation-timing-function| animation-delay| animation-iteration-count | animation-direction | animation-fill-mode| animation-play-state;
-}
-
-			
-		
    
-		
-			animation-shorthand | codepen.io
-		
-		
    
-		
    
-			
    Let's Develop It! 
    
-			
-			
    
-			codepen.io | animation code along	
-			
    
-		
-		
    
-		
-	
-	
    
-		
    Clip-path
    
-		
    clip-path  is a property that lets us decide what parts of an element should be shown
    
-		
    we do this with shapes we create out of points on our page.
    
-		
-			mdn docs | clip-path
-		
-	
    
-		
-	
-	    
-
    - - - - -
    -

    Clip-path

    -

    we don't have to figure out the coordinates ourselves

    -

    we have Clippy

    - 
    -					
-.element {
-	transition:all 0.5s;
- 	clip-path: circle(9.4% at 81% 16%); 
-}
-					
-
    - -
    -
    -

    Clip-path-practice

    -

    here is a short exercise to get you started with the clip-path

    - - codepen.io | clip-path code along - -
    - -

    a source I like to use for lorem ipsum

    - cupcakeipsum -     - -
    - -
    -

    Further Research

    -

    here are some of my favorite sources for CSS Animations

    - -
    -
    -

    Resources for projects

    - - -
    -
    -

    What's next?

    - - - -
    - -
    -

    You did it!

    - People celebrating -

    - Photo credit: - Hannah Busing - cc - -

    - -
    - - -
    -

    (Optional Slide)

    -

    Share What You've Built!

    -
    - - - -
    -

    -

    Give Us Your Feedback

    -

    Survey Link

    -
    - - -
    -

    Q&A

    -
    - - - - -
    - -

    New GDI Courses

    - -
    - - - - -
    - GDI Logo -
    -

    Thank You!

    -
    -
    - -
    - -
    - GDI Logo -

    Intro to CSS Animation

    - Creative Commons License -
    -
    - - - - - - - - - - diff --git a/intro-css-animation/demo-gdi-slides.html b/intro-css-animation/demo-gdi-slides.html deleted file mode 100644 index 929397b..0000000 --- a/intro-css-animation/demo-gdi-slides.html +++ /dev/null @@ -1,321 +0,0 @@ - - - - - - - - - - - GDI Demo Slides Template - - - - - - - - - - - - - - - - - -
    - -
    - - -
    - GDI Logo -
    - - -
    -

    GDI Demo HTML Presentation Slides

    -

    Based on Reveal.js

    - -
    - - -
    -

    Intro

    -
      -
    • Reveal.js is a framework for easily creating beautiful, animated HTML slide presentations.
      • -
    • The following slides illustrate how to present GDI content with reveal.js.
      • -
    • Copy code snippets from this demo file as needed to create GDI HTML slides.
      • -
    -
    - - -
    -

    Heading h1

    -

    Heading h2

    -

    Heading h3

    -

    Heading h4

    -
    - - -
    -

    Nested Content

    -

    Content

    -

    More content...

    -

    Even more content...

    -

    Content yet again...

    -

    And we're done.

    -
    - - -
    -

    Fragments

    -
    -

    Reveal contents in...

    -
    -
    -

    fragments:

    -
    - One - at - a - time. -
    - - -
    -

    Want to Lean Left?

    -

    Enough centered text!

    -
    - - -
    -

    Marvelous Unordered List

    -
      -
    • No order here
      • -
    • Or here
      • -
    • Or here
      • -
    -
    - - -
    -

    Fantastic Ordered List

    -
      -
    1. One is smaller than...
      2. -
    2. Two is smaller than...
      3. -
    3. Three!
      4. -
    -
    - - -
    -

    Images

    - -

    Remember to give credit.

    -

    - Photo credit: - Dayne Topkin - cc - -

    -
    - - -
    -

    Image and Text

    -
    -
    - -
    -
    -

    Some content to the left...

    -

    Or to reverse order, just switch the code snippets.

    -
    -
    -
    - - -
    -

    Add a background Image

    -
    - - -
    -

    Change Background Colors

    -

    Use GDI Brand Colors.

    -
    - - -
    -

    Animated Images/GIFs

    - -
    - - -
    -

    Embed Video

    - -

    The next slide shows adding video as a background.

    -
    - - -
    -
    - - -
    -

    Tables

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    Data typeExample values
    Integers2 44 -3
    Floats3.14 4.5 -2.0
    BooleansTrue False
    Strings'¡hola!' 'its python time!'
    -
    - - -
    -

    Slides with Code: Python

    - 
    -						
-def add_numbers_between(start, end):
-  sum = 0
-  for n in range(start, end):
-	  sum += n
-	return n
-
-add_numbers_between(5, 10)
-						
-
    -

    Tip: Click the document icon in the upper right of the code box to copy the code.

    -
    - - -
    -

    Slides with Code: HTML

    - 
    -            
-
    Hello World.
    
-                
-
    -
    - - -
    -

    Slides with Code: CSS

    - 
    -						
-body {
-  background-color: #ffffff;
-}
-						
-
    -
    - - -
    -

    Slides with Code: JavaScript

    - 
    -            
-function helloWorld(){
-  let name = 'GDI';
-  alert("Hi, " + name)
-}
-            
-
    -
    - - -
    -

    Editable Slides with Code

    -

    Try editing the code!

    - 
    -            
-function helloWorld(){
-  let name = 'GDI';
-  alert("Hi, " + name);
-} 
-            
-
    -
    - - -
    -

    These are the common use cases of reveal.js features for GDI slide content.

    -

    Interested in more ways to use reveal.js? Visit the framework's website for a full demo.

    -
    - -
    - -
    - -
    - GDI Logo -

    Intro to CSS Animations/p> - Creative Commons License -

    -
    - -
    - - - - - - - - - - diff --git a/intro-css-animation/index.html b/intro-css-animation/index.html deleted file mode 100644 index ffa0de8..0000000 --- a/intro-css-animation/index.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - - - - - Intro to CSS Animation - - - - - - - - - - - - - - - -
    - -
    - - -
    - GDI Logo -
    -

    Intro to CSS Animation

    -
    - -
    -

    Intro to CSS Animation

    -

    Class Slides

    -
    - Class 1 - Class 2 - - -
    -
    -
    - -
    - -
    - GDI Logo -

    Intro to CSS Animation

    - Creative Commons License -
    -
    -
    - - - - - - - - - diff --git a/web-design-1/.DS_Store b/web-design-1/.DS_Store index ffd52cdcd602bd6fbb58b48f4e99aa51a0205b9d..91866276306fdc589ce84102b201977dd4fe0911 100644 GIT binary patch delta 133 zcmZoMXfc@JFUrcmz`)4BAi%&-!cd%2oSc)CpPw^%A>(o>kPI6`B116{rXtHSPUc~h zW$xSAK3RuRhP`BNlW$bsk;(pyvg%N_Bf8Fl48!2${M-VdI0M6k4VxD-Mzd{Z=lIJH E02zfOtN;K2 delta 133 zcmZoMXfc@JFUrEez`)4BAi%&-!cd%(ZWx@LpIb0_Bja)xkPI6`B116{rXtG%#Tghn zXB4B$=jOY(B<18M0mV7A)p<`yRUMw3!6?fPWA`x1F?A diff --git a/web-design-2/.DS_Store b/web-design-2/.DS_Store index 98cc1a8d1a6b53476cc08ea97f11028f483107de..959ee42c08f0c0c8185bb5e14085ed05ab4611c2 100644 GIT binary patch delta 205 zcmZoMXfc@JFUrcmz`)4BAi%&-!cd%2oSc)CpPw^%BIELUkPI6`B116{rXtG%#Ze`4 z(hY-?^K%P85)9hgC!@>f=DWBg<>V&;#W`vn+I^$)jyPhfNkLVkghf$729ia(2Ad}` MMzd{Z=lIJH0H4M&wg3PC delta 173 zcmZoMXfc@JFU-Qgz`)4BAi%&-oRe-CoSdIqFnJ^6%6gDED?=JXK0_Wu2|^Ai%D^Bu z(HT`XH{Zo2DJMS(D9W+SOY*$v`NNLrDpCljD9C`=4%ElMAkUbvc_U*O+r$R7&Fmb1 F`2hhqD-{3$ diff --git a/web-design-2/assets/.DS_Store b/web-design-2/assets/.DS_Store index 630155380cc7aadd6758da01ab453b625569b752..a12ea2e69d4adb370d0769a6d632cd400aeb7fdf 100644 GIT binary patch delta 249 zcmZoMXfc@J&&k8Uz`)4BAi%IOWSN0Hn`07* NnOM-enVsV=KLCv#D7gRt