03-week Intermediate HTML

This week the tutorials focus on developing our skills to create forms

These are the exercises:

We also were tasked with recreating a form from any chosen website. I choose Facebook’s sign up page.

I create my own version using several inputs, which included, email, password, and radio.

Using the email input ensures that the user is entering data that includes the “@” symbol while the password input allows the developer to add restrictions to increase the security of the password.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Form Remake </title>
</head>

<body>
    <h1>Sign up</h1>
    <h3>It's quick and easy</h3>
    <form action="">

        <div>
            <input name="first" id="first" type="text" placeholder="First name" required>
            <input type="text" name="last" placeholder="Last name" required>
        </div>


       

        <div>
            <input type="email" name="email" placeholder="Mobile number or email" pattern=".{5,10}" required>
        </div>

        <div>

            <input type="password" name="password" placeholder="New Password" required
                title="Password must be between 5 and 10 characters">
        </div>

        <div>
            <h4>Birthday</h4>
            <label for="Birthday">
                <select name="month" id="">
                    <option value="">Jan</option>
                    <option value="">Feb</option>
                    <option value="">Mar</option>
                </select>

                <select name="day" id="">
                    <option value="">01</option>
                    <option value="">02</option>
                    <option value="">03</option>
                </select>

                <select name="year" id="">
                    <option value="">1999</option>
                    <option value="">1998</option>
                    <option value="">1997</option>
                </select>

            </label>
        </div>
        <div>
                <label for="male">Male</label>
                <input id="male" name="gender" type="radio" value="male">
                <label for="female">Female</label>
                <input type="radio" name="gender" id="female">
                <label for="other">Custom</label>
                <input type="radio" id="Custom" name="gender" value="Custom">
            </div>

            <p>By clicking Sign Up, you agree to our <a href="https://www.facebook.com/legal/terms/update">Terms</a>, <a href="https://www.facebook.com/about/privacy/update">Data Policy</a> and <a href="https://www.facebook.com/policies/cookies/">Cookies Policy</a>. You may receive SMS Notifications from us and can opt out any time.</p>

            <form action="https://facebook.com">
                <button>Sign Up</button>
            </form>
    </form>

    <hr>
    
<div><p><a href="https://www.facebook.com/pages/creation/">Create a Page</a> for a celebrity, band or business</div>
</body>

</html>

02 Create your own recipe HTML page

This week we were assigned to create a web page based on a recipe found on Tasty’s YouTube page.

I chose to create my HTML page based on Claire Nolan’s very tasty recipe for Grilled Shrimp Tacos

The most difficult part of creating this page was getting the first image to link to the page. My syntax was completely off. Instead of This

  <a href="https://www.youtube.com/watch?v=WDyd8zHe4Iw"><img width="600" src="https://i.ytimg.com/vi/WDyd8zHe4Iw/maxresdefault.jpg" alt="" srcset=""></a>

I had this:

  <img width="600" src="https://i.ytimg.com/vi/WDyd8zHe4Iw/maxresdefault.jpg" alt="" srcset=""><a href="https://www.youtube.com/watch?v=WDyd8zHe4Iw"></a>

This didn’t allow for the link to connect to the image instead only showed an unclickable image.

02 Week – Reviewing intermediate level Javascript

This weeks focus was to refresh our memory on how to use objects, arrays, and selectors. Here are the exercises we practiced.

Blog questions

Why are arrays of objects such commonly used data structures? Give an example of how an array of objects is used on a webpage.

Arrays of objects are commonly used data structures because they allow the user to easily select the object without having to coordinate with the numbers because they are labeled with labels instead.

Describe the difference between querySelector() and querySelectorAll(). What kinds of values can be passed as an argument to either selector?

If you use querySelector( ) it will only select the first item that matches the inquiry whereas if you use the querySelectorAll() it will select all that match the inquiry.

Week 01- Introduction to HTML

Blog Questions

Describe the importance of the HTML “Boilerplate.” What the main parts? And what are they used for?

The boilerplate allows for there to be structure to your HTML documents. The boilerplate has several parts including the doctype which helps the server to read the file as HTML, several tags including title, head, and body. All are placed to help the user cover the basics quickly.

What’s the importance of naming an HTML file index.html?
“.html” tells the server that when the file should be opened on browsers and treated as an HTML file.

Week One’s Exercise Files