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.
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.
- Roboto Slab – for headings and subheadings
- Roboto – for the content
- 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.
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.