Today I accomplished two things. I bought these pants at H+M:
And I coded two webpages by hand – my first in preparation for starting HackerYou in April.
Webpage-0 was my very first page I made after completing the prescribed HTML/CSS readings and tutorials. I didn’t really intend for it to be one of the three I’ll eventually submit to HackerYou for my pre-course work, but instead I wanted to make a “traditional” site with a bunch of divs so that I could play around with CSS positioning. Here’s where I started (click on it to take a better look):
My first major hurdle to overcome was getting my nav bar to centre, be nicely padded, and oh yeah maybe just maybe be horizontal instead of vertical (it’s already that way in the above picture but trust me this took awhile). Eventually I figured it out, although I still don’t 100% get it and so I’m still needing to go back and review the code when I make my other pages.
Next I decided I wanted a sidebar, and I wanted a little grid of images with links to other pages. I picked this basically because I knew it was going to be difficult for me in terms of positioning. I googled stuff and read some answers on Stackoverflow when it didn’t work the way I thought it would, and eventually I got it to look like this:
I then took a little break and made another page which was just some elements in different colours that I used to play around with different types of positioning. Once I got it to this point I felt confident enough to try it on my site:
So getting back to the site, I figured out how to get the grid the way I wanted to (without using tables!) by positioning the sidebar absolute, giving it a big enough width, setting the display to inline-block for the list’s container, list-style:none; to get rid of the bullets and…yeah that’s basically it. Not sure if there’s a better way to do this, but it seems to work!
At this point I also started playing with the look of the site, although I’m trying hard not to go too far down the rabbit hole of design, as I can get pretty distracted doing so, and lose sight of the technical aspects. So as you can tell things aren’t quite centered and such.
I also had to fiddle a bit with the footer. Honestly I had no idea what was going on with the sizing of the various blocks at this point, but hey it was only my first day 😉
The full site:
So that’s my first webpage! I’ll go through my process for creating Webpage-1 in the next post. I’m already starting to understand positioning a little bit better than I did when I first started Webpage-0, but I have a long way to go! Thankfully I’m loving it so far!