01 Intro to HTML

March 27, 2020 | Lesson

This lesson introduces the basics of HTML and the materials for the class.

Teacher Activities

  • Introduce technologies and learning environment
  • Ensure equitable access to technology and materials
  • Explain Learning Journal, Outline Notes, and Lab expectations
  • Pre-teach vocabulary (tags / elements / meta)

Student Activities

  • Open a word processing program (Word, Pages, Docs) and write a brief narrative about your summer break. The story should not be longer than a page, but should contain enough information to make an impact on the reader.
  • Read Getting Started with HTML and create Outline Notes
  • Create your first HTML page:
    1. Create a new blank document named index.html
    2. Open this document with VS Code
    3. Code the HTML skeleton
    4. In between the body tags, paste your summer story content
    5. Mark up your content with heading tags (h1-h6) and paragraph tags (p)
    6. Add other elements where appropriate
    7. Save the file, then open with your web browser
    8. Show me your webpage!*
  • Read What’s in the head? and take Outline Notes
  • Update your web page in VSCode
    1. In the head element add meta elements
    2. Add the title element
    3. Show me your webpage!*

* When in class together, I require students to show me the project running on their computer, describe what their code did / is doing / is not doing, and answer questions or describe challenges. This can be done remotely through video, screen shots, and good documentation of code.


How do I Add Navigation Menus?

April 20, 2017 | Lesson

Now that you have your styles and scripts working, let’s register support for navigation menus. If you’ve used WordPress with built-in or third party themes, you’re probably familiar with creating menus in your site’s dashboard. When we create our theme from scratch, we have to register our menus using actions and identify the placement for each menu. (Continue reading: How do I Add Navigation Menus?)

How Do I Get My Styles to Work?

March 28, 2017 | Lesson

Now that we have our basic theme files and identified the top and bottom of our pages, you may be tempted to link your CSS and scripts at this point. However, WordPress has an action system that allows you to do this. Using the functions file to “enqueue” styles and scripts using the “WordPress Way” helps you to define dependencies and avoid conflicts with plug-ins and other themes. (Continue reading: How Do I Get My Styles to Work?)

How Do I Create the Basic Theme Files?

March 23, 2017 | Lesson

In the previous lesson, we created our WordPress in Cloud 9. Now, we can begin creating our own theme. The initial theme files will allow you to activate your custom theme in your WordPress Appearance Dashboard. After completing these steps, you will have activated your custom theme. Although it won’t be very useful yet, it will contain the minimum files needed to start building your theme. (Continue reading: How Do I Create the Basic Theme Files?)

How Do I Set up a WordPress Site?

March 10, 2017 | Lesson

WordPress is a great Web authoring tool. Originally created as a blog platform, WordPress has become a very popular choice for blogs and marketing websites. One of the major benefits of WordPress is that it allows end users to easily author and publish their own content without writing HTML pages manually. Setting up a WordPress site is relatively simple and many popular hosting providers have automated this process. We can set up a local development environment, use our hosting provider to create a live site, or use a service like cloud 9 to create a cloud-based development workspace. I’ll use cloud 9 for this course, but briefly discuss the first two options before setting up our workspace. (Continue reading: How Do I Set up a WordPress Site?)