Explore

Web Application Development MADS 4007

Sept 3 to Sept 20

MADS4007_Summer_2024-Intro to Web Technologies : A1, A2, Project, Final Exam

Day 01 : Tuesday September 3

⁠

https://www.dropbox.com/scl/fi/yjn0v2ip97ddap0obmqp7/Markup-Languages-Front-End-Web-Technologies-HTML-CSS-JavaScript.docx.pptx?rlkey=jhqmihk4n60jhlwlwybpfb0fj&st=dm3vx8y5&dl=0⁠

⁠

Session 1 Peter Sigurdson

Introduction to Web Applications Software installation (Visual Studio Code with Live Server Extension)

How to create a new web project (creating a folder and adding an index.html page) Boilerplate code for a webpage (html, head, body)

Introduction to HTML

— Semantec HTML

— Structural HTML

What can we do on an HTML Document:

OUTPUT / Rendering text (p, heading tags)

Form Fields : Allow user to INPUT Text

CONTROLS

Adding links: a href to create HYPERLINKS

Adding images, Multimedia (video, sound, maps, geospatial)

Inserting lists (ol, ul)

Inserting tables (table, tr, td)

A catalog of HTML node elements:

⁠

https://claude.site/artifacts/3cd3a4f9-7880-43ef-a9aa-f0b24f4dd67b⁠

Class Exercises:

⁠

https://coda.io/@peter-sigurdson/project-interstellar-travel-adventures-website-structure⁠

⁠

# HTML Development Skills Inventory:

Day 1 Checklist

## Understanding Web Applications

- [ ] Understand that web applications consist of HTML, markup, and code - [ ] Recognize HTML as a page description language for rendering text and media - [ ] Understand the two main components of a web application: - [ ] HTML document (Document Object Model) - [ ] Web server (e.g., Live Server in Visual Studio Code) - [ ] Understand the dual functions of a web browser: - [ ] Sending URL requests to a server - [ ] Rendering HTML code received from the server

## HTML Basics

- [ ] Differentiate between structural HTML and semantic (content-presenting) HTML - [ ] Identify structural HTML tags (e.g., `<section>`) - [ ] Identify content HTML tags (e.g., `<p>`, `<img>`) - [ ] Understand the purpose of boilerplate code (html, head, body)

## Development Environment

- [ ] Install Visual Studio Code - [ ] Install Live Server Extension in VS Code - [ ] Create a new web project: - [ ] Create a new folder - [ ] Add an index.html file

## HTML Document Capabilities

- [ ] Render text using appropriate tags (e.g., `<p>`, heading tags) - [ ] Create form fields for user input - [ ] Add controls to the document - [ ] Create hyperlinks using `<a href>` - [ ] Add images to the document - [ ] Embed multimedia (video, sound, maps, geospatial content) - [ ] Create lists (ordered and unordered) - [ ] Create tables using table, tr, and td tags

## Best Practices

- [ ] Write extensive HTML code to develop intuition - [ ] Share work in the designated Slack channel for feedback - [ ] Refer to the catalog of HTML node elements when needed - [ ] Complete class exercises (e.g., Interstellar Travel Adventures Website Structure)

## Key Concepts

- [ ] Understand the difference between the document object model and the web server - [ ] Grasp the concept of URL requests and server responses - [ ] Recognize the importance of proper HTML formatting for desired browser effects

## Additional Skills

- [ ] Navigate and use the Live Server in VS Code - [ ] Interpret and modify boilerplate code as needed - [ ] Distinguish between different types of HTML tags and their purposes

Remember: The key to mastering these skills is consistent practice. Write lots of HTML code and experiment with different tags and structures to reinforce your learning.

I've created a comprehensive skills inventory checklist based on the information you provided. This checklist covers the key Day 1 HTML development skills and points of understanding, organized into several categories:

Understanding Web Applications

HTML Basics

Development Environment

HTML Document Capabilities

Best Practices

Key Concepts

Additional Skills

The checklist is formatted in Markdown, which makes it easy to read and allows for checking off items as they're completed.

Each main category contains several specific skills or points of understanding that students should aim to master.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.