India

I developed this website in HTML and CSS to experiment with the Parallax scrolling effect and displaying multiple background images on a page. The site showcases India’s geographical location, history and culture and food.

Tools:
HTML, CSS, Photoshop, Balsamiq



The Process

I used CSS background-attachment: fixed property to keep the images fixed while the text scrolls over them.

Typography

Navigation font: Roboto

Headings font: Roboto

Body font: Roboto

Color Palette

Responsive

Challenges and Learning

I learned how to create Parallax scrolling using multiple images.

Movigil – Business Site

This site has been developed for a small startup company. The site is fully responsive and showcases company and product information. It is still in development stage.

Tools:
HTML, CSS, JQuery, Photoshop, inDesign



The Process

The client wanted a simple website showcasing the product an product information. I used inDesign to create mockups. The logo and images were supplied. I created a slideshow to display the product images. The site is still in development, awaiting information regarding extra pages.

Typography

Navigation font: Roboto

Headings font: Roboto

Body font: Segoe UI

Color Palette

Responsive

Challenges and Learning

The client was unsure of how to showcase the company and product information. Being new to design myself, I created a simple, easy-to-navigate, user-friendly site.

The Slideshow was a bit of a challenge. I managed to create a cool slideshow with help from Stackoverflow.

I learned how to link the contact form to email address on Submit using PHP code.

New Zealand

This was the first website I developed in HTML and CSS; it is not responsive. The site showcases New Zealand geographical location, culture, attractions and interesting facts.

Tools:
HTML, CSS, Photoshop, Balsamiq



The Process

I used Balsamiq to design and create the Wireframes. Being new to design, I kept the design simple.

Typography

Navigation font: Verdana

Headings font: Lucida Sans

Body font: Verdana

Color Palette

Challenges and Learning

I had some issues with getting the background image to fit nicely on the screen.

Food Explorer

This one-page fully responsive website was a group project for the BCIT Technical Web Design Program. I worked with another team member. The goal was to match the website as closely as possible with the mockups supplied.

Tools:
HTML, CSS, Javascript, Sass, Github



The Process

Working on this project with another teammate, we each took up sections of the development.

Our instructor helped set up the project on GitHub and Sass. We then worked on setting up the HTML and other shared files together, after which we individually worked on our parts. I worked on the body content, footer and part of the sidebar. Commit to Git was done once at the end of each day,

Mockups (supplied) as below:

Typography

Navigation font: Roboto Condensed Bold

Headings font: Roboto Condensed Regular

Body font: Roboto Light

Color Palette

Responsive

Challenges and Learning

The body content images were a slight challenge. I initially planned on doing it using CSS grid but I was having issues with aligning the images and also the sidebar. So, I decided to use CSS Flexbox instead, which worked well.

This was my first time using GitHub version control and I did have some issues with setup and merge conflicts.

Top