04 May 2020

Phase 1: Build a Resume Webpage

Mohamed Muhannad

In this phase, I’ll be making a resume web page for the #CloudResumeChallenge

How do I Web Dev?

Disclaimer: What I most know about web development, would be just the HTML tags. I could build a raw webpage if you asked me to.

But web design and CSS? 😵 No clue! It’s amazing that there are people who can make beautiful and delightful looking webpages and apps.

Figuring out a layout

There’s plenty of layouts and content you can find for resume if you do a Google search. Based on most samples, I created the following sections:

Heading / Introduction
Education / Training
Skills
Work Experience
Projects (Freelance)
Contact Details

Next I made a small mockup of how it would look if I entered it all into a Word doc (think headings, paragraphs and tables).

Then it was basically translating this to raw HTML. It’s just paragraphs, unordered lists and tables really.

Put some CSS sauce on it

Like I said, web design is not really my strong suite. So I started a bit of reading on W3 Schools CSS Tutorial. This gave me the general idea on how you could apply styling elements on HTML tags. Ok, now I got my colors, fonts and text-directions in place.

Next was working to seperate each section into a card style. This is where the concept of <div> came in, and it was a bit difficult to wrap my head around the various techniques to make a webpage layout.

Like the days back in college, we refer to our classmates work to get an idea how others did their assignment. Once again, W3 Schools sample grid layouts was extremely helpful and I was able to modify some of the examples to make it look as how I wanted it to.

Then it was time to add some color to the webpage. For this I referred to couple of color palette generators, and used them on the CSS stylesheet where necessary.

Final Look

I was getting into tweaking changes here and there as I was starting to figure out how things worked. But there was plenty left on the challenge. So I decided to end my experimentation and lock it in as the final render of my resume webpage.

Next up, I’ll work on hosting this on AWS.