The image in this section shows the design process for this site, which includes a design for the front page of the site, as well as a design for an internal page template.I did this in Photoshop using the excellent artboards feature. You can see that I have design the look of the site for multiple screen sizes from large to small at the same time. This is used as a guide during the production process.
The next step in the process is to convert the design into HTML and CSS. To help with this process, I used the excellent Skeleton CSS Boilerplate, which provides a number of useful classes built in, including a responsive grid, that can aide in building responsive websites. The Skeleton CSS Boilerplate is similar to other popular boilerplates, such as Twitter Bootstrap, but I like this one better for teaching because it is simpler and students can get started with it faster.I created template pages for both the front page of the site, as well as an internal page. The finished front page can be found here:
http://meaddesign.net/bttrfly-htmlThe internal page template can be seen here:
http://meaddesign.net/bttrfly-html/page.html
The main challenge of this project, was to design a unique and interesting looking site, and then convert it into a WordPress theme so that the resulting site could run on top of WordPress, but not look like just any old generic theme.You can see the completed theme, running in WordPress here, and although there is plenty of additional work to be done, and content to be added, all the pages function, the blog functions, and the front page displays the most recent blog posts.The demonstration also included a segment on the proper way to include jQuery scripts in your WordPress theme, and this is shown through the navigation, and the site looks and works well for mobile users.
If you are interested in this lesson, you can download all the lesson materials (8.1Mb), and you can download the PSD file (requires Adobe Photoshop CC 2015, 31.3Mb).
This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.
I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.
