Front End Try Coding: Pre-work

Introduction

We are excited you will be joining us for an upcoming Try Coding workshop. If you’ve found yourself on this page and are not yet signed up for one, you can sign up here!

Completing this pre-work will set you up for success in our virtual classroom - making sure that everyone feels comfortable with the tools we will use and a bit of foundational knowledge.

⏰ Time: Most participants share that this work took them between 25-35 minutes to complete.

👩🏽‍💻 Materials: It is ideal that you work through this on a laptop or desktop computer. Everything can be done inside a browser with an internet connection.

🚀 Goal: Work through the materials so you are prepared to engage at your workshop. Then, complete the submission form at the bottom of this page in order to get the zoom link for your scheduled workshop!

Set Up

To Do

CodePen provides an online platform that allows us to write code and see the results almost immediately - all inside of one browser tab! There are many other similar (and awesome) tools available; we feel this is the best choice for the End Try Coding workshops.

🎬 Please watch this short screencast (no sound) for an introduction on how to navigate CodePen:

✅ Since we'll be using CodePen during the workshop, please create a free account with them at this time. Then, create a pen as shown in the video. You don't need to type any code in it just yet.

Learn: Part 1

To Do

Of all of the major technologies used on the web, on either the Front End or the Back End, HTML, or Hyper Text Markup Language, is the oldest. In the beginning, the web was just a bunch of HTML documents that you wrote by hand. They had these cool things called hyperlinks that would allow a user to click on a word on one page and be taken to another page.

HTML is still an essential part of modern web applications. It holds the content and creates the structure of a webpage.

Tags, Content, Elements

HTML is made up of a series of elements. Each element is made up of at least one tag, and most have content between an opening and closing tag.

Let’s assume we are starting with some text. We’ll call this content.

the text of 'Hello, World!' in an orange color.

To tell the browser that this is a paragraph, we'll mark up the content with HTML tags:

We use the < p> (the opening tag) to signal to the browser that everything that's about to follow is part of a paragraph and < /p> (the closing tag) to let the browser know that this paragraph is done. The entire line - opening tag, closing tag and any content in between - is referred to as an element. When a user visits our application, the browser loads up the HTML, reads it, and turns it into the user interface.

Two commonly used tags are headings (h1-h6, h1 being the biggest, h6 being the smallest) and paragraph tags (p). The CodePen below demonstrates what many of those elements provides.

See the Pen Headings and Paragraph by Try Coding (@turing-trycoding) on CodePen.

You Try

In your CodePen, create at least 3 headings and at least 3 paragraphs. The content can be anything you are interested in!

Observe the output in the browser. Is the content showing up in the order you expected? What do you notice about the size of the various heading tags?

🖐🏼 If you need help or want to feel confident in your work, here is example of the completed task.

Learn: Part 2

To Do

HTML offers a wider variety of elements that serve different purposes. In addition to headings and paragraphs, we will cover 3 more in this pre-work - buttons, links, and images. If you want to learn about others, check out this resource!

Buttons

The button element has an opening and closing tag, and should have content. That content will appear inside of the button:

Links

The a element creates a hyperlink. Here's an example of the syntax the browser expects:

Any text inside of the opening and closing a tags will appear, by default, in a bright blue color with an underline and, when clicked, will take the user to the location indicated in the href attribute (which is short for hyper-reference).

Images

The img element allows us to display an image on a site. Here's an example of the syntax the browser expects:

The self-closing img tag above has two attributes - src and alt. These are intended to be used in conjunction with the img tag. src needs to tell the browser which image to display, and alt should provide text describing the image in the event the user isn't able to access the image.

How do I know what to put in the src attribute? When working with CodePen, the easiest will be to use an image address, rather than a file on your computer. Find an image online, right click it, and select "Copy image address". Then, paste into the CodePen.

You Try

In the same CodePen you were working in earlier, add some new elements to your page! You can add your new elements to any part of the HTML file.

🖐🏾 If you need help or want to feel confident in your work, here is a working solution.

Submission

To Do

You did it 🎉 We hope you had some fun learning about HTML - this is a great foundation!

Please complete the form below so we have a sense of where you are with the material so far and can customize the workshop to your needs.