I have been working with websites since the early 2000’s when you had to upload files manually and use Dreamweaver if you needed help coding. Since then I’m most familiar with WordPress as a CMS, but in 2018 I started learning how to code and do more technical things by earning two certificates from JCCC. I completed a certificate in Web Technologies as well as Web Development & Digital Media. Learning how to hand code HTML, CSS, & JavaScript really helped me be able to take more control over website layout and design while still letting a Content Management System like WordPress manage the content. One area I am very opinionated about is in regard to responsive design so that no matter what size screen you are viewing a website from, the design looks good. This means that you will essentially create at least two if not 3 or more layouts that change based on the size of the viewport (screen).
The most extensive example of my web development skills is at kcascension.org. This is the website for the church where I have worked for over 9 years. I launched the site in 2014 and it has taken on several layers of updates as we have wanted our parishioners to be able to do more with it. Most notably, the home page is a landing page for this vibrant parish’s activities. There is a video banner that has a poster image while it loads. On a wide screen monitor, the video is a cinema aspect ratio. On more of a tablet or small laptop screen it is HD 16:9. On a phone size screen it changes to a square. These are all different video files that are served when the screen size is detected by the web browser. Ah, but mobile devices don’t play regular video files very well especially over a cell network, so I have an additional h.265 codec file for mobile devices. If a web browser is simply minimized on something other than a phone, then it won’t play an h.265 file. It’s not compatible, so to overcome this challenge I created two square ratio files and wrote a JavaScript function to look for a mobile operating system such as iOS or Android in order to serve the appropriate file. The home page is also responsive in that there are sections of images in flex boxes and other content is designed with grid layouts to shift depending on what size the screen is. I incorporated Gravity Forms into this site for forms. I also embed a lot of YouTube videos and designed a custom CSS styling for the videos because YouTube’s default layout doesn’t look very good on many different size screens. Finally, most of the home page is hand coded using html blocks in WordPress so that the content could be designed to make the most of whatever size screen the viewer may be using. A good example of CSS Flex Box is on the Staff page where the figures of each staff member that I took shift around as you adjust the size of your browser window. An example of a responsive layout with the video player embed is the Stewardship page. If you adjust the width of your web browser window you’ll see the content of the page shift and eventually stack vertically for a mobile viewport. The YouTube video player grows and shrinks as the page width changes. Obviously I’ve poured a lot of blood, sweat, and time into this website!
Here are some other website examples:
- Responsive Web Design with Digital Media was a final project for my first web design course that demonstrates how to incorporate different types of media into a website so that they look good on any size screen. This project was entirely hand coded in HTML & CSS.
- CSS Grid Layout is site I created for a midterm in one of my classes at JCCC. I still refer to this for reference. It’s a quick guide for responsive layout design. It’s also a one page website where each section is sized to be 100% of the screen that you are viewing it in, so that it appears to be different pages, but if you scroll you can see that it’s just one big page with multiple sections. I also hand coded this project.
- JavaScript Game was my final in my first JavaScript class. You can see how JavaScript is the language that developers use to interact with a visitor. This was a basic hand coded project in HTML, a little CSS and JavaScript.
- JavaScript II Final is a more advanced hand coded project where I have one web page that continues to change as the user interacts with it so that you can see the many different things that developers can do with JavaScript code.
- CSS Final was a hand coded project where I chose a non-profit organization, studied there website and then hand coded a new version of their website and wrote a paper explaining the process.
- martincookbook.com is a really basic site for sharing and archiving our favorite family recipes. We started it as our kids started getting older, going to college, and venturing out on their own.
- worshipmusicministry.com is an old music blog site that I used as a portfolio for worship leading. It’s built with WordPress. I have hair in the photos if that’s an indication that it’s not current 😉