Instructor: Cindy Royal, Ph.D.

Computer Code Image

Week of April 20

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

Instructor Videos

The JavaScript video is simply to have you thinking about these concepts before the in-person 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 in-person segment. But for this week’s online module assignment, you only have to implement the HTML and CSS concepts.

Files – 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 – this project 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.

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.

You can choose the button to Show, In A New Window to see your project live on the web!

Finally, Glitch gives your project a live url with a strange name. You can click on that name and change it to something else. These will always be glitch.com 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 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. You can provide a link under Share to Invite Others to Edit (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.

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 in-person segment of the program.

Discussion and Assignments
Create a one-page document using 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
  • CSS – pick one of the two stylesheets to start and link in the html; page background, other colors. Any other CSS you want to use to create your desired design.
  • Extra: create additional pages for about.html and links. html (or any other pages you want to add to the navigation) to make a complete site. See the New File button
  • If you feel like experimenting with the JavaScript techniques you learned, add something interactive to your page.
  • Anything else creative you would like to add to the 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.

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 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 and stay tuned for our User Experience Module with Dr. David Nolan in a few weeks. We will discuss more during the workshop.

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. But this overview should provide a foundation and many resources for further development. We’ll do exercises in the workshop, and I can answer any questions.

Extra!!!

Mobile App Development

We won’t have time to cover Mobile App Development in this module of the workshop, but maybe you are up for a new challenge. Maybe you are already adept at Web Design and JavaScript concepts and want to learn something new. I started learning how to make iPhone apps using the Interactive Development Environment XCode (free application that runs on a Mac) and the Swift language about three years ago, and now I teach a course in Mobile Media Development. Visit mobile.cindyroyal.net for more information and resources for mobile app development. You can see the tutorials I use for that class on the App Development section on CodeActually.com, including tutorials, code samples and, in some cases, videos. So if you are ready to move forward with something different, please see these resources.

I also have a chapter in this online book Coding Pedagogy about my experiences developing the Mobile App Development course.