Exercises 1

1.Adding meta tags
Locate the main page <header>` tag and add meta tags to store the author name and a short description for the page.

Answer:

  <meta name="author" content="modern_developer" />
  <meta name="description" content="modern_developer_exercise" />

2. Adding an article under a section
The current code has a section with the header Modern Web Developer HTML Course (Section heading) that has three articles under it. Your task is to add a fourth article under this section with the following details:

Article heading: Diving into HTML5
Article description: Exploring the deep corners of HTML5! (This is the content inside the third <article> tag).

Answer:

    <article>
      <h3>Diving into HTML</h3>
      <p>
        Exploring the deep corners of HTML5! (This is the content inside the third <article> tag).
      </p>
    </article>

3. Adding a new section with header and footer

This task involves creating a new section after the “Modern Web Development CSS Course” section. It should contain an article inside it with the following details:

Section Heading: Modern Web Developer JavaScript Course
Article heading: Getting started with JavaScript
Article description: Combining the powers of HTML5 and awesome CSS styling to learn JavaScript constructs.

Also, create a footer for this section with the following text contained in it: Footer text: Footer for JavaScript course.

Answer:

   <section>
    <header>Modern Web Developer JavaScript Course</header>
     <article>
      <h3>Getting Started Javascript</h3>
      <p>
        Combining the powers of HTML5 and awesome CSS styling to learn JavaScript constructs.
      </p>
    </article>

  <footer>
   Footer text: Footer for JavaScript course.
  </footer>
  </section>

4.Add a side note

Add a side note to the newly created section using the <aside> tag. Include the following side note text in it: JavaScript will make my web page interactive!

Answer:

<aside class="sidenote">
    <p class="sideinfo">
      JavaScript will make my web page interactive!
    </p>
  </aside> 
</code>

Codepen of all additions:

See the Pen aBXPyB by oscar (@nopity) on CodePen.

Exercises 2

1.Exploring more tags

We’ve already learned about the majority of HTML tags, the pre-existing ones as well as the ones new to HTML5. This first exercise involves the following tags/elements that we haven’t covered but that are very similar to the ones we discussed.

input type="file", input type="color", input type="url", <progress> and `.

For each of these input elements, provide an example of its usage in a real-life scenario; for instance, its usage for a banking website or a pizza delivery website. Also, for each of these elements, give two advantages of using them in our forms.

Answer:

See the Pen more tags by oscar (@nopity) on CodePen.

2.Creating a form

Create a simple form for a local fitness club to reserve courts. Use the template provided at the end of this block to get started. Ignore the CSS rules for now; adding HTML elements will automatically apply some styles but feel free to edit them. Add the following elements to the form:

Use fieldset to group the first three input elements together and give it a caption: Member demographics. Addlabels to describe the elements. Also, do not forget to add a submit button.

Answer:

See the Pen form by oscar (@nopity) on CodePen.

Exercises 3

1.Creating a canvas image

Create a canvas of width 300 and height 300. Add an appropriate border to mark the canvas boundary. Create four squares that split the canvas into four equal parts, each having the dimensions of 150×150. Color fill the squares with blue, gray, maroon, and aqua in a clockwise manner starting from the top left square respectively.

Answer:

See the Pen 4-square canvas by oscar (@nopity) on CodePen.

2.Creating a SVG image

Replicate the exact same steps but using SVG tags to render the image. Use alternate text to support older browsers.

Answer:

See the Pen 4-square svg by oscar (@nopity) on CodePen.