Author: danne

Today will be our final presentations. Each of you will present your final websites on Zoom as well as on Slack.

Today will be dedicated to working and finalizing your final project.

Lecture

Today we will be covering the basics of JavaScript and jQuery which is just a framework that uses JavaScript. JavaScript can be used to make your static HTML and CSS website much more interactive and dynamic. One of the great things about JavaScript is that it is included in most modern browsers and on all modern devices. There are also many other JavaScript frameworks out there other than jQuery including D3js, ThreeJS, and DojoJS that have already created functions for you that you can refer to and use in your own code.

If you are interested in learning more about JavaScript here are a few helpful links:
W3 Schools Intro to JavaScript
JavaScript and jQuery, by Jon Duckett

Here are some libraries and code examples that might be helpful for what you are creating:
Pop Up Image Modal | Example | Library Used
Scroll to a Section of Your One Page Website | Example | Library Used
Parallax Scrolling | Example | Library Used
Image Carousel | Example | Library Used
Dropdown Menu (CSS) | Example

Here are a few awesome websites that show how powerful JavaScript can be:
NY Times Article
Datavisual
Alexander Chen’s Work
Stewart Smith’s Work
Arcade Fire’s The Wilderness Downtown Music Video
Arcade Fire’s Reflektor Music Video
Google Chrome Experiments

Lecture Slides

In Class Assignment

Continue working on your websites using HTML and CSS. If you are feeling a little more adventurous go ahead and start playing around with some JavaScript or jQuery functions to add some more interactivity to your site.

Homework

Continue to make progress on your website.

Lecture

Today we will talk about a few HTML and CSS frameworks (HTML5 Boilerplate, 960gs, Bootstrap and Foundation) that can be used rather than creating everything on your own from scratch. You can also override styles in these frameworks if you want to customize anything. We will also go over how to program responsive websites using CSS that work with mobile phones and tablets.

Lecture Video

In Class Assignment

Continue programming your websites. For extra credit try to incorporate what you learned today and make your website responsive and mobile friendly.

Homework

Finish programming your secondary pages and share your progress on Slack next week.

Lecture

This week we will be wrapping up our lecture on CSS. We will go over how to modify the style for lists, tables, forms and images as well as how to create a layout using positioning and floating values.

In-Class Example

In-Class Layout Example

Lecture Slides

Lecture Video

In Class Assignment

Take what we have learned over the last two weeks and apply it to your own websites.

Homework

Complete the code for your homepage and put the HTML, CSS and images share your progress on Slack next week.

Lecture

Today we will be starting to look at how to style the look of your websites using CSS3. We will be going over a basic overview what CSS is and how it is used as well as going into detail for color, typography and boxes.

In Class Example

Lecture Slides

Lecture Video

In Class Assignment

Take what we learn today and apply it to the HTML code you worked on last week.

Homework

Read chapters 14-17 in the text book.

Lecture

Today we will continuing to talk about HTML and will be discussing the major tags and elements that make up any website including:

• Lists
• Images
• Tables
• Forms
• Audio
• Video

Lecture Video

Lecture Slides

In Class Assignment/HOMEWORK

• Create a HTML page for all your unique pages on your website. Have at least a navigation connecting all your pages.
• Read chapters 10-13 in the text book.

We will be having our midterm presentations today.

Homework

Read chapters 5-8 in the text book.

Lecture: Development

Since all of you have created your website designs we can now start preparing for development. This lecture will cover how to properly create Photoshop templates for images, list proportions and dimensions and organize your file structure. We will also start to talk about HTML and will be focusing on structure, text and links.

We will be using Glitch as a development tool.

Lecture Video

Homework Part 1

Create a document that lists all major dimensions and proportions in your design as pixels. Put together a list of all the typefaces, type sizes, and colors being used in your design. Create a Photoshop image template file and output all your images for your website. Create a file system for your images and code.

Homework Part 2

Next week we will be having our midterm presentations. For your homework put together a presentation that has a slide that covers all of the below bullet points. Add the PDF of your presentation to the Slack channel and be prepared to present it over Zoom next week.

• Description of your website
• Market research and competitive audits
• Sitemap, Sketches and Wireframes
• Logo Design
• Homepage Designs
• Secondary Page Designs

Presentation Example 01
Presentation Example 02
Presentation Example 03

Lecture Slides PDF

Lecture: Design

No lecture, this week you will be presenting your three homepage designs you did for homework.

Homework

Select one of your homepage designs as your final design. Make any necessary refinements to it based on the feedback you received in class today. Complete the secondary page designs based on the selected homepage design. Do a design for each unique secondary or tertiary pages (i.e. About, Portfolio, Contact, an individual project detail page, etc.). Post your final designs to your blog.

Reading: Chapters 1 – 4 in the HTML and CSS Book