Out Loud Designs. Web Design & Development Student

Natasha Martin Portfolio

This was a really fun site to create because Natasha had a completely blank slate to start from and use what she’s learned in the Francis Tuttle program to design and develop the site. She had just recently learned PHP and couldn’t wait to try out her new skills!

She began by determining what the basic flow of her site would be, what main pieces of content she wanted to include and how she wanted to organize that content. From there she determined what her main navigation items would be and then started browsing through stock images for a logo inspiration. Once she created her logo she began coming up with a color scheme.

She then started setting up a basic folder structure for all of her PHP and CSS files that (during the process) she realized she could duplicate and utilize in future projects to save time. HTML5 elements were used to create the markup. Once the basic structure was set up she began working with CSS to design the site container, navigation and logo placement.

All pages on the site share the same header and footer PHP files and many of the pages share a sidebar PHP file as well. She has a header include file that pulls the PHP file name for each page of the site and assigns it as a page id – this also allows her to target certain pages on the site with specific code snippets or blocks of styling.

She used facebox.js for the Portfolio page and lightbox.js for the Photos page and included special styling for users viewing the site with JavaScript disabled. Normally she would only use one JavaScript option throughout the site, but she wanted to try both to compare functionality and ease of use.

The contact form utilizes reCaptcha APIs and form validation. The calendar seen in the sidebar points to a page with a Google calendar where events are managed from within Google’s admin pages so you can import events from groups and organizations that also use Google without having to enter each event separately. This also allows users to save those events to their own calendars.

To finish off the site, she created a custom 404 page to display with a link redirecting the user back to the home page. She added a mobile CSS file that pulls in based on the viewport size, but would like to eventually create a mobile app for the site when she finds the time. Check her website out to learn more about Natasha!