DEV Community

GrimKillingbeck
GrimKillingbeck

Posted on

Days 10–12 of 100 Days of Code

Day 10 : Filepaths

I'm not really sure why, but this took a little time for me to grasp. Sure, I was able to remember that ./ is for the current directory and ../ is for the parent directory, but for some reason my brain thought the fastest way to do it was to copy the file path and just plop it in between the quotes for the src attribute for the img.

Once I took a deep breath, I realized that this is a lesson in patience and simply paying attention. I carefully looked at the directory and searched for the picture I need to add to the appropriate section:

File Path Directory

As you can see, there are pictures in a slightly confusing hierarchy of folders (the names), but I knew the next picture was a cat and so I entered ./. "Folder 3" popped up, which is where cat.png is located and viola! , the orange kitten appeared in my preview screen. I followed the same steps for each picture and finally finished the project for the day.

Screenshot of finished code and preview of project

Day 11 : Webpages

The goal was to make a simple "Welcome" site with an about me page linked to a picture of myself and a contact page with anchor text. We were told to try and figure it out on our own before googling, and I ALMOST had it! When I did google, I found that I had to put a right arrow and then add open an img tag, add the file and I also added the height attribute to resize the ginormous pic.

Day 11 Multi-Webpage Code

Here is the result :

Day 11 Multi-Webpage Results

Day 12 : All Together Now!

This is where we put everything we've learned so far into a horrible looking, 90's nightmare portfolio ( but I'm damn proud of it ).

To Do List
  • Create headings
  • Add anchor text to H3 headings that lead to files of past projects
  • Drag screenshots of my past projects to show case them under their appropriate headings
  • Add height attribute to resize images
  • Add anchor text that link to my About Me and Contact Me page

Code for my first portfolio page

It only took me about 10 minutes to put this together -- thank goodness for directory organization: there is a public folder that about the html files for my webpages and a folder specifically for my assets/images.

Here are my results :

Results for my first portfolio page

The most satisfying part of this project is finally uploading my project to GitHub! I have used GitHub before, but I have long forgotten how to use it as I was inconsistent with my practice.

Screenshot of my GitHub

As you can see, I've started and stopped learning a few times but I'm determined to be disciplined and consistent this time around.

Until next time!

Top comments (0)