Project 2: Completing the Front-End

Project 2: Completing the Front-End

Adding hyperlinks, Forms, and Revising our HTML

Do-Now:

• 4 Steps

• Login to the Quizz Sessions

• Open Covid Map Project on repl.it

• Join the jamboard by clicking the link in the chat

• Open the Bootstrap Documentation at getboostrap.com

Today's Agenda:

• Do-Now

• Today's Objectives

• Remembering the Growth Mindset

• Project 2 Checkin where we are and where we're heading

• HTML Recap (Using Anchor tags and reviewing Syntax)

• Adding Hyperlinks to Navbar

• Adding Content and Styles to all pages

Today's Objectives:

• BTEOC, SWBAT ...

• Understand and apply Growth Mindset thinking

  Identify what Anchor tags are and apply hyperlinks to navigation bar

• Add nav bar to all pages and be able to click through hyperlinks to go to different pages on app

• Add Registration and Signup forms with Bootstrap

• Adding Styling to all pages with Bootstrap

Open Ended

What is a Growth Mindset? Compare and contrast the differences between a Growth mindset and a fixed mindset.

Open Ended

What is something in your life that a growth mindset could help you with?

Open Ended

What is a skill you've learned or task you've accomplished with hard work and dedication? How did it feel to work hard for something you wanted?

Project 2 Check in: Where we are now

• Listed below are the deliverables that we have completed:

• Input all Covid Testing and Vaccination Site Locations to your map (16 total locations )

• Add steps/ instructions on how a user should use your app to register and schedule an appointment. You should have at least 5 steps for the user to follow

• Add Sign up form so that users can input their personal information (Name, Email, Address, Phone, Date of Birthday, Appointment Type)

• Add heading for the name of your app using an h1 tag.

  
  

Poll

Temperature Check:

How do you feel about your current progress for Project 2?

• Excellent! I'm on task and have completed all

• Good. I have a few small things to complete.

• Need Additional Assistance, I'm a little behind on certain deliverables.

• I'm completely lost and need additional support.

HTML Recap( Using Anchor Tags & reviewing /syntax)

The <a> tag AKA the Anchor Tag

• The <a> tag defines a hyperlink, which is used to link from one page to another.

• The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

  
  

Anchor tag syntax

• <a href="https://www.w3schools.com">Visit W3Schools.com!</a>

• Starting with <a href= "hyperlink or file name here" > Name of page </a>

Open Ended

How many anchor tags do you see in the following code snippet?

<div class="container-fluid">

<a class="navbar-brand" href="#">DMV Covid Map App</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

Unordered list and List items

<ul>

<li>Step:1 </li>

<li>Step:2 </li>

<li>Step:3 </li>

</ul>