Web Design Essentials 1

Class 1

AGENDA

  • Introduction - Websites, Web Design
  • Setting up our coding environment (Part 1)
  • HTML, HTML Elements & Tags
    • Headings, Paragraphs, Lists, Images, Links
  • Class Feedback and Q&A

Stretch - "Bio" Break

8:00p EST / 7:00p CST / 5:00p PST

Introduction

What is a website?

What is web design?

Anatomy of a Website

Content (Text + Media)

+ HTML (Structure + Semantics)

+ CSS (Presentation + Design)

+ JavaScript (Interactivity)

= Website

Terms to Know

  • Websites: Static pages that usually provide one-way information
  • Web Applications: Websites with additional functionality and interactive/dynamic elements

Terms to Know

  • Web Design: The process of planning, structuring and creating a website
  • Web Development: The process of building dynamic web applications

Terms to Know

  • Client-side or Frontend: Aspects of a website, web application or interface that a user sees or engages with
  • Server-side or Backend: Where data and source code is stored; where the "client-side" sends a request to and receives a response from

Our Tools

Tools

Web Browsers such as:

  • Chrome
  • FireFox
  • Safari

Tools

Code & Text Editors such as:

  • Visual Studio Code
  • Atom
  • Sublime Text

Tools

Online Code Editors such as:

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

Additional Tools

Browser Developer Tools

Version Control: Github, BitBucket

Command Line (aka Terminal)

JavaScript and CSS Frameworks/Libraries

Our Code Environment

REPL.it

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

HTML, HTML Elements & Tags

What is HTML?

HTML stands for HyperText Markup Language.

What is HTML?

HTML is the language that allows us to build websites.

Screenshot of the Girl Develop It Homepage

What is HTML?

HTML is composed of HTML elements and tags that provide the blueprint for a webpage.

What is HTML?

Sample HTML code

What is HTML?

"Under the hood" of a website:

Screenshot of the Girl Develop It page source code

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 an HTML Element

  • Element
  • Tag
    • Marks the beginning & end of an element
    • Opens and closes (Usually...)
    • Tags contain characters that indicate a tag/element's purpose 
<tagname>Content</tagname>
<p>This is a sample paragraph.</p>

Tag Breakdown

Tag breakdown

Doctype

The first element on an HTML page is the doctype, which tells the browser what language to use to read and display the page.

 <!DOCTYPE html>

HTML Tag

After <doctype>, the rest of the page elements must be contained between a pair of root <html> tags.

<!DOCTYPE html>
<html>

</html>

HTML Tag

The <html> tag holds two children tags:

the <head> and <body> tags

<!DOCTYPE html>
<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Head Tag

  • The head tag contains information about the page and this information is primarily for the browser.
<!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>

Head Tag

  • With the exception of the page title, content in the head tag is not visible on a rendered page to users.
  • An HTML page can only contain one head tag.
<!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>

Meta Tags

The meta tag is used to define metadata for an HTML document and can also give additional instruction to the browser about how to display a 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>

Title and Link Tags

Two other tags found in the head tag are:

  • link: Links a page to internal or external resources such as stylesheets, fonts and more
  • title: Defines the title of a page, which is then displayed on the browser title bar
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Title of the page </title>
  </head>
</html>

Body Tag

  • The body tag holds all of a page's content. Information here is what will be visible to users
  • An HTML page can only contain one body tag
<!DOCTYPE html>
<html>
  <head>
  ...
  </head>
  <body>
    <p>This is body content which can
    be text, images, links, video, etc.</p>
  </body>
</html>

Goodbye Slides!

Class Feedback

https://forms.gle/MzMndG5s52a2HiB77

Q&A

GDI Logo

Thank You!