Skip to content

Latest commit

 

History

History
 
 

class-01

README.md

Front-end Web: Class 1

Assess your current knowledge of HTML and CSS

Class Competence

Students will:

  • Assess their current knowledge of HTML and CSS
  • Identify: opening and closing tags and their attributes
  • Use and memorize basic HTML syntax
  • Envision the function of each HTML, CSS, and JS
  • Investigate and identify HTML tags
Time Type Description
1 5 min TT Intro, HTML, CSS, and JS
2 10 min Quiz Diagnostic Quiz
3 10 min Pair Pair up and research each question you missed
4 5 min I do, we do Quick intro to basic HTML syntax, tags, and boilerplate markup
5 15 min Pair With a partner research the tag list and markup the example
6 10 min Group Discuss what tags you found that were applicable to the example
7 10 min break
8 5 min TT Domains and Hosting
9 20 min I do, we do Semantic HTML the concept
10 20 min Solo Make a web page

1 - Intro HTML, CSS, JS

2 - Quiz

https://b.socrative.com/login/student/ room: L8RR2UUP3

3 - Pair lookup quiz questions you missed

4 - HTML Syntax and boilerplate code.

  • Case doesn’t matter, you should always use lowercase and
  • The DOM
    • Children/Child
    • Descendants/Ancestor
    • Parent
  • Tags
    • Opening and closing
    • Some tags don’t close
    • No overlapping tags!
  • Boilerplate HTML: index.html
  • Attributes, values always quoted

Markup markup: example 1

We markup: example 2

5 - Pair up

With a partner look at the tag list here: http://htmldog.com/references/html/tags/ Markup the example-4 text using the tags that you think are most appropriate.

6 - Discussion

Discuss tags you found in the list and how you think they could be used. What does HTML markup add to a document?

7 - Break

8 - Domains and hosting

Domain name hosting:

Web hosting:

9 - Semantic HTML

Tags add context and meaning to content on the page. The golden rule is always choose the tag that describes the content best. Understand that sometimes there will be more than one tag, or no tags at all that seem to fit. In these situations use your best judgement.

What about tags like: <sarcasm>, <humor>. When we talk about CSS you will find that CSS provides aural styles. Imagine now that the computer can understand and express sarcasm. Whoa, that’s powerful.

More subtly tags like: <b> and <strong>, <i> and <em> seem to be doing the same but, from a semantic point of view provide a totally different meaning. The <b> and <i> both describe typographic styles, while <strong> and <em> describe a mode or voice, these tags are about communication, and are always more appropriate.

The <img> also provides some interesting perspective. If an image is part of the content of the page the <img> tag is appropriate. Any images that might be part of the design of the page should be applied to the page via CSS.

Markup this example

Here is another example, study the tag list and apply as many tags as you can. Example 4

10 - Make a web page

We will continue to work on and add features to the pages you create. As of today the page will provide little design, you will be adding more as class progresses. Be sure to complete at least one of the following:

  • Make a web page for the app you created at Summer Academy
    • Here is an example of an app I created Example 3
  • Make a web page for yourself.
    • Imagine making a web site for yourself to host links to your work.
  • Markup Stranger Things Example 5
    • Markup this portion of the screenplay for the TV series "Stranger Things". The challenge here is HTML doesn't provide tags specifically designed for screenplays. In this case you want to use your judgement and choose tags that make sense. You can also use generic tags like div and span assigning class names to add context. For example you can create class names like: screen-direction, and audio-cues.

Projects and Challenges

These projects and challenges generate simple marked up content. Do not worry about the appearance we will cover that in the next class. You must have some web pages to continue with the CSS examples next week.

You can choose to work on as many or as few of these projects as you like. Be sure to complete the plan for your personal web site, and one of the HTML markup challenges.

You do not need a web host or a domain if you don’t plan on posting your work to the web. If you want your work available on the web to share, you will need a host and a domain name.

  • Make a web page for an app you created
    • Start with a rough sketch of your web page
    • Write the content as text
    • Add markup (ignore styles for now)
  • Plan your personal web portfolio
    • Draw some rough sketches that describe the site
    • Write an outline and description of your web site
    • Write some content that will mock up one or more pages of the site
    • Markup your mock up pages
    • Draw a flowchart describing how the content will connect
  • Build a website related to your product domain
    • Start with some rough sketches of the site you envision building
    • Write content and collect assets
    • Markup your content
  • Challenge: Register a Domain Name
    • Acquire a web host plan
    • Set the domain name server for your web host
    • Upload one or more of your project pages to your web host
  • Challenge: Create a design for your web site

Resources