logo of initials
Matthew Pugh
About Portfolio Blog Contact Me
decorative purple banner

Week Four and Five: Jan 20th - Feb 2nd

Here’s everything that I worked on this week!

From our priority list last week…

  1. Create/Update Content
    • Visual Design for Educators
      • Shrink Scope
      • Flesh out content more
      • Finish storyboarding, wireframes, and mockups
      • Add Needs assessments
      • Add Kanban board screenshots
      • Add action map
    • More Resources
    • Update Resume
    • Add a testimonial to homepage
  2. JavaScript + TypeScript Basics
  3. Build Interactive Features
    • Hamburger bar
    • “Jump to” component for portfolio pages
    • Carousel on Formative and Summative Assessments page
    • Migrate content to content collection
      • Blog Post Preview Image
    • Add buttons to portfolio and blog pages
    • Add return to top button on mobile
    • Search bar for blog (tag, title, date)
  4. Refactor Code (Started)
  5. Web Accessibility

For later:

  1. Fix known bugs
    • CSS stylings not working on ipad 3rd gen on safari (more testing needed)
    • Boxes on homepage are too short on mobile landscape
    • Need same height for preview boxes on Blog
    • Overflow-y cutting off content on mobile
    • Images + Preview text are scolling on mobile (chrome Iphone X and chrome browser width: 638 and height: 2206)
  2. Google Search Console
  3. Style updates
    • Fonts and font sizes on different screens
    • Images in blogpost and portfolio -Add and center captions
  4. Learn Figma Shortcuts

Added Features

Hamburger Menu

I added a hamburger menu that appears on screens that are less than 750 pixels wide. While I was building it, I found that just using a click event listener would keep the menu open and would only disappear if a link was clicked to move to a new page. Instead, I decided to use mouseover and mouseout events on the hamburger bar and the dropdown menu. In case the user did not want to navigate away from the page, the menu would disappear as soon as the cursor left the boundaries.

Slideshow

Instead of using a rotated PDF viewer to show elements in landscape, I decided to start over and create a slideshow. I know that the JavaScript for this component is quite messy and I should go back and refactor it. Currently, I am using an extensive if -> else if - else function to use DOM to modify the display of different elements.

Added Content

In my portfolio item, “Visual Design for Educators”, I completed a needs assessment, created a Kanban board on Trello to track the project, developed an action map, and produced an a design document. I used Tim Slade’s Elearning Designer’s Academy posts on needs assessments, scoping a project, action mapping, and design documents to teach my self how to complete the Analysis portion of a project.

Once I finished the analysis portion, I revisited my text storyboard and outline. After reading and watching Tim’s posts and videos, I decided to restart both the storyboard and outline. In order to help me understand how eLearning should be laid out, I used Gagne’s Nine Events as a framework for organizing my content. I also decided to introduce two characters in the training. The first one, Maya, is a character the learner will help in the “Elicit Performance and Provide Feedback” sections of the course. The second one is Bea, our coach that will guide us through what Maya is asking for. By redoing the outline, it gave me a much better idea of what I was designing and helped with the clarity of the storyboard.

Currently, I’m using a template I made in Google Slides from my text storyboard, but I think I would rather use a flowchart style in the future. Because Slides is linear, I have trouble organizing the information when it starts to branch off.

Refactored Code

Most of my time this week was actually spent refactoring my code, using CSS Guidelines as a guide. I first started with my blog page and eliminated 51 lines of CSS. Then I moved to my footer, eliminating 218 lines. Finally, I started on the header, but I have not finished it yet.

I started the process by creating a styles folder in my project and moved the <style> tags for each page into their own CSS files. Unfortunately, I think that I did not do the best job testing, as I created a few more bugs that I need to deal with. In the future, I plan on auditing each page using CSSStats and YellowLab and then following CSS Guidelin.es.

Google Search Console

I registered my page with Google Search Console so that I could see where my page was appearing in search results and monitor if certain pages were not being indexed. I would like to learn more about how I can use this tool!

Things I found on my journey

Front End Mentor Challenges

Refactoring CSS from Smashing Magazine

CSS Stats

Yellow Lab

What’s Next

  1. Create / Update Content
    • Create raw content
    • Finish storyboard and wireframes
    • Add resources
    • Update testimonials, credit for moodboard images, resume
    • Proofread Piece 1
  2. Refactor Code
    • Audit Each Page (Started w/small scope components then larger)
    • Finish following CSS Guidelines
    • Revisit Global.css
    • JS hamburger menu and slideshow
  3. Bugs
    • CSS not working on Safari (3rd gen Ipad)
    • Blog
    • Home
    • Header
    • Footer
  4. Features
    • Jump To component
    • Content Collection
    • Blog + Portfolio
      • Read more Buttons
      • Return to Top button
      • Search Bar
  5. Learn More:
    • Git, JavaScript, TypeScript
    • Web Accessibility
    • SEO Optimization
    • Google Search Console
    • CSS Naming Conventions, Architectural Principles of CSS