Supercharge Session 3 (HTML Basics)

0.0(0)
studied byStudied by 0 people
0.0(0)
full-widthCall Kai
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
GameKnowt Play
Card Sorting

1/8

flashcard set

Earn XP

Description and Tags

Building Buttons

Supercharge

Full Stack Developer

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

9 Terms

1
New cards

Create a button that displays Follow on the webpage.

<!doctype html>
<html>
 <body>
  <h1>Follow us on Twitter</h1>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <button>Follow</button>
 </body>
</html>

OR

<!doctype html>
<html>
 <body>
  <h1>Follow us on Twitter</h1>
<button>Follow</button>
 </body>
</html>

2
New cards

Find what's wrong with this webpage and fix it! There is one thing to fix.

<!doctype html>
<html>
 <body>
  <button>Launch Rocket<button>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <button>Launch Rocket</button>
 </body>
</html>

3
New cards

Create a button displaying Play / Pause between the Previous and Next button.

<!doctype html>
<html>
 <body>
  <h4>Spotify</h4>
  <p>Now playing: If You're Happy and You Know It</p>
  <button>Previous</button>
  <button>Next</button>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <h4>Spotify</h4>
  <p>Now playing: If You're Happy and You Know It</p>
  <button>Previous</button>
  <button>Play/Pause</button>
  <button>Next</button>
 </body>
</html>

4
New cards

Make the text of the button important.

<!doctype html>
<html>
 <body>
  <p>Would you like to decline?</p>
  <button>Decline</button>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <p>Would you like to decline?</p>
  <button><strong>Decline</strong></button>
 </body>
</html>

5
New cards

Create a button that displays Like on the webpage.

<!doctype html>
<html>
 <body>
  <h4>@getmimo</h4>
  <p>LEARN TO CODE!</p>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <h4>@getmimo</h4>
  <p>LEARN TO CODE!</p>
  <button>Like</button>
 </body>
</html>

6
New cards

Display these buttons next to each other on the webpage.

<!doctype html>
<html>
 <body>
  <h1>Online Bop It</h1>
  <button>Twist it</button><br>
  <button>Bop it</button><br>
  <button>Pull it</button>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <h1>Online Bop It</h1>
  <button>Twist it</button>
  <button>Bop it</button>
  <button>Pull it</button>
 </body>
</html>

7
New cards

Place three buttons to display 1, 2, and 3 in one horizontal line.

<!doctype html>
<html>
 <body>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
 </body>
</html>

8
New cards

Modify the codes such that the buttons with text 1, 2, and 3 will be above the buttons with text 4, 5, and 6.

<!doctype html>
<html>
 <body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
 </body>
</html>

<!doctype html>
<html>
 <body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <br>
  <button>4</button>
  <button>5</button>
  <button>6</button>
 </body>
</html>

9
New cards

Code a button displaying Add Emoji above the Send Message button.

<!doctype html>
<html>
 <body>
  <button>Send Message</button>
 </body>
</html>

INCORRECT: 

<!doctype html>
<html>
 <body>
  <button>Add Emoji</button>
  <button>Send Message</button>
 </body>
</html>

CORRECT:

<html>
 <body>
  <button>Add Emoji</button>
<br>
  <button>Send Message</button>
 </body>
</html>