Web Development (1)

/ Web Development / By

Why this blog?

This blog is about my daily progress in my web development course. I will write down what I learned on day 1 and so on.

About Course

This course is available on YouTube for free, and it covers web development from basic to advanced. The course instructor is Harry. The YouTube channel for the course is "CodewithHarry" , and the link for the course playlist is "https://www.youtube.com/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w" 
.The course is in Hindi, but the captions are available in English. If you want to learn web development and don't know where to start, I highly recommend you see his videos of this course, as this doesn't cost you anything. And I really appreciate Harry Bhai providing us with such a wonderful course.

Day 1

I covered videos 1 to 8, in which I learned:

  1. Visual Studio Code cool tricks
  2. Basic structure of html
    1. The use of h1, p.
    2. Inserting links by use of "Link name ( I used ' in <' to write the structure.
  3. Inserting Images, Lists, Tables
  1. To insert image use ("alt" is used when your image doesn't load on browser.)
  2. List are of three types:
    1. The use of is to make list in these functions below.
    2. Ordered
    3. Unordered
    4. Third
  3. The form (it can be post or )
    1. A structure of form as example
    2. The structure I used for this is


  4. About SEO and Core
  5. About Inline and Block elements
    1. Inline elements are those that occupy only the space they require.
    2. Block elements take up full space.

I write the complete code here:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Document</title>
  </head>
  <body>
    <div style=”color: brown”>
      <ol>
        <li>Visual Studio Code cool tricks</li>
        <li>Basic structure of html</li>
        <ol>
          <li>The use of h1, p.</li>
          <li>
            Inserting links by use of “<‘a href=”link here”>Link name<‘/a> ( I
            used ‘ in <‘ to write the structure.
          </li>
        </ol>
        <li>Inserting Images, Lists, Tables</li>
      </ol>
    </div>

    <div style=”color: brown”>
      <ol>
        <li>
          To insert image use <‘img src=”image name” alt=”about image”> (“alt”
          is used when your image doesn’t load on browser.)
        </li>
        <li>
          List are of three types:
          <ol type=”a”>
            <li>
              The use of <‘li><‘/li> is to make list in these functions below.
            </li>
            <li>Ordered <‘ol><‘/ol></li>
            <li>Unordered<‘ul><‘/ul></li>
            <li>Third</li>
          </ol>
        </li>
        <li>The form <‘form action=”post”><‘/form>(it can be post or )</li>
        <ol type=”a”>
          <li>A structure of form as example</li>
          <form action=”post”>
            <label for=”name”></label>
            <input
              type=”text”
              name=”name”
              id=”name”
              placeholder=”Enter your name”
              autofocus
            />
          </form>
          <li>
            The structure I used for this is <‘form action=”post”>
            <br />
            <‘label for=”name”><‘/label>
            <br />
            <‘input type=”text” name=”name” id=”name” placeholder=”Enter your
            name” autofocus>
            <br />
            <‘/form>
          </li>
        </ol>
        <li>About SEO and Core</li>
        <li>About Inline and Block elements</li>
        <ol type=”a”>
          <li>
            Inline elements are those which occupies only the space they
            require.
          </li>
          <li>Block elements takes full space.</li>
        </ol>
      </ol>
    </div>
  </body>
</html>
 
If there is something wrong feel free to tell it. 

Day 1 Quiz 1

Question: Without using br tag, write a vertically aligned form asking for name, city and pincode of a user. Quiz 1 - Form

Details

The code I used above for quiz is:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Quiz 1 – Form</title>
  </head>
  <body>
    <h1>Details</h1>
    <form action=”post”>
      <div>
        <label for=”name”>Name</label>
        <input
          type=”text”
          id=”name”
          name=”name”
          placeholder=”Writer your name”
          autofocus
        />
      </div>

 

      <div>
        <label for=”city”>City</label>
        <input
          type=”text”
          name=”city”
          id=”city”
          placeholder=”Write your city name”
          autofocus
        />
      </div>

 

      <div>
        <label for=”pincode”>Pincode</label>
        <input
          type=”number”
          name=”pincode”
          id=”pincode”
          placeholder=”Write your pincode”
          autofocus
        />
      </div>

 

      <div>
        <input type=”submit” />
        <input type=”reset” />
      </div>
    </form>
  </body>
</html>