Week 3: Basic HTML/CSS Website – Hannah Kasak

Here it is 🙂

Making this website, like almost everything with coding, was fun but involved a lot of trouble shooting. There were a few cases where I made a seemingly small change in value (like the sizing of an element) that ended up having a major impact on the layout.  For example, I wanted to change the margins for the photos on my about page, but this ended up exceeding the height of the container. I resolved this by reducing the height of the footer and increasing the height of the navigator and content. 

I was also torn between adding containers to the style.css file and making a new file for different webpages, since I thought this would make it less cluttered. I decided to just add more to the existing style.css file so that I could styles from elements on other pages. This ended up being a good move, I think, because it would have become tedious to repeat many of the style features (like color, outline thickness, etc) that I wanted to keep consistent throughout the site. 

I also tried to figure out ways to do something without looking online first. One of my failed attempts  was make the link text change color when hovered over with the mouse by adding 

.profile-box:hover{
background-color: steelblue

a{
color: seashell;
font-family:sans-serif;

}

to the CSS file, but it seems that text related values cannot be added within a container. This is something I would like to keep looking into though, and also how to make an image a link in itself.  Even though I know relatively little about coding, I like trying to do it without initially looking for online sources because I find it is a good way to think about how the code is being read, and makes me retain better what does and does not work. 

Above are the photos on my about page with the links leading to external sites. I ended up using “.profile-box:hover” to make the background of the link change color rather than the link itself. 

I was also pleasantly surprised by how well our previous exercise in CSS prepared us to make a variety of layouts, because the shapes and sizes of elements can be so easily manipulated. I initially spent a lot of time trying to figure out why my aboutpage images were aligning in a column rather than a row, despite using flex-direction: row. It was especially puzzling because I wasn’t having that problem with items on the portfolio page, even though I was using the same properties (below). It turned out to be that I needed to add “float:right” although I’m still not sure why I was only having the problem with one page and not the other. 

In the end I was able to resolve the issues I ran into and create a simple but (I think) nice looking site. I’m excited to apply this in the future as well!

Leave a Reply