Shedman
projectsFor this project, I was hired by a local business as a web developer to update their aging website and to create a responsive design that would improve SOE as well as give it a cohesive experience between desktop and mobile.
Languages
- HTML
- PHP
- CSS
- JavaScript
- MySQL
The Build
For this website I was tasked with creating 4 pages a welcome page, product page, gallery/showcase page and a “offerings” type page (shows all the different materials and accessories available). For the design I settled on a simple material “card” design, a very simple and fast design that translates well between desktop and mobile. Most of the website was fairly simple static content however the gallery would prove difficult. The client wished to have a gallery where they could post their collection of photos of products they created but also filter through them based on the design, materials and so on.
The Gallery
Tasked with creating a dynamic gallery where images would have “tags”, this would allow them to be filtered on those “tags” based on a selection of categories. To achieve the dynamic loading I decided on having php pull information from a MySQL table that would link an image and their tags together. The table would only store a link to the photo as well as contain a column for each category that would be filtered on. From there I created a php file that would load the first 9 rows of the database. Each filter would be stored in a session to allow the filters to persist across pages.
Conclusion
This website helped demonstrate my web development skills and my ability for front end design. The gallery was also a fun challenge and great learning experience that furthered my knowledge on dynamically loading content into a page. This was also a great learning experience that taught me how good responsive design greatly helps with SOE results as the website jumped to the top result in its area only losing out to sponsored ads.