Introductory Guide To Web Development (2)

Explore

Introductory Guide To Web Development

Session #9

In session #9 we talked about the Mozilla Web Documentation Library, how to scale our webpages to fit on the same window, and finally HTML form elements to create a simple quiz form related to Harry Potter World

⁠

Mozilla Web Documentation Library

In programming, there are a lot of important concepts that we just can’t remember it all. Luckily, we have documentation libraries to help us remember. A documentation library is like a dictionary, a place where all the programming tools, techniques, and concepts are stored, you can find anything. The best documentation library for web development is the MDN WEB DOCS,

click here to access.⁠

⁠

Scaling Webpages Across Screen Sizes

Please watch the following videos to review and access on this topic

⁠

Video #1 [Click Here]⁠

⁠

Video #2 [Click Here]⁠

⁠

Html Forms Notes Packet

Please see below for all the notes from the lesson on HTML forms

⁠

HtmlFormsNotesPacket.pdf

2.4 MB

⁠

Styling forms in HTML is pretty much the same as styling other elements in HTML. You can use all the different selectors we learned and the properties work for all. It will just take a bit of practice

⁠

Coding Challenges

Here are some ways you can practice the skills you learned :)

Create a short 7 question html quiz that uses all of the form input types you just learned. It doesn’t have to be interactive, eg display correct results as that have JS. Use CSS to style the quiz form you made, try to figure this out yourself.

⁠

Raw Code: Triwizard Tournament Sign Ups Webpage

Note ~ the following code is not indented correctly due to copy paste issues,

<!DOCTYPE html>

<html>

<head>

<title>Triwizard Tournament Sign-Ups</title>

<style>

body {

background-color: rgb(0, 12, 74);

color: yellow;

}

textarea:hover {

background-color: red;

}

</style>

</head>

<body>

<!--

FORMS!!!!!

- Required if you want user inputs on your webpage

- For example, a sign page for a website is an example of an HTML form

- Schoolhouse uses multiple HTML form elements too

- HTML forms is a very broad subject, a lot to cover

Elements:

- Text boxes

- Check boxes

- Dropdown menus

- Radio buttons

and so much more.......

the <form> tag is a parent tag, similar to the <table> tag

-->

<h1>Triwizard Tournament Sign-Ups</h1>

<hr>

<form>

<h3>Email: <input type = "text" name = "emailInput"></h3>

<h3>Country: <input type = "text" name = "countryInput"></h3>

<h3>Password: <input type = "password" name = "passwordInput"></h3>

<hr>

<h3>Select your hobbies:</h3>

<ul>

<li style = "list-style-type: none;"><input type = "checkbox" name = "duelCheck"> Wizard Duel</li>

<li style = "list-style-type: none;"><input type = "checkbox" name = "artCheck"> Wizard Art</li>

<li style = "list-style-type: none;"><input type = "checkbox" name = "chessCheck"> Wizard Chess</li>

</ul>

<h3>Select your best subject:</h3>

<ul>

<li style = "list-style-type: none;"><input type = "radio" name = "transSubject"> Transfiguration</li>

<li style = "list-style-type: none;"><input type = "radio" name = "potionsSubject"> Potions</li>

<li style = "list-style-type: none;"><input type = "radio" name = "charmsSubject"> Charms</li>

<li style = "list-style-type: none;"><input type = "radio" name = "muggleSubject"> Muggle Studies</li>

<li style = "list-style-type: none;"><input type = "radio" name = "otherSubject"> Other Subjects</li>

</ul>

<h3>Which school do you attend?</h3>

<option selected>~Select One~</option>

<option>Hogwarts</option>

<option>Beauxabatons</option>

<option>Drumstrang</option>

</select>

<hr>

<h3>Upload your personal waiver:</h3>

<hr>

<h3>CHECK BOX IF YOU AGREE TO TERMS OF SERVICE</h3>

<li style = "list-style-type: none;"><input type = "checkbox" name = "termsOfService"> I agree!</li>

<hr>

<br>

<button>SUBMIT APPLICATION</button>

</form>

</body>

</html>

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.