Session 1: Welcome to Web Design! Today we will start with introductions, review the syllabus, and discuss the course objectives. Our first project will be a simple one page layout called the Project Portal. The document layout will use “normal flow” to present a short biography and links to all of your upcoming projects. LECTURE: Finally we will discuss the anatomy of HTML tags, the structure of HTML documents, and normal flow.
Important: Normal flow is a term used to describe how an HTML document behaves when none of the elements within the document have been given values for the CSS position or float attributes. In this case all block-level elements stack vertically from top to bottom in contrast to inline-level elements that stack horizontally from left to right.
Assignment 1: “Project Portal” Static Web Page
Due: Session 1, Week 3 (10 points)
Description:
This assignment is an introduction to the most basic concepts of building a web page (i.e. normal flow, hyperlinks, file management, creating sub-directories, and basic CSS). It is also the mechanism through which I will grade all of your subsequent assignments. start by creating a home directory titled DIMA358. Next, create four new directories within your DIMA358 labelled for each upcoming project. You will then build one web page with the filename “index.html” with links to the new directories you created. Copy the entire environment (directory structure and files) to your personal webspace.
Requirements:
1. Build an environment for your Project Portal and upcoming assignments
2. The environment should contain all of the subdirectories necessary
3. Create a single project portal page in the DIMA358 directory called “index.html”
4. Include a header, biography, images, and an unordered list with links to all upcoming projects
5. Upload your project portal to your student webspace (watch video demo for details on how to do this)
Points Breakdown:
2 points are awarded for coding headers, lists, links, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for preparing readable, accessible, and well design content for the page
Session 2: We will build all of our projects and exercises using an IDE called VS Code (Visual Studio Code). We’ll be using VS code for its text editing function that allow the user to enter plain text into a document. All computer code is made up of instructions written in plain text. Plain text files typically use the ASCII format. The filename’s “extension” or suffix (.txt, .html, .css, .rtf, .csv, etc.) is used to explain to the user and the computer what the file is meant to do. An FTP client application, like Cyberduck allows us to transfer files to a web server so that they are accessible over the internet.
There are many tools that will automatically generate the code necessary to create a web document, but these “Authoring” tools (FrontPage, Dreamweaver, etc.) have limitations and the code that is generated can be difficult to read for human beings. Using a text editor helps us learn what the code does and allows us to write it in such a way that you and other people can read and understand it. It also allows for the possibility of mistakes to be made and in-turn you will learn about troubleshooting techniques. Mistakes are good!
We learn wisdom from failure much more than from success. We often discover what will do, by finding out what will not do; and probably he who never made a mistake never made a discovery
― Samuel Smiles
Relevant links:
VS Code
VS Code Basics
FileZilla FTP Client*
*Make sure you download the Client and not the Server