Solution to the Problem
For this course project, we created a style guide where we detailed design decisions such as the fonts, colors, logo design, storyboard for the web site and all wireframes for a mobile, tablet and desktop version of the web design. After sketching several options on paper, I created the wireframes for this web site using Adobe XD (a wireframing and prototyping application). Next, I designed the HTML and Cascading Stylesheets (CSS) using a "mobile first" design technique using Brackets, a freeware modern text editor for web design and development. Media Queries in the CSS for tablet and desktop were then developed to create breakpoints where the design would respond to these two additional screen sizes in addition to the mobile design. I programmed in the progressive enhancements made to the site including the JavaScript which supports the mobile collapsible menu and the inclusion of a Google Map <iframe> to display the location of the business. With JavaScript disabled these two features gracefully degrade back to the baseline user experience of a non-collapsible mobile menu and a static map to display the business location.
I also designed the company logo using Adobe Illustrator CC along with the Clear Sky coupon designed in Adobe Photoshop CC and created all of the product imagery using photos I have taken.
This responsive web design course project can be seen at: Clear Sky Website
Feedback From Others
"Thomas, I was happy to view your completed Course Project 1! Your site has a very professional feel to it and it's great to see all of your responsive code and form elements working properly. Great work on pulling everything together!"
- Mike Lavella, DeVry University Instructor (5/2018)
"I truly enjoyed your website. I liked how you added a link for your coupon so it can be printed out. I see you kept continuity with your colors and fonts they work very well with your window cleaner theme. The website is easy to navigate and its not overdone. Good job."
- Alma Soto, DeVry University Student (5/2018)