Week 12: Basics of JavaScript and jQuery Workshop

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 D3jsThreeJS, 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:
Visualizing JS Syllabus, Taught by Stewart Smith
jQuery 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:
Highrise
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.

Week 11: CSS Frameworks, Responsive CSS

Lecture

Today we will talk about a few HTML and CSS frameworks (HTML5 Boilerplate960gsBootstrap 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. And lastly we will go over how to upload your code to your server for all to view online.

Responsive CSS Example

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. Put all your files in the Dropbox folder when the HTML and CSS is complete.

Week 10: CSS (Lists, Tables, Forms, Layout and Images)

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 into the Dropbox folder.

Week 09: CSS (Color, Type and Boxes)

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.

Week 08: HTML Part 2

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.

Week 06: Website Prep, Asset Creation, Organization and HTML Part 1

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

Week 05: Secondary Page Design

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