Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: More on Styling
Time: 50+ mins

Introduction

In this lesson, students will learn about forms and more CSS features for advanced layouts and designs. Activities include solving challenge activities; designing a user profile card; creating a Responsive Page project; and taking a 6-question quiz about “Lesson 7: More on Styling†concepts. Note: Answers to all challenge activities (7 total) are located below the “Standards†section in this teacher guide.

New HTML Elements

  • <form> : Creates a form that can have multiple types of input elements that allows the user to enter data.
  • <label> : Represents a caption.
  • <button> : Defines a clickable button.
  • <input> : Creates interactive controls that can receive user input.
  • <textarea> : Represents large amounts of text that span multiple lines.

New HTML Attributes

  • action: Sets the URL of a program that will receive the form data and process it.
  • for: Links the label element to an input element.
  • name: Define a name for the element.

New CSS Styles

  • display: Sets how an element is displayed.
  • transition-duration: Sets the amount of time the transition will last.
  • transition-property: Defines which CSS property to transition.
  • background-repeat: Sets a background image that will be repeated.

Vocabulary

  • Tooltip: A message that appears when the mouse hovers over a specified element

Objectives

  • Apply coding concepts to complete provided challenge activities
  • Apply concepts from this lesson to create a profile card and Responsive Page project

Materials

  • Computers or laptops (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

1.
2.
3.
4.

Activities (45 minutes)


1. Forms (Document)
  • HTML forms collect data from the user. Here is an example:

  • This module introduces four new concepts:
    • The form Element- A form can have multiple types of input elements that allow the user to enter data. Here’s what it looks like:

    • The action Attribute- A form usually has an action attribute with a URL as the value. In this course, students will leave the action attribute empty:

    • Text Input- To create a control that can receive user data, students will need to use the input element. Here’s an example:

    • Label Element- A label element can be used to tell the user what to write. Here’s an example:

  • To solve the challenge activity, students will need to create a login form by adding for and id attributes and including a label with the text “Password.†Note: Answers to challenge activities are located below the “Standards†section in this teacher guide.
2. Passwords and Buttons (Document)
  • This module introduces one new concept:
    • Password Input Type- To hide password text, students can use an input called password.
  • To solve the challenge activity, students will need to change the input type to “password†and include a button with the text “Send.†Give a hint: Tell students to include a <button> element in their code. Here’s what the <button> element looks like:

3. More Form Controls (Document)
  • This module introduces three new concepts:
    • Checkbox Input Type- The checkbox input can create a question with several options, letting the user choose many answers. Here’s an example:

    • Radio Input Type- The radio input should be used when students want the user to choose only one of the answers. Here’s an example:

    • Textarea- The textarea input should be used when entering a large amount of text that spans multiple lines:

  • To solve the challenge activity, students will need to create a questionnaire by including a “Save†button and using the text, checkbox, radio, and textarea form controls. Give a hint: Tell students to include a <label> element in their solution.
4. CSS Media Queries (Document)
  • Web pages are displayed on various kinds of devices and screens (e.g., laptops, phones, tablets), so it’s important to have a layout that adapts to multiple screen sizes and orientations.
  • This module introduces one new concept:
    • Simple Media Query- Students are provided an example of media query syntax that checks to see if the screen size is at least 1024 pixels wide:

5. CSS Pseudo-classes (Document)
  • This module introduces four new concepts:
    • CSS Class- Students are provided an example where the class blue-button will have a blue background:

    • CSS Pseudo-classes- Pseudo-classes help customize the look of specific elements.
    • The :hover Pseudo-class- This pseudo-class is useful for creating styles (e.g., button background turning blue) that are only applied when your mouse hovers over an element. Here’s an example:

    • The :active Pseudo-class- The pseudo-selector is applied to make an element (e.g., link or button) active when the user clicks on it. Here’s an example:

6. More Pseudo-classes (Document)
  • This module introduces three new concepts:
    • The :focus Pseudo-class- The :focus pseudo-class allows sites to be accessible for users with disabilities. For example, focus is given to an element both by clicking on it or by using the keyboard. Here’s an example:

    • The :visited Pseudo-class- The :visited pseudo-class is used with links, and allows students to style a link that the user has already clicked on (or “visitedâ€). Here’s an example:

    • The :target Pseudo-class- The :target pseudo-class is applied to the element whose id is found as part of the URL. Here’s an example:

    • Point out the “View Code†button that’s located at the bottom of the screen. Next, tell students to click the “Make the text yellow!†hyperlink and observe what happens. Here’s a screenshot of what the hyperlink looks like:

7. Creating Tooltips (Document)
  • Tooltips give the user additional information about something when their mouse is above that element. Here is an example:

  • This module introduces one new concept:
    • Combining CSS Selectors- Students can combine CSS selectors using combinators between the selectors:

  • Point out the list (i.e.g, Item 1, Item 2, and Item 3) in the “Descendant Combinator with Pseudo-class†exercise. What happens when their mouse hovers over the different items? (Answer: Subitems appear.)
  • Students will need to solve three different challenge activities, where each challenge builds off the previous one.
    • Challenge 4- Create the Tooltip Container: To solve this challenge, students will need to create a paragraph or link for the content that will trigger the tooltip; create a span inside the new element for the tooltip text; and add a class to each of the two elements with some basic styles. Give a hint: Tell students to include a <p> element.
    • Challenge 5- Position the Tooltip: To solve this challenge, students will need to copy their code from the previous challenge (challenge 4) and set the tooltip container’s position property to relative; set the tooltip position property to absolute; move the tooltip below the container text using the style top:100%; and align the tooltip to the left using left:0.
    • Challenge 6- Show Tooltip on Mouse Hover: To solve this challenge, students will need to copy their code from the previous challenge (challenge 5); set the tooltip display property to none; and use the :hover pseudo-class in the container element with the descendant combinator to display the tooltip.
8. CSS Transitions (Document)
  • This module introduces two new concepts:
    • transition-duration- The CSS transition property specifies the amount of time the transition animation will last. Here’s an example:

    • transition-property- CSS properties that students can transition include the margin, padding, background-color, and color. Here’s an example:

  • To solve the challenge activity, students will need to program a paper plane glider to hover the mouse anywhere over the web page. Check that students are using the correct pseudo-class and descendant combinator to make the paper plane glide on hover. Give a hint: Tell students to use the :hover pseudo-class.
9. Project 9: Profile Card (DIY)
  • In this DIY (do-it-yourself) project, students will use the Text Code Editor to design a user profile card. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial†tab, which will guide them through the project.
  • A user profile typically includes an avatar, a username, and additional information (e.g., favorite song, favorite type of food).
  • Here’s a screen image sample of what their project might look like:

10. Project 10: Responsive Page (DIY)
  • In this DIY project, students will use the Text Code Editor to make the web pages from the previous chapter responsive by adding media queries. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial†tab, which will guide them through the project.
  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? “Step 3†of the Tutorial includes a Bonus challenge, where students are encouraged to experiment with different screen widths and layouts.
11. Quiz (Multiple Choice)
  • Students will be asked 6 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

  • What’s a tooltip and who can give an example of how to use it? (Answer: A tooltip is a message that appears when the mouse hovers over a specified element. You can use it on your web page to give the definition of a word.)
  • The checkbox input can create a question with several options. Who can give an example of when using this input would be appropriate? (Example: For a questionnaire that asks the user to select what type of music they enjoy.)
  • Why is it important to have a layout that adapts to multiple screen sizes and orientations? (Answer: Most people access websites on different devices such as computers, tablets, and cell phones, which all have various screen sizes.)

U.S. Standards

  • CCSS-Math: MP.1, MP.2, MP.4, MP.7
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-13, 2-AP-16, 2-AP-17
  • CS CA: 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.k. Standards

  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.