Digital Legos

Cody King
2 min readSep 29, 2020

For this project I wanted to recreate my portfolio with different frameworks and libraries to make it look a little more professional. After looking through a few different libraries, I chose to utilize w3schools because I have used it in the past and am familiar with how the website is organized and how it operates.

There were a few problems that arose throughout the course of this project. The first thing I added to my website was a fully extended header with an image and text laid over. I then added four equal columns floating directly next to each other below the header. In each of these columns I placed a bordered box around a single image with a linked text below the image. The format of this code reflected itself onto my header, which caused quite a few problems for me. The bordered box was now surrounding the header so the image had a black outline instead of fully extending across the page. I tried to fix this multiple times, but everything I ended up changing both the header and the columns below. When I would get the header to look how I originally wanted it, the four columns would reorganize themselves into three. Eventually I decided to settle with the boarder around the header and continue on. I then added a top navigation bar to reflect the links placed under the images within the four columns. I have not linked all those tabs or texts to new pages, but I did do it for the first category so that you guys could see the direction I wanted to head in. When creating the photoshop page, I wanted to reflect my abilities through a grid of image examples, so I downloaded the code for an image grid and changed the top tabs to LV and SV (large view and small view). I didn't experience any problems creating this page and I think it turned out quite well. On the CSS side, I did try to move all of the style components into my style sheet so that I could clean up some of my HTM, but for some reason this action would change all the fonts and text sizes without actually changing any component of the code.

All in all, I really enjoyed this project and wish I had more time to explore different options and resolve some of the problems I ran into. However, by entering this code line by line I was able to gain a deeper understanding of some of the libraries that I was using and how to manipulate that code into something more advanced and visually intriguing. I cant wait to keep challenging myself and strengthen my abilities throughout this course.

--

--