• Welcome to the class!

    Not published to students
    Current

    In this course, students will dive deeper into the design and development of web pages and web applications. Topics include combining HTML and CSS with Javascript and JQuery libraries to create rich user experiences across desktop and mobile environments, utilizing frameworks to aid responsive web design, and how to plan and design with the user in mind.

    As a result of this course, you will be able to:

    • Utilize the Bootstrap framework and media queries to create responsive web design.
    • Create rich, responsive web apps that work across a variety of devices.
    • Write and utilize Javascript functions in your web design.
    • Install and use JQuery libraries in your web design.
    • Design, build and test strong user experiences.
    • Showcase a portfolio website of your web design projects.

    • pdf

      Course Syllabus

      Available but not shown on course page
      Not published to students
      90.3 KB

    • Forum

      Announcements

      Available but not shown on course page
      Not published to students

  • Assignment 1 - Mobile Site Redesign

    Not published to students
    Current

    Using HTML, CSS and the Bootstrap framework, select a site to redesign for mobile.  Usability is important here as well, so be sure to think and sketch through your site concept before executing.

    Deliverables:

    • A fully-coded website with at least four distinct pages.
    • At least five sketches of your site redesign, showcasing your thought and problem-solving process.
    • All files packaged into a single .zip file, named per the syllabus naming requirements.

  • Assignment 2: Personal Site

    Not published to students
    Current

    • Assignment

      Assignment 2: Personal Web Site

      Available but not shown on course page
      Not published to students

      Using the skills you've developed so far, build a professional personal website that highlights your background, skills and a portfolio of your work. This should be a highly-crafted site that you would feel comfortable showing to a potential client or recruiter. 

      Deliverables:

      • At least five sketches of your site, documenting your thought design process. 
      • A full-coded, responsive website with at least three pages, but no more than six
      • A ZIP folder containing all files, images, sketches, etc., named per conventions in the syllabus


  • Basic Javascript Instructions

    Not published to students
    Current

    Reading assignment: Chapter 2 

    • Forum

      Exercise Assignment: Practicing Javascript Instructions

      Available but not shown on course page
      Not published to students

      Read through Chapter 2 and explore Javascript instructions. Starting on page 63, practice the code examples in the book.  For the final example, play with the values and parameters - don't just translate the example verbatim, play with it!

      When you complete the final example at the end of the chapter, take a screenshot of your final page, take a screenshot of your page and upload it here.

  • Javascript Functions

    Not published to students
    Current

    Reading assignment: Chapter 3

    • Forum

      Discussion Topic: Exploring Javascript

      Available but not shown on course page
      Not published to students

      Now that we've explored Javascript and looked at how to create and implement functions, it's time to discuss JS applications.  Reply below and post some links for sites that you think use Javascript.  Do your best to describe where and how the site is using Javascript. Provide screenshots of the page, if you would like. 

    • Forum

      Exercise: Chapter 3

      Available but not shown on course page
      Not published to students

      After reading through and practicing the concepts introduced in Chapter 3, complete the exercise at the end of the chapter to gain a better understanding of how to use and build out JS functions.  Reply below with screenshots fo your finished exercise, and feel free to ask any questions that you have.

  • Assignment 3: Drawing with HTML Canvas and Javascript

    Not published to students
    Current

    • Assignment

      Drawing With Canvas

      Available but not shown on course page
      Not published to students

      Using the skills you have learned so far, draw a picture using Javascript and the HTML5 Canvas element.  The canvas size should be at least 500 x 500 pixels and should contain a variety of shapes and elements (IE, circles, gradients, etc.).  Don't try to go for photorealistic, "hand-drawn" elements- experiment with it and play!

      Deliverables:

      • Sketches of your drawing ideas - this will help you pre-visualize the final drawing you're going for
      • A ZIP file containing your code files and sketches, named per the syllabus naming conventions

    • Forum

      Exercise: Playing with HTML Canvas

      Available but not shown on course page
      Not published to students

      Following W3School's Guide to getting started with HTML Canvas, create a canvas and play around with the basic techniques of drawing. Take a screenshot and post it as a reply to this forum.

  • Document-Object Model

    Not published to students
    Current

    Reading Assignment: Chapter 6

    • Forum

      DOM Applications

      Available but not shown on course page
      Not published to students

      As you read through Chapter 6, what are some applications that come to mind? The chapter exercise is a grocery list - where else could this be implemented? Share your ideas and thoughts by replying below.

    • Forum

      Exercise: Create a To-Do List

      Available but not shown on course page
      Not published to students

      Create a to-do list in Javascript. For a basic example, you can use W3School's walkthrough. For a more advanced and stylized version, try this one on for size. Reply here and submit your finished project.

  • Introducing jQuery

    Not published to students
    Current

    Reading Assignment: Chapter 7

  • Assignment 4: Mobile App

    Not published to students
    Current

    • Assignment

      Assignment 4: Mobile App

      Available but not shown on course page
      Not published to students

      Using JQuery (including JQuery UI and JQuery Mobile) and the other skills you have learned so far, create a responsive web app that can used on a mobile device.  


      Deliverables:

      • A responsive mobile app with at least 5 separate pages. This is a mobile only project, so don't worry about creating a desktop site.
      • Sketches of your site design and though process. 
      • A ZIP folder containing all your deliverables, named according to syllabus conventions.
      • You may also host your app online if you would like to feature it in your personal portfolio (Which you should!) I'll link some examples of how to do this.
      • The subject matter of the app is up to you, but guides/services tend to lend themselves to mobile apps (IE, airport map guides, hiking trail finders, public libraries) because you can utilize more JQuery widgets vs. most other everyday sites or businesses.
      • The app must be fully stylized - be sure to apply your own colors, text and style to the site. I don't want to see any stock Bootstrap purple or JQuery blue in your submission.

  • Topic 9

    Not published to students
    Current

    • Assignment 5: Final Project

      Not published to students
      Current

      • Assignment

        Final Project Submission

        Available but not shown on course page
        Not published to students

        Using the skills you've learned over the semester, create a project based on your final project proposal. 

        Focus on one area - if you want to design a mobile app, don't worry about creating the desktop counterpart. Vice versa, if you're creating a desktop site design, don't worry about the mobile component. 

        If you want to do a "sequel" project, IE another Canvas drawing or improving on your personal site, please explain what new knowledge or skills you'll include in this project. For example, you may choose to create a mobile app version of your personal site, or you may choose to animate a Canvas drawing and have it react to an event on the page.


        Deliverables:

        • 1-5 sketches showing the thought process behind your project
        • A finished web or mobile app with at least three unique pages
        • Submit the project in a ZIP folder containing all your assets and code.

    Course Dashboard