webdesignMS 2012
Shodor > SUCCEED > Workshops > Archive > webdesignMS 2012

This Summer's Web Design workshop started off with the instructor, Cameron, discussing the concepts that they would be covering throughout the week. He spoke a bit about how we can use HTML and CSS in conjunction with each other to create a high class, professional website. When Cameron asked how many students had heard of or even worked with CSS before more than half of the class responded.

The students first takes was to create a public_html folder to store their work files. To start off, Cameron had each student create a page titled "index.html" which would provide the primary workspace for the rest of the week. Cameron then had the students walk through a basic HTML template that he had created to introduce them to proper website design processes. They stated off by using basic HTML tags to add content onto their websites. Using paragraphs simply labeled "Paragraph one," "Paragraph two," and "Paragraph three," the class began to make distinguishable sections for web content. They then added to their websites by creating unordered lists displaying their favorite foods, movies video games, classes, and anything else that peaked their interests. After a short break, the students came back to add links and CSS to their websites. They started off with a short demonstration from Cameron on using the correct tags for linking things. Cameron explained that CSS changes how their websites look rather than modifying the content like HTML. Starting with a new file called site.css, the class added backgrounds, fonts, colors, and style to their websites. However, even though they saved the file in the same "index.html" folder, they discovered that their webpages had not been changed! Cameron let them in on the secret: CSS files have to be linked to HTML files in order for the CSS to work on their actual websites. For the rest of the workshop, the instructors helped everyone with their CSS pages to get them linked and working when someone opened the page online.