Tutorial 01 - HTML/CSS/JS

[braughtg]

Tutorial 01 - HTML/CSS/JS

In this tutorial you will:

• Get the Vue3-WebDev-Kit setup and ready for use.
• Request some enhanced GitHub benefits that you can receive as a student.
• Complete tutorials that introduce you to the basics of the three fundamental technologies used in web development:
  • Hypertext Markup Language (HTML)
  • Cascading Style Sheets (CSS)
  • JavaScript (JS).

Setting up the Vue3-WebDev-Kit

Well organized open source projects include a number of common files designed to help newcomers get started with the project. One of these files is README.md and should be the first thing newcomers review when getting started with a new open source project. This is why GitHub automatically displays the contents of the README.md file when you visit a repository on GitHub.

Tasks

1. Visit the upstream repository on GitHub using the URL given to you by your instructor.
2. Read the README.md file and follow the instructions in the "Getting Started" section. These instructions will:
   • Guide you through the process of setting up the codespace that you will use to work on the tutorials and extensions.
   • Help to familiarize you with the Git and GitHub operations (i.e. the workflow) that you will use to interact with your codespace and complete the tutorials and extensions.

Self Check

1. Which document describes how to create a new codespace?
2. Can you quickly find the "Quick Reference" document?

Requesting GitHub Education Student Benefits

Joining GitHub Education as a student provides free access to a range of GitHub features that are either only available to verified students or normally require a paid membership. Two important features that you will need for this course are more free hours and storage for GitHub Codespace use and increased use credits for Copilot (GitHub's AI coding assistant).

Tasks

1. Apply to GitHub Education as a student, if you are not already a member.
2. Request access to GitHub Copilot for free as a student, if you do not already have access.
   • You will need to wait until you are verified as a student before you will be able to complete it. So come back to this one once you are approved.

The Workflow for Tutorials

Working on any software project with multiple people requires following a workflow that helps the work to flow smoothly. This project has two very similar workflows, one for the Tutorials and one for the Extensions. This section ensures that you are aware of and can find the information about the workflow for the Tutorials.

Tasks

1. Find the "Quick Reference" document.
2. Find the "Tutorials Workflow" heading.
3. Follow the steps in "Starting a Tutorial" to get setup to work on this tutorial.
4. Give the steps in "Working on Tutorial Tasks" a quick skim to familiarize yourself with them. You'll be using them when completing each of the sections below.

Self Check

1. How do you see the specific commands that you can use for each step in the workflow?
2. When should you make a commit?

Planning a Website

It is good to do a little planning before you start to build something. Creating a website is no different. In this section you'll plan out some details for the basic web site that you'll create and enhance in the subsequent sections.

Tasks

1. Go to the Your first website page on the Mozilla Developer Network (MDN) site.
2. Complete the activities in "What will your website look like?" under "Tutorials."
   • Paste the information that you collect during the "What will your website look like" tutorial into a comment on the pull request that you created when following the steps for "Starting a Tutorial" above.

Introduction to HTML

Hypertext Markup Language (HTML) uses tags to structure the content on web pages. The following tasks will guide you through the creation of an basic web page and will introduce you to a few HTML tags in the process.

Tasks

1. Go back to the Your first website page and open "Creating the content" under "Tutorials."
2. Complete the activities in the "Creating the content" tutorial.
   • Be sure to follow the steps for "Working on Tutorial Tasks" in the Tutorials Workflow.
   • Be sure not to miss the step to "View your work in the browser" so that you can check that things are working as expected.
   • As you work be sure to consult the "Stage and commit the changes to your feature branch regularly" step.
   • Remember that there are workflow instructions for "Pausing your work" and "Resuming your work" as necessary.

Self Check

1. What is HTML used for?
2. What are the two main sections of an HTML document and what is their purpose?
3. What HTML elements have you learned about? What does each do?

Introduction to CSS

Cascading Style Sheets (CSS) are used to change the default appearance of the HTML content that appears in a web page. The following tasks will guide you through the process of using CSS to customize the appearance of the web page that you created.

Tasks

1. Go back to the Your first website page and open the "Styling the content" tutorial under "Tutorials."
2. Complete the activities in the "Styling the content" tutorial.
   • Be sure to follow the Tutorials Workflow as you did in the previous section.

Self Check

1. What is CSS used for?
2. What is a CSS selector and what does it do?
3. What type of selector have you used in your page?

Introduction to JavaScript

HTML and CSS provide the structure, content and styling of web pages. JavaScript is the programming language that can be used to add interactivity to those pages. The following tasks will guide you though the process of using JavaScript to add some interactivity to the web page that you created. If you've programmed in a language like C/C++ or Java some of the syntax will look familiar (e.g. { and }). Either way, don't worry if you don't follow everything in this tutorial. The purpose here is get a feel for the kinds of things JavaScript can do and how they are done with plain JavaScript. We'll shift to using the Vue.js framework in Tutorial 02.

Tasks

1. Go back to the Your first website page and open the "Adding interactivity" tutorial under "Tutorials."
2. Complete the activities in the "Adding interactivity" tutorial.
   • Be sure to follow the Tutorials Workflow as you did in the previous sections.

Self Check

1. What role does JavaScript play in creating a web site?
2. Which JavaScript function is used to get an element on the web page? Can you see a similarity between this function and a CSS selector?
3. Which JavaScript constructs are similar to things you know in other programming languages?
4. Can you briefly summarize how HTML, CSS and JavaScript work together to create an interactive web application?

Turning in Your Work

Once you have finished all of the work in this tutorial you will need to officially submit it.

Tasks

1. Follow the "Completing a Tutorial" section of the Tutorials Workflow to submit your work.

---

This Tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License