Let's get to know each other, discuss the syllabus and the lay of the course.
Writing HTML is commonly thought of as coding. It is more correctly defined as markup. We will use some freely available web resources to learn the building blocks of developing websites.
CodePen
Develop web applications faster with real-time preview and enhanced debugging.
Codecademy
We'll use the course content from Codecademy. It's good enough for Former NYC Mayor Michael Bloomberg.
Download class 01 notes.
All parts of Assignment 1 are due 1/22 at 7pm. Upload to E-Learning.
1 of 3
Create an account on Codecademy. Complete Lesson 1: Introduction to HTML and send me a screenshot of your project achievement page (example).
Create a simple web page that explains three things you learned from your reading material. Save your work on CodePen and send me a link to the web page.
The web is a vast domain, with rapidly evolving jobs. It common to demarcate the web into two basic roles: coders, who write HTML, CSS, JavaScript, PHP, Ruby or some other code, and designers, who create the visual design of a website. While this distinction between coders and designers is convenient and facile, there are actually a wide range of careers available in web development.
2 of 3
Decide upon an area that you find interesting. Research it and find: roles and responsibilities, average pay, places that offer that job. Find someone in that field and link to their blog, Github, Twitter or other space on the web.
On the same webpage you created in Part 1, write a paragraph about the person and describe what they do and why you find it interesting. Include the link to their social site. Include a subheading title.
Let me disabuse you of the notion of building a portfolio as your semester project. There are many sites where you can create an online portfolio. In fact, with many of them you could have a portfolio website ready this evening:
Just to name a few. By the time you are done with this class you will be able to create your own portfolio website.
Instead, you will develop a unique idea for a website that fills a need for a unique audience group.
Here are some examples:
We will further define this as the semester progresses.
3 of 3
In the same webpage you created in Part 1, write a short paragraph of what you would like to do for your semester project. Include a subheading title.
This week we examine additional HTML tags and learn how CSS controls the appearance and layout of a webpage and begin tackling the semester project.
Let's continue exploring the mechanics of HTML and CSS.
CodePen
Develop web applications faster with real-time preview and enhanced debugging.
Colour Lovers
A creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.
Use content from Wikipedia to compose a page on CodePen about your favorite comic book or film hero that includes the following:
p
of contenth1
tag for the page titleh2
tag for the sectionh3
tag for the subsectiona
to a website with more informationimg
of the hero or characterBelow is an example, without any added styles and colors.
The Tick: The Animated Series is an American animated television series adaptation of the New England Comics superhero, The Tick. The series debuted September 10, 1994 on the Fox network's Fox Kids block and was responsible for introducing the satirical comic book character to a mainstream audience. Lasting three seasons, the final episode aired on November 24, 1996. Since then, The Tick has been syndicated by various networks, further increasing the show's cult following, and has been released on both VHS and DVD. A live-action series was created in 2001.
The Tick is an absurdist spoof of comic book superheroes. The Tick's sidekick is Arthur, a former accountant who dresses like a moth that flies. In the first episode, the Tick crashes a superhero convention to win the "protectorship" of The City.
The show's opening theme, written by Doug Katsaros, who also composed the scores for every episode, consists of big band music and campy scat singing. A typical episode plot would have The Tick battling a villain until Arthur devises a solution that saves the day. The Tick then declares an absurd moral regarding the previous conflict before the story comes to a close. Although the series was initially aimed primarily at children, it features an absurdist, parody style that appeals to an older audience as well.
Content repurposed from Wikipedia under the Creative Commons Attribution-ShareAlike License.
1 of 3
Complete the following Codecademy tutorials.
Upload a screenshot of your completed lesson or achievement page to E-learning.
Create a simple HTML page for your favorite band, artist, poet or designer. Include the following:
Save your work on CodePen and send me the link through e-learning.
2 of 3
Read the following article: Conversations with Robots: Voice, Smart Agents & the Case for Structured Content
answer the following questions in a new section of your HTML page created in part 1:
By this point you should have a general, perhaps vague sense of what you would like to work on this semester. Explore your idea in more depth by reviewing websites that are similar to yours.
We will slowly, but intentionally work on your Semester Project over the next 15 weeks. You might remember Aesop's fable of the tortoise and the hare. The tortoise procrastinated while the hare diligently ran the course. Your reading assignments will help you understand why we procrastinate and more, importantly, what you can do to counteract the natural urge to procrastinate.
3 of 3
In the same webpage created above in CodePen, submit a list of at least three (3) websites that are similar to your semester project idea.
Answer the following questions:
Upload the webpage link to eLearning.
This week we will review the basic HTML and CSS tags, examine how CSS controls the appearance and layout of a webpage and learn about relative vs. absolute filepaths.
Let's continue exploring the mechanics of HTML and CSS. Also, we will discover how file paths work.
In tonight's exercise, we will review html tags, create styles and style sheets, learn the different types of selectors, and explore inheritance and the cascade.
1 of 3
Complete the following Code Academy tutorial.
Upload a screenshot of your achievement to e-learning. (Sample Page)
2 of 3
Create an HTML page for your least favorite musician, actor, band or celebrity (with the content of your choosing) that includes the following HTML tags:
<h1>
, <h2>
<a>
<span>
<div>
<ul>
, <ol>
and <li>
) <th>
, <tr>
and <td>
tags.Use a palette from Colour Lovers or Picular to add:
p
tagsSave your webpage and your css styles in CodePen, name it "Least Favorite", and submit url link to e-learning.
As you are developing your idea for your semester project, the following reading will help in focusing on what you want to say and to say it with the right voice.
3 of 3
Answer the following questions in a new section of your HTML page.
This week you will have a guest lecturer.
Ryan is on the UX Research Leadership Team at 7-11.
He is responsible for in-store back office system UIs & UX. He conducts user research on-site and in the corporate offices to help make retail happen efficiently and positively for everyone involved: PMs, dev, BA, QA, execs, other researchers & designers, and most importantly... users.
1 of 3
Complete the following Codecademy tutorials.
Upload a screenshot of your completed lesson or achievement page to e-learning.
2 of 3
In CodePen, create an HTML page describing 3 persons (living or dead) you would like to have over for a dinner party. For each individual, please include the following:
Include as well:
Style the text to match the theme of the page:
<h1> - <h3>
.<p>
.
A creative brief is, as the name implies, brief. It is a concise, high-level overview of the web redesign project. The readings below provide details about how to write a creative brief.
3 of 3
Review the reading materials and then examine websites similar to the one you are proposing for your semester project. In the same webpage created in part 2, craft a creative brief that includes the following, and upload the link to eLearning:
This week you will have a guest lecturer.
Ben is the User Experience Lead at Flexion Inc.
Ben builds and leads high-functioning, human-centered design teams within organizations that understand the value of design thinking and user experience.
1 of 3
Complete the following Code Academy tutorials.
Upload a screenshot of your completed lesson or achievement page to e-learning.
2 of 3
Read the following article on the CSS Cascade and answer the following questions in a web page created in CodePen:
Upload the CodePen link to e-learning.
Now that you have written your creative brief, you are now ready to begin sitemapping.
A sitemap is a visual representation of the site's structure, flow and grouping of content and information. It communicates, it defines and it structures. It is a representation of the entire project, from a broad vantage point to many of the most minute of details. It is a chance to view the site structure and organization as a whole.
— Web Redesign 2.0, Goto and Cotler, p. 98
3 of 3
Review your creative brief. Create a sitemap that addresses the content needs of your audience. Use the sitemap template as a starting point. Upload the sitemap to the Assignment 5 section of eLearning.
"The best designed web site in the world! First class! Tremendous! Trust me! So fantastic, your head will spin! And nobody knows websites better than me, believe me."
— Donald Trump
This week we will explore the Six Thinking Hats method, learn about enhancing images with CSS, and use Font Awesome Icons to add icons to our webpages.
In class we explore how to add background images using CSS.
1 of 3
Complete the following Codecademy tutorials.
Upload a screenshot of your achivements to eLearning
2 of 3
Download the Sample Web Page Folder to complete the following:
h1
, h2
, h3
& p
tags to write your summary from the Six Thinking Hats exercise (part 3).h1
, h2
, h3
and p
tags.<body>
tag. h1
tag.The Six Thinking Hats is a method that allows us to systematically explore a topic, issue or decision with other individuals from different points of view. You will have an opportunity to use the hats in class. We will explore your semester project with a partner using the Six Thinking Hats method.
3 of 3
Find an individual not in this class and use the Six Thinking Hats method to explore your semester project. You may need to introduce them to the Six Thinking Hats method, so feel free to use the slide notes and worksheet.
Write a summary that details the discussion for each of the hats. Include a full paragraph detailing how your project has changed based on your discussion. Write your summary in the html page you created in part 2 and upload the entire folder to eLearning.
This also applies to web design.
This week we will compare good and bad typography combinations. We will also step into the process of wireframing websites, the preliminary step before the actual design. We will wireframe using the lo-fidelity paper method.
Part 1: Formatting Text in CSS
Using CSS, we will:
Part 2: Using Google Fonts.
Tonight, we will explore Google Fonts to make fantabulous websites with stunning and contextually appropriate typography.
Meet Your Type: A Field Guide to Love and Typography by Font Shop
Part 3: Sprucing Up Your Site's Navigation:
Using CSS, we will enhance links & create a menu.
1 of 5
Complete the following Codecademy tutorial.
Upload a screenshot of your achivement to eLearning
2 of 5
Download the Sample Webpage Folder and use to answer the questions in Part 3 & Part 5.
index.html
which will contain the answers for Part 3 & domains.html
which will contain the answers for Part 5.h1
tag to format the title of the page.h2
, h3
& p
tags to format your questions and answers.h1
, h2
, h3
and p
tags.<body>
tag. Prototyping is an essential technique to explore a range of possibilities and interactions with little commitment to one concept or idea.
Lo-Fi Quick 'n dirty |
Mid-Fi Spartan yet interactive |
Hi-Fi Robust 'n shiny |
|
---|---|---|---|
Examples | Pencil and paper | Twitter's Bootstrap or other framework | Photoshop or similar graphics application |
Pros | Rapid iteration, no commitment to one design | Interactivity easily understandable | Typically robust, highly polished |
Cons | Lacks detail, needs refinement | Unrefined, stark | Time-intensive, little room for alternate development |
I advocate a lo-fi to mid-fi approach. We will first use the 12-column layout grid and quickly wireframe initial ideas on paper before writing any code. We can easily discard ideas or begin explore alternatives with a new sheet of paper. This allows us to select the best idea and not fall in love with our first idea.
Using the provided sheets of graph paper, wireframe the homepage of 2 of your competitor sites. In your in-class assignment, I expect you to:
3 of 5 Reading Assignment
Read Chapters 1-4 in UXPin's The Guide to Wireframing and answer the following questions in the above web page:
4 of 5
Using the provided graph paper, wireframe the homepage and 3 sub-pages of your site.
Domain names are extremely important. They are how users will remember you.
5 of 5
Review the Domain Naming Slides and then:
This week we look at how to rapidly prototype in HTML using HTML5 Kickstart, then we will look at the domain registration process.
We will learn how to rapidly prototype layout ideas in HTML using HTML Kickstart, a modular HTML, CSS and JavaScript kit.
Prototyping is an essential technique to explore a range of possibilities and interactions with little commitment to one concept or idea.
Lo-Fi Quick 'n dirty |
Mid-Fi Spartan yet interactive |
Hi-Fi Robust 'n shiny |
|
---|---|---|---|
Examples | Pencil and paper | HTML Kickstart, Twitter's Bootstrap or other framework | Photoshop or similar graphics application |
Pros | Rapid iteration, no commitment to one design | Interactivity easily understandable | Typically robust, highly polished |
Cons | Lacks detail, needs refinement | Unrefined, stark | Time-intensive, little room for alternate development |
I advocate a lo-fi to hi-fi approach. We will first use the 12-column layout grid and quickly wireframe initial ideas on paper before writing any code. We can easily discard ideas or begin explore alternatives with a new sheet of paper. This allows us to select the best idea and not fall in love with our first idea.
We then use HTML Kickstart's framework and quickly prototype the most promising ideas in HTML. This allows us to rapidly scaffold a website.
1 of 2
Using the HTML Kickstart framework we will create the Kickstart MailChimp Design (shown below). In our assignment, we will:
2 of 2
Select one of the three names from your previous assignment and purchase your domain name. I recommend the following companies:Review the Getting Started with Your Domain slides for assistance.
Send me your working domain URL in a comment to eLearning.
This week we purchase a domain name and look into what makes a seductive website.
1 of 2
Select one of the three names from your previous assignment and purchase your domain name. I recommend the following companies:Review the Getting Started with Your Domain slides for assistance.
Sometimes we confuse making a website "easy to use" for our visitors with our visitors actually desiring to use something. Both are essential, but simply making something more usable won't guarantee that people will want to click through your site. Your website should be first easy to use and then desirable to use. Stephen P. Anderson's Seductive Interaction Design slides give some examples of how you can add elements to your user's experience that will allow them to enjoy the time spent on your website.
2 of 2
Read the first chapter of Seductive Interaction Design. Answer these questions:
30 Unintentionally Inappropriate Domain Names (Enter at your own risk!)
This week we take a look at choosing a domain name.
Domain names are extremely important. They are how users will remember you.
1 of 2
Review the Domain Naming Slides and then:
2 of 2
Select one of the three names from your in-class assignment and purchase your domain name. I recommend the following companies:Review the Getting Started with Your Domain slides for assistance.
This week we look at some Wordpress features and explore how to make our sites more desirable.
By this time you should have:
By the end of class you will:
1 of 2
Customize your WP installation. Make sure you have:
Send me the links to your website, the theme homepage, and the two (2) plugin homepages via e-learning.
Sometimes we confuse making a website "easy to use" for our visitors with our visitors actually desiring to use something. Both are essential, but simply making something more usable won't guarantee that people will want to click through your site. Your website should be first easy to use and then desirable to use. Stephen P. Anderson's Seductive Interaction Design slides give some examples of how you can add elements to your user's experience that will allow them to enjoy the time spent on your website.
2 of 2
Read the first chapter of Seductive Interaction Design. Answer these questions in full paragraphs as a text submission or doc file and submit to e-learning.
This week we look at how to make our website searchable and readable.
1 of 2
2 of 2
Find one good example of each of the following web writing principles:
For each example, include a link and a paragraph of why it exemplifies the principle. Upload the text to e-learning.
This week we will look at creating and implementing web forms, tables, shortcodes and look at security plugins.
1 of 1
The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.
Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.
Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 percentage point added to your final grade. The most evaulations that you will get credit for is 3. So you have a chance to increase your final grade by a score of 3 percentage points.
Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.
Download the Final Project Evaluation Form in RTF format
The rubric covers the following areas:
Final Project Rubric | ||||
---|---|---|---|---|
Objectives | Select Quality Criteria that Best Matches Project | |||
Design | 1 point |
3 points |
5 points |
|
Layout |
1 point |
3 points |
5 points |
|
Navigation |
1 point |
3 points |
5 points |
|
Mechanics |
1 point |
3 points |
5 points |
|
Wordpress Theme Development |
1 point |
3 points |
5 points |
|
Credibility |
1 point |
3 points |
5 points Author's name, affiliations, and credentials are included if applicable; |
This week we will look at the business side of the web.
Ben is the User Experience Lead at Flexion Inc.
Ben builds and leads high-functioning, human-centered design teams within organizations that understand the value of design thinking and user experience.
Stephen P. Anderson is a design leader focused on workforce learning and organizational development. And he’s on a mission: To make learning the hard stuff fun, by creating ‘things to think with’ and ‘spaces’ for generative play.
1 of 1
Find your Dream Job(s)
Go on job search sites:
find links to 3 jobs that you think would be a good fit for you. For each job, provide a link and a paragraph (at least 4-5 sentences) of why you think the job would be great. Upload your links and paragraphs to e-learning.
After break we will continue with Wordpress Development.
Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 07 Mar. 2016.
Seriously
This week we will look at final project peer reviews.
In Blackboard Collaborate, you will be assigned into groups. Take turns presenting your project to each other. When critiquing your partner's website, please list the top 3 strengths and the top 3 areas that need improvement. You may use the rubric in addition to the following questions when reviewing the other person's presentation and website.
1 of 1
Peer Website Critique
In a text document to e-learning, submit a 6 (six) paragraph review/critique of your partner's website.
I will be online to answer questions and help with final projects.
Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 29 Nov. 2015.
Due: May 6, 2020
The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.
Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.
Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 percentage point added to your final grade. The most evaluations that you will get credit for is 3. So you have a chance to increase your final grade by a score of 3 percentage points.
Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.
Download the Final Project Evaluation Form in RTF format
The rubric covers the following areas:
Final Project Rubric | ||||
---|---|---|---|---|
Objectives | Select Quality Criteria that Best Matches Project | |||
Design | 1 point |
3 points |
5 points |
|
Layout |
1 point |
3 points |
5 points |
|
Navigation |
1 point |
3 points |
5 points |
|
Mechanics |
1 point |
3 points |
5 points |
|
Theme Development |
1 point |
3 points |
5 points |
|
Credibility |
1 point |
3 points |
5 points Author's name, affiliations, and credentials are included if applicable; |