The Journey

Moving to web dev

Manmohan P M's photo
Manmohan P M
·

4 min read

Introduction

  • So, in during my travels through knowledge about computers I stumbled upon web dev and decided to dabble in this art.

  • While looking for the first steps to learn it i happen to find a course by Angela Yu for full stack development in 2024.

  • And as anyone would i took the course I've reached about the 10th module in it at the later part of CSS.

  • But today im gonna walk you through my process of making a portfolio page for myself with nothing but HTML.

Overview

  • So this website will contain three pages :-

    • Home

    • Hobbies

    • Contacts

  • Home is landing page which contains links to the other two pages.

Home

  • So first i started with the default HTML boilerplate you get from VS code (! + enter).

  • Then i changed the title to "My Resume".

  • I started my portfolio with my name and picture

  • My name in an H1 tag and an image right after.

  • I then put a horizontal line to divide the image form the next section which is the summary whose title ("Summary") has enclosed in an H2 tag and contents in a p tag.

  • I followed this pattern of adding a horizontal line after each section and heading in H2 and then the content.

  • The content in skills, Education and certificates i put in an unordered list.

  • Now at the end i put the two links to the other page and a footer with my name on it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Resume</title>
  </head>
  <body>
    <h1>Manmohan P M</h1>
    <img src="./assets/images/MyPicture.jpg" />
    <hr />
    <h2>Summary</h2>
    <p>
      I am a Computer Science student from india starting his 3rd year soon. I
      aspire to be a Cyber security specialist and am currently in the process
      of learning all the pre-requisites.
    </p>
    <hr />
    <h2>Education</h2>
    <ul>
      <li>2022-now Christ (Deemed to be) University, Bangalore</li>
      <li>2020-2022 St. Antony's Public school Kottayam</li>
      <li>2009-2020 Viswajyothi CMI public school Angamaly</li>
    </ul>
    <hr />
    <h3>Skills</h3>
    <ul>
      <li>Python</li>
      <li>C</li>
      <li>Java</li>
      <li>SQL</li>
    </ul>
    <hr />
    <h3>Certifications</h3>
    <ul>
      <li>
        Google cyber security course on coursera
        <a
          href="https://www.coursera.org/account/accomplishments/specialization/LK9VKTA4J4PW"
          >-link</a
        >
      </li>
    </ul>
    <hr />
    <a href="./public/hobies.html">Hobbies</a>
    <a href="./public/contacts.html">Contact</a>
  </body>
  <footer>
    <hr />
    <p>Manmohan P M</p>
  </footer>
</html>

Contacts

  • Now the contacts page is probably the most weirdly small page in this.

  • It simply has my email address LinkedIn and GitHub.

  • With titles in H4 and a link right after

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Details</title>
  </head>
  <body>
    <h4>Email</h4>
    <p>manu6520042@gmail.com</p>
    <h4>LinkedIn</h4>
    <a href="https://www.linkedin.com/in/manmohan-p-m-78618323a/"
      >Manmohan P M</a
    >
    <h4>GitHub</h4>
    <a href="https://github.com/P-M-Manmohan">P M Manmohan</a>
  </body>
</html>

Hobbies

  • I lied this is also a very weirdly small page

  • I has the title Hobbies in an H1 and the content in an unordered list with p tags under each item.

  • I swear i thought it was a good amount of text until i made it full screen...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hobbie</title>
  </head>
  <body>
    <h1>My Hobbies</h1>
    <ul>
      <li>
        Art
        <p>
          I like to draw in my free time it could be with graphite on paper or
          digital. I also paint sometimes. I definitely wouldnt consider myself
          good at any of these but im simply happy to be able to do it.
        </p>
      </li>
      <li>
        Anime/Manga
        <p>
          I started watching anime from when i was around 11 or 12 after which i
          slowly moved to manga. The first anime i watched was Naruto and the
          first manga i read was demon slayer. Anime also sometimes given me
          inspiration to draw.
        </p>
      </li>
    </ul>
  </body>
</html>

Conclusion

HTML5HTMLWeb DevelopmentBeginner DevelopersportfoliowebsiteLearning Journeylearning