Web Development

Where did you create this artifact?

These artifacts are websites that I hand-coded as the practical portion of an independent study which I undertook in the Fall of 2020, and a Dynamic Web Technologies course in the Spring of 2021. I wanted to improve my skills in HTML, CSS, and related markup languages such as PHP and JavaScript. In addition, I had interest in responsive design in both websites and e-learning courses. Having previously done research into responsive e-learning design for ICT 710 - Learning Technologies in the summer semester, I also wanted to learn how to code responsive content, not just build it using an authoring tool such as Articulate Storyline The primary goal was too gain advanced nuts and bolts coding knowledge that could open the door for content creation beyond the limits of an authoring tool.

What did you learn?

I had limited experience with hand-coding HTML and CSS prior to starting the course, primarily from editing and tweaking code in Microsoft SharePoint and HTML5 document systems in an enterprise intranet environment. I had built websites before using website creation tools such as Google Sites and Wix. This project helped put the pieces together for me, while also challenging me to step outside of my e-learning box and into the e-commerce domain. Each website needed to have a business goal, and according to the parameters of the projects set my instructor, would be in the form of a marketing site, since the primary purpose of most websites is to generate revenue either directly or indirectly. I decided to focus more on fun and pick a topic what was of interest to me outside of learning technology. I chose to create a website for a fictional equestrian merchandise store, primarily just because my daughter loved horses, and a website for a pet rescue.

How did you learn this?

The process for designing a marketing website require  creating navigation, architecture, funnel plans and having these approved by the instructor before moving to wireframing and prototyping, then finally development. For me this felt similar to the instructional design process I was used to using in the creation of e-learning courses.  It paralleled the Analyze, Design, Develop, Implement phases of the ADDIE model. In a real world work project, the Evaluation phase would be included as well. This reflection could be considered part of that last phase. The visual design aspects of creating a website were not new to me, as e-learning course design relies on the exact same set of principles. The main differences were the marketing funnel plan in place of the training needs analysis, using wireframes in place of storyboards, and most importantly not having the use of an authoring tool to supply me with pre-coded templates and elements. I used Adobe XD software to create the wireframes, and did the coding in Dreamweaver. The latter application I chose primarily of functionality like automatic tag closing and bug checking which just made the coding process a bit more efficient. I did all of the coding myself without using any of Dreamweaver's starter templates or other developer tools.

What were some challenges that you overcame?

The more I progressed into the project, the less I liked certain aspects of Dreamweaver, especially the design view, which rendered pages poorly. I learned quickly to render using the live preview mode or upload and test my site files on the FTP server to accurately view output.

At the same was I was working on each website project, I was doing labs and case studies assigned my instructor in various lessons on HTML5 and CSS3. The HTML5 coding was easy for me. CSS3 I found to be more challenging. Aligning and floating page elements were the hardest aspects, and an area that I still consider to be somewhat of an Achilles' Heel. CSS is not overly complicated, but in my view at least it is not very intuitive either. There are so many variables that go into the selectors, and everything effects something else, so if you fix one thing it could end up breaking something else. In the end, the code will always do exactly what you tell it to, but with CSS layouts this may be more complicated than it appears because the developer also needs to factor in rendering on different screen sizes and in different browsers.

Another challenge I'm proud that I was able to overcome was the self-management aspect of doing an independent study. Aside from major project deadlines, there were no other hard due dates such as weekly assignments. It was up to me to manage me time and set my pace for completing the labs and case studies posted in Canvas. Coming from an instructional design background I found this to be extremely liberating. I was free to prioritize my work completely asynchronously in a way that suited my learning needs, and not according to a preset course schedule. I loved being able work free of weekly time constraints.

How will you apply this information in the future?

From these experiences, I believe I gained additional business perspective as an instructional designer on the challenges of self-paced study that will help me to design better courses and programs in the future. A high level of self-study is challenging and not everyone may equipped to handle it. My past project management and study experience provided me with a foundation, but someone in a different line of work might not possess the same skillset, if for example, they lack the formal education or are new to the workforce.

The practical coding knowledge I gained form developing these websites is a skill I can definitely use in the future. With the intersection and of web and e-learning architecture, I believe there will be an increased need for HTML coding skills in e-learning, as well to manage to the platforms on which content is hosted. Even where hand-coding is not necessary, the more one understands what's under the hood, the better. Finally I will be able to apply this knowledge to learn to learn more advanced dynamic markup and database languages.