Learning and Project Update

Last Two Weeks

After the last Homebrew Website Club Baltimore meetup I said that I was going to make sure to get back on track for documenting my learning every few days. The last two weeks I’ve been working more on doing projects and less on documenting learning. I realize that each approach has its strengths, but looking at it now I realize that by not writing something in ways of updates I’ve been falling out of habit of regular writing.

I’m going to use this post as a chance to get caught up on both new learning experiences as well as identify progress I’ve made on projects. I continue to notice that there is a link between infrequent notebook updates and less frequent posts. I’m going to work to remedy this and iron out a process.

HWC Baltimore is meeting this week and this post will also include some short-term goals that I have before/after this week’s meeting. Let’s jump in!

Photo by Eugenio Mazzone on Unsplash

Learning Update

The last two weeks I’ve focused on two main areas: leveling up my UI/UX design skills and practicing front-end development. These two areas are perfect compliments and I’ve been able to take advantage of the obvious synergy. This past week alone I’ve become far more comfortable with (semi)modern CSS practices and I’ve been actively implementing new skills as I learn them.

I determined that I wanted to become more familiar and comfortable with some of the newer CSS frameworks through active practice. I found a few excellent videos from Traversy Media on YouTube, and worked through his tutorials on Skeleton CSS and Materialize CSS.

His approach to learning each framework is to create a cheat sheet to learn the components and then make a simple landing page with each framework. I found this system to be extremely effective, and I worked through both Skeleton and Materialize last week.

After using the same project structure both times, I decided to create a simple boilerplate project that I could use for practicing new frameworks. I turned this into a GitHub repo that can be cloned each time I want to explore a new framework via a simple project.

I really like Materialize CSS. It’s an up and coming framework that’s based on Google’s Material Design. I’m exploring these principles and plan to make some test landing pages and interfaces as I learn more.

I’ve been doing lots of reading about UI/UX best practices and design trends, and I have about 20 different articles that I’ve read on Medium over the last week. I’ll hopefully condense those into a post, as I found lots of great tips!

Presentations and Layouts

My colleague and I were discussing slidedeck design and what style elements make (or break) slidedecks. This discussion led me to some excellent Lynda courses, such as: Learning Graphic Design: Presentations by John McWade. I worked through this course and took notes about my own slides. This is particularly relevant timing as I’ve been working on redesigning our slide themes for DHF. I picked up some tips and also found that some of my instincts were solid as far as keeping slides simple with readable typography and high contrast (and minimal) colors.

Design Fundamentals

I’ve been growing more interested in design elements, and this has been a nice project to work on as I read/learn more about color theory and typography. Here are some other courses I’ve been working through on Lynda: Graphic Design Fundamentals: Typography by Ina Saltz and Design Aesthetics for the Web by Sue Jenkins. I found the typography course to be pretty interesting, but haven’t learned as much from the aesthetics course. I research and analyze a lot of websites and try to keep aware of modern trends, so I think that I’m going to instead study some traditional graphic design elements such as color theory and typography instead of watching courses about web aesthetics, as I absorb a lot of that through practice and observation.

I’ve really enjoyed working through these videos and projects and learning more. Instead of working in something like Illustrator or Photoshop I’ve been going straight into HTML and CSS. I’m most interested in design as it appears on the web, so I want to work in the end medium, at least for now. The exception to this is that I’ve also been working with Adobe XD to practice some of my UX design skills such as wireframing and prototyping.

Here are the GitHub repo links to the CSS projects I’ve been doing:

• Skeleton CSS Cheat Sheet
• Skeleton CSS Landing Page Demo
• Materialize CSS Cheat Sheet
• CSS Practice Boilerplate

Project Updates

I spent a lot of time last week getting a WordPress site up and running using the Roots ecosystem (Trellis and Bedrock). This architecture makes a lot of sense, but it’s quite different than most WordPress project structures. I went through lots of troubleshooting as I got a site working in development and then provisioned a server for deployment. I was never so happy to see a NGINX error message as I was last week once the site deployed to the server. I’m going to keep track of my experience in this process as it’s a completely new way of working.

Lots of new learning opportunities arose from this process. The Bedrock/Trellis setup uses Composer to manage plugins and themes, and that was completely new to me. I’ve used npm a lot, so I was comfortable with package managers. I worked through a quick Composer course by Morten Rand-Hendriksen to get familiar with the basics. I’m excited to keep exploring this workflow as I work on this project.

Earlier in the post I’d mentioned that I’ve been working on styling slidedecks. I’ve been working a lot on creating a theme for use with RemarkJS. This has been a great way to practice some of the slide layouts I’ve been learning about as well as continue to refine my Sass skills. I’ve also been learning more about using Remark in the process. I’ve got the general theme (typography, color, layout) where we like it, but I need to practice a bit more with Remark’s capabilities and API.

Short-term Goals

In the next week or two I want to continue working on the projects already mentioned in this post. I’m really excited to keep practicing with new CSS frameworks and I’m going to keep working on that. Additionally, I’ve been looking into React/Vue paired with WordPress, and may eventually switch my personal site over to a headless WordPress paired with something like GatsbyJS.

I’m going to work on researching that process a bit more during this week’s HWC. Since this post is already getting pretty long I’m going to end it here with a (hopeful) pledge that I get back on track (hopefully!) with more regular progress updates.