Photo by Josh Swift

Manila’s Web Developer

This project, Manila’s Web Developer, started when I was second year in college in my JavaScript class. Our professor asked us to build a portfolio website. And this is the second website that I built on my own using HTML5, CSS and JQuery.

The goal of this website is to integrate some features using jQuery and jQuery UI. That’s why if you look at the head of my page, there are so many CDN (Content Delivery Network) links.

This website has a text logo, Manila’s Web Developer and five navigation menus; Home, Marketing, Web Development, About Me and Let’s Talk. Home and the logo brings you to the same destination which is the index page of this website.

The structure of each page is pretty similar to each other. We used huge background images where I got them from Unsplash. The content area are just two sections of text with a photo beside it.

During that coding part, I was having a hard time to deal with the photos beside the text. My photos are larger than the space the text are occupying. That’s why the next section are overlapping with the first section. I think I must revisit that website again to make it, hmm, stable? I guess.

There’s a blog so I put a little form in each page asking for first name and password. I used JavaScript to validate the user input. I also used jQuery to show and hide texts in processing the user input.

And I used a jQuery plugin to animate my welcome message in homepage to move to the right when it loads. It also feels good to have smooth page transitions. Soon, I’ll be writing about how to add page transitions in your website.

So let’s talk a bit about the aesthetics of the website.

I used Google fonts because it’s free. Back then, I was just picking up fonts I like.

Font Styles

  1. Roboto Slab – for headings and subheadings
  2. Roboto – for the content
  3. Parisienne – for the quotes

Feel free to get these awesome, free fonts from Google Fonts.

And I was really inspired by the color scheme of A List Apart. I really like it before. It feels simple. It maybe dull but I feel those colors are so comfortable when reading text.

Color Scheme of Manila's Web Developer Website

CSS Resets are important to reset the styles set by the browser. I used Eric Meyer’s CSS Reset. I like this one because it’s short. Still, I recommend customizing it based on your needs.

This is a simple website. And I hope to those beginners out there, be inspired and create websites more beautiful than this.

I’ll be posting soon the mockup of this website because I haven’t hosted it in my hosting. So please bear with me. Haha.

Advertisements

4 thoughts on “Manila’s Web Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s