HTML related subjects
We discussed the full production process (minus “publishing”).
Outlined below is a short list of the subjects covered. To read a more complete description of each item visit the production process page.
Last night, the students were tasked with building out their first responsive site with two breakpoints. They were given minimal instruction for a process on how to build responsively, though they were taught the function and syntax for media queries. Some of the students made a surprising amount of headway with a minimum of direction, but after seeing the extremely incomplete projects, I decided to offset today’s lecture and walk through a full responsive buildout.
We completed the HTML and CSS (including two break points) in about 6 hours.
As homework, the students were given source files for their second responsive buildout. They will have three days to complete this project in the evenings. I will be lecturing about other subjects during the mornings with small afternoon projects for assessment.
Today I began walking the students through their first site buildout. Last night they were tasked with converting a mockup into an html and css design. Each student had successes and failures, which is what I expected. I used the same design and began walking them through my decision making process for creating the markup and css.
We made it about halfway through the code. I decided to stop for the day and gave them a few isolated homework assignments to assess their ability to float divs and to markup horizontal navs. Tomorrow, we will finish the page buildout and move on the the next few pages in the site.
For three of the mockups (the colored boxes) students are tasked with marking these up with divs and background colors. They will need to use floats to construct the layout and margins to create separation between elements.
For the navigation page, students are tasked with marking up each navbar to the best of their ability.
Today we discussed several HTML related subjects, including tables and forms. We also spent a fair amount of time discussing paths and how to create links between files.
We also reviewed the homework assignments. Most of the student decisions were solid except for nested hierarchies. I think that in the future I will emphasize creating a nested architecture of HTML that provides the most semantic information possible for content items.
Students learned about relative and absolute paths and worked through a short student assessment for creating paths between files.
The natural path starting with one file and to another. This is probably the most common format for links between files on the same server.
Good things to remember
“current working directory” is the directory where a file is located. For instance, the index.html file is located in the root of the server. If we link from the index.html file, then the current working directory is “root”.
“../” means to move up one director to the parent of the current working directory.
“/” means to move down into the next directory.
Examples:
theironweb.com
-root- index.html
|
|-img-
| |-face.jpg
|
|-sub-
|-products.html
|-aboutus.html
In the proceeding example, we have the root of the site. In the root is the index file and two directories, “img” and “sub”. In the “img” directory is one image, “face.jpg”. In the “sub” directory are two files, “products.html” and “aboutus.html”.
A path from index.html to products.html: “sub/products.html”
A path from aboutus.html to face.jpg: “../img/face.jpg”
A path from products.html to index.html: “../index.html”
Absolute Paths start at the root of a site and are usually full urls.
Examples:
A path to products.html: “theironweb.com/sub/products.html”
A path to face.jpg: “theironweb.com/img/face.jpg”
A path to index.html: “theironweb.com”
Students learned about the table tags and structure and how to control the width and span of table cells. They marked up a table of baseball statistics (yeah!).
Tags to remember:
Students learned about the structure of forms, get and post requests, actions and most of the common form field options. Students composed a survey for collecting data about the movie watching habits of users.
Tags to remember:
Also remember that many form fields are determined by their type attribute. The input form field can be a checkbox, a text input, a radio button, submit, and many other input types. Please review the w3c tags page for a full listing.
Today we worked through a bunch of housekeeping stuff:
Illustrator is a vector editing program for working with resolution independent graphics.
Students need to familiarise themselves with the text tools, creating shapes, and changing colors. Students should also be able to navigate the layers panel. A couple students had not downloaded this app so they were given additional homework to make sure they have the basic skills necessary to work with the software.
Photoshop is a bitmap editing program for working with raster graphics.
Students need to familiarise themselves with the text tools, creating shapes, and changing colors. Students should also be able to navigate the layers panel.
Sublime Text 2 is a text editor that enables authors to program with powerful features like code expansion and syntax highlighting.
Students should be able to open a directory with Sublime Text and to edit and save .html files.
Every student downloaded Slack. Still need to get some of them into the TIY Students account and to create the class chat thread.
Chrome is the browser that we will use for viewing our code and for testing.
Students should be able to open the developer tools and view the html, css and box model views. Students should also be able to open their local text files in Chrome for review.
Portfolio Day will take place about a week before the class is over. Each student will present a minimum portfolio of 3 sites for review by around 12 professional designers and developers. Students should talk competently about the problems their site solve and should be able to justify their UX and design decisions.
Demo Day is an option presentation opportunity for student. They will be given the opportunity to create a 10 minute Keynote about their best project to present before a room full of hiring partners. Students must have completed all steps of the project and have practiced their keynote in front of their classmates.
We discussed the concepts of Semantics and Syntax. We discussed HTML attributes and nesting.
Tags covered: a, aside, blockquote, ul, ol, li, h1-h6, img, nav, header, footer, section, figure, div, span.
NOTE: Some tags are semantic and some are not. Can the students remember which is which?
The first assignment is to convert 4 pages of content into raw HTML. DUE TOMORROW.