Computer Code Image

Instructors: Cindy Royal & Sara Shields

June 27-July 1, Zoom July 1

Description
We’ll review the building blocks of front-end development: HTML, CSS and JavaScript, and then discuss modern frameworks for their professional application.

Objectives

  • Understand the languages of front-end web development
  • Describe the concept of responsive design
  • Comprehend the ways in which HTML Forms and JavaScript create interactivity
  • Understand how developers use frameworks like Bootstrap or content management platforms like WordPress
  • Developing and teaching a Web Design course

Link to Web Development Exercises for July 1 Zoom.

Online Exercises & Materials

Instructor Videos

The next few videos demonstrate code using an HTML Editor. The tutorials show Brackets, which is no longer available. You can use any HTML Editor you want, and they mostly all work the same way. I am currently using the free editor Atom, which has both Mac and Windows options. Later, we’ll also be working with the online platform Glitch, which is an html editor that also hosts your site.

For these exercises, we are going to use the Glitch.com platform. Glitch is a simple and free tool for teaching students how to code and to get something published quickly. Go to the links below. Create an account at Glitch. Then you can Remix a project, which allows you to have the files, so you can modify them. The video below provides a brief introduction to Glitch.

Basic Web Development Concepts – Open this project and Remix it to your own account. It includes an index.html file and two stylesheets. style.css is initially linked and you can see how it presents the page in a horizontal navigation. If you change the reference to the stylesheet in the html page to style2.css (in the link element near the top of the page), you can see an example of a vertical navigation strategy. Pick one of these stylesheets to start with and then make any changes you want to both the html and css pages to make the project your own. Make it your content! Don’t feel limited by the elements I have used in my example.

Images – Glitch handles images in an “assets” folder in the project, which is different than how you would normally do this for a real web project. But for this practice exercise, add your own images to the “asset folder” and copy the url location to use in the img element (as the src), so you can use your own image(s) in your example.

Preview the page – Glitch saves while you are going, so you don’t have to save. You can choose the Preview button at the bottom of the page to Preview In A New Window to see your project live on the web!

Glitch Settings – Glitch gives your project a live url with a strange name. You can click Settings, Edit Project Details and change it to something else. These will always be glitch.me subdomains, so this would not be effective for a real site. Also, glitch sites “go to sleep” after a certain amount of time, and go through a short “waking up” process when you visit a site later, thus another reason why hosting a real site on glitch is not ideal (see below for hosting information). But this is a great tool for teaching and learning. Glitch now provides a paid option to remove the “sleep” mode. And you can attach your site to a domain you have already purchased, if you want to use Glitch as your host.

Collaboration – Glitch also lets you invite students to the file to collaborate on it, another way to engage students with code. This is particularly helpful in an online learning scenario. With the Share button, you can “Invite project members to edit your code” (be careful that you only do this for projects that you don’t care if the students modify them). Or you can provide the project link and allow students to Remix a copy of the project on their own account, as I have for you.

We’ll be using an existing project, but you can also go under Settings and choose New Project to create and begin working on your own projects with Glitch.

Discussion and Assignment
Modify the html and css in the project that you will Remix on your own Glitch account. Demonstrate the following:

  • Multiple headings for sections of the page
  • Paragraphs of content
  • Image – add image(s) of your own.
  • Links to any of your interests or activities
  • CSS – pick one of the two stylesheets to start and link in the html; page background, other colors. Apply any other CSS you want to use to create your desired design.
  • Extra: create additional pages for hobbies.html and links. html (or any other pages you want to add to the navigation) to make a complete site. Use the + next to Files in the sidebar to add a new file to the project. Make sure you name it with a .html extension and then include it in the navigation on each page.
  • Extra Extra: If you feel like experimenting with the JavaScript techniques you learned (see video below), add something interactive to your page. Don’t worry if you can’t do this. We’ll cover JS in the Zoom. But for anyone who already knows HTML/CSS, you might want a challenge!
  • Add anything else creative you would like on page.

Include the url for your project in the #webdevelopment channel on Slack. Have fun with this. Use whatever resources necessary to solve problems and accomplish your design goals.

Preview JavaScript

After you have done the HTML/CSS exercise, review this JavaScript video, simply to have you thinking about these concepts before the Zoom segment of the workshop. We will be moving directly into working with JavaScript on our Coding Day. We’ll also be using coding concepts to work with data during the Zoom segment. But for this week’s online module assignment, you only have to implement the HTML and CSS concepts.

JavaScript examples – these are just examples of some of the things I went over in the JavaScript video, if you want to see live examples of them. We will go over during the Zoom segment of the program, so just give them a glance before the Zoom.

HTML/CSS/JavaScript Quiz
When you have completed the videos and reviewed the resources, take this HTML/CSS/JavaScript quiz. It is mainly for your own assessment purposes. See how you do and go back and review any areas you missed.

Additional Resources

In the Zoom workshop, we will complete an exercise that demonstrates each of the concepts covered in the videos. You may not be able to review all the items during this week, but return to them when you have time and bookmark for future reference.

Additional Tutorials – Depending on your familiarity with these topics and what else you want to learn, you can review the tutorials on my website CodeActually.com.

Responsive Design

Responsive Web Design, A List Apart, by Ethan Marcotte

Frameworks and Content Management

Bootstrap – Bootstrap is a fronted development framework library that simplifies and provides advanced functionality for Web development features. It was originally a project of Twitter by Mark Otto and Jacob Thornton, but has since spun off on its own.

WordPress – WordPress is a well known and widely used content management system. It can be hosted at WordPress.com with minimal functionality and theme choice, or preferably as a self-hosted installation, with a robust developer community that make themes and plugins.

Hosting

  • The final thing you need to do in making a website is host it! You can get domains and virtual hosting from many, many vendors, but we now use Reclaim Hosting for student projects. It is relatively affordable and has good customer support. I also maintain a Bluehost account, and have been pleased with their offering, as well.

A Word About Design
There are many resources on design, trends and best practices. In this module, we are focused on coding, but how you design the entire experience for the user is critical. See the Resources page for User Experience Design resources.

Finally…
I just want to reiterate that we are covering a lot in this module. These are topics we cover in 2-3 different courses, so to be able to cover everything, we’d need more than a week or a few hours in a workshop. I wanted to give you a sense of the power of interactive media beyond simple design concepts. But this overview should provide a foundation and many resources for further development. We’ll do exercises during the Zoom, and I can answer any questions.

Zoom Session, July 1, 1-5pm

Outline

  • Web Development Environment and Review HTML/CSS
  • HTML Forms
  • Interactive Media with JavaScript
  • Coding a Quiz Exercise
  • Setting Up a Web Design Course
  • Google Charts Exercise

Link to Web Development Exercises for July 1 Zoom. – instructions and code samples for use during Zoom workshop. Link will be available before the Zoom session.

Module Evaluation

After each module, you will be asked to do an evaluation. Go to the link for the PhDigital 2022 Zoom Modules Evaluation and select the module you are reviewing. Please do this as soon as you can after the Zoom session.