October 7, 2020

What I learned: September 2020

This past month has been a crazy month to say the least. Getting Harmony off the ground while having a busy month in school was a feat on its own. This month I have been working on a new portfolio project where I was tasked with building a website from the ground up. The project included a style guide and folder with some image/icon assets. The first step was selecting which theme I wanted to model my site after. The choices were limited to an automotive theme, a hiking theme, and a band theme. I had chosen the hiking theme and got to work looking for my inspiration. 

Style Guide

After I had found my inspiration for all my pages of the site I had to create a GitHub Page to host the site that was attached to my GitHub repo and upload all assets and the project folder structure too. Version control is crucial in any hand-coded project as it allows me to swap between my laptop and my desktop to work on the project depending on when and where I was able to work on it. But, it also has many other benefits including the ability to roll back unwanted changes and the ability to push even while offline. This can be extremely helpful when the internet is unavailable but also keeps your work secure. 

Once the project structure inside the repo was set up, I was able to get started on the meat and potatoes of the project. I began with getting my HTML structured out for each page. HTML is designed only to hold the structure and content of the site such as text, headings and some pictures. This is important because some people rely on screen-readers to read through the information on the site for them and that directly reads the HTML content. So, keeping it as clean and semantic as possible is critical in creating a clean site. 

Html Example

The next order of business once all the HTML is created is to start working on the CSS which is responsible for the styling such as colors, images for the background, and fonts. CSS should be used for inputting images that are not considered “content” and icons for social media. This is to assist with the screen readers’ ability to output only the important information. CSS takes quite a bit longer to write as a section needs to be written for nearly every element that you want to change. Such as moving your text to be centered or shrinking the size of images. I found it easiest to just work from the top to the bottom of every page to effectively style the pages. I also broke everything up into separate sheets for each page to do my best to reduce the potential for information being duplicated and causing errors in the site. The hardest part of CSS was that it seemed like every time I fixed one issue I would somehow create another. But after a few hours of adjusting and cleaning up the semantics the site was complete. Mostly. The final touches in a normal scenario would be to implement JavaScript and attach event handlers, create forms to submit information, and get creative with scripts to bring the site alive. This project was centered around design and didn’t include any JavaScript, but JavaScript has been pounded in my head for the last year and I look forward to the next project where we tie everything together and start creating fully functional sites. 

Link to the project here --->   tylerb1990.github.io

Tyler Bunker
President and Lead Developer

Ready to get started? 👉

Work With Us 💜