Tutorial 01 - HTML/CSS/JS

[braughtg]

Tutorial 01 - HTML/CSS/JS

In this tutorial you will:

• Request some enhanced GitHub benefits that you can receive as a student.
• Get the Vue3-WebDev-Kit setup and ready for use.
• 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).

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.

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.

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. Follow the instructions for "Starting a Tutorial" in the CONTRIBUTING.md document.
2. Go to the Your first website page on the Mozilla Developer Network (MDN) site.
3. 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 for this tutorial.
4. Go back to the Your first website page and open the "Creating the content" tutorial under "Tutorials."
5. Use the steps in the "Working on Tutorial Tasks" in the CONTRIBUTING.md document to complete the activities in "Creating the content" under "Tutorials."
   • Be sure not to miss the step on viewing your work in the browser so that you can check that things are working as expected.
   • If you need to take a break the CONTRIBUTING.md document provides instructions for "Pausing your work" and "Resuming your work" as necessary.
6. Self Check:
   a. What is HTML used for?
   b. What are the two main sections of an HTML document and what is their purpose?
   b. 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. Use the steps in the "Working on Tutorial Tasks" in the CONTRIBUTING.md document to complete the activities in "Styling the content" under "Tutorials."
3. Self Check:
   a. What is CSS used for?
   b. What is a CSS selector and what does it do?
   c. 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. Use the steps in the "Working on Tutorial Tasks" in the CONTRIBUTING.md document to complete the activities in "Adding interactivity" under "Tutorials."
3. Self Check:
   a. What role does JavaScript play in creating a web site?
   b. 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?
   c. Which JavaScript constructs are similar to things you know in other programming languages?
   d. 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.

1. Use the steps in the "Completing a Tutorial" section of the CONTRIBUTING.md document to submit your work on this tutorial.

---

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