Artisanal Hand-Crafted Website

A three-page website about women’s fashion, built entirely with my hands using HTML and CSS.

Project Overview

This was my first project in web development, where I learned the fun and the not-so fun parts scripting a web page using languages, HTML and CSS. Before beginning this project, I had no previous knowledge in coding, but I was excited to learn. I utilized resources like Free Code Camp and YouTube videos in order to really grasp the basic foundations of HTML. My goal for this project was to create something I was proud of, and it’s fair to say, I’m happy with the end result.

Challenges I Faced:

Because this was my first experience coding, there were most certainly challenges to overcome.

I struggled with aligning images that had different proportions in a way that looked cohesive together. With the help of Free Code Camp, I was able to see the importance of padding and border.
I couldn’t figure out how to add the hover selector to my header text and shape it so it looked how I wanted it too.
Every time I’d edit the background of my header, it was either too small or too big. After googling and looking around on Free Code Camp, I found my error and was able to fix it.

What I’m Proud of:

It wasn’t all bad. I really am proud of my first website.

The overall aesthetic and look of my website.
How I was able to arrange the images on my style inspiration page to look clean and cohesive after struggling for a good amount of time to fix them.
The qualitative elements I added such as italicizing words, adding captions, lists, and fonts.
While it is simple, the easiness to navigate between each page.

Let’s walk through the process

I wanted to keep the website simple, yet still look pleasing to the eye. I didn’t run into much trouble with my home page, besides the hover effect and background on the navigation bar.

Below is the CSS code for my navigation bar:

.text:hover{
    background-color:#D2042D;
    padding: 10px;
    object-fit: contain;
    border-radius: 10px;
    color:honeydew;
    font-weight: bold;
}

header{
    background-color:#ffbe98;
    padding: 15px
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:left;
    font-size: 15px;
}

li{
    display: inline;
    margin-right: 10px;
}

My second page was my least difficult. This is where I focused on margins, padding, and image sizing. I used the same CSS from my home page, like fonts and color, on this page as well.

With all these images of various sizes and proportions, I struggled for a long time to align them evenly in a way that didn’t look messy. My vision was similar to a pinterest board. I played with adjusting each individual image size, padding, and margins.

After problem shooting for what felt like forever, I landed on this CSS code:

.style-guide img {
    width: 150%;
    max-width: 250px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    padding: 5px;
  }

Things I Learned:

I learned a lot, but here are the highlights

Lots of patience when I kept running into coding errors and had to go back through my code line by line to see where I went wrong.
Styling text with hover effects, fonts, sizing, and colors to take a webpage from boring to interesting.
The importance of the CSS box model like padding and margins when adding various elements like images and texts.