Some days I feel like I’m making great progress in learning web dev, and like things are really clicking into place. Then there are days like today…

I’ve started playing around with building a site. It’s pretty basic, but it’s helping me get my head around how all the pieces fit together. It’s also getting me looking things up on the internet, and finding out about even more great resources!

You can visit my page here. It’s only the homepage at the moment- I’d like to get all the elements there set up exactly the way I want it before moving on and creating the additional pages.

Even though there isn’t very much on the page, I’ve learned quite a bit already. The first problem I ran into was when I tried to do this:

.navbar {

position: fixed;

margin: 0 auto;

}

I was trying to make a navigation bar which would:

• stay at the top of the screen
• stay in front of any text which might scroll up
• be centered
• and not take up the entire length of the screen.

Happily enough, after a bit of googling I found out that this is a pretty common problem- fixed position and auto margins just don’t play nice together. The solution in my case just involved moving one line of code- I placed the navigation bar inside the main div. Then I positioned the main div (setting the width in % and side margins to auto,) and set my navbar position as fixed and its width the same % as the main div.

It was a pretty easy problem to deal with, but it helped me work out how things are positioned on the page and within divs.

I’ve also been thinking a lot about the best way to make the page display properly on different screens. I used percentages for the width values so that elements would fit with a nice margin regardless of screen size. However, in the case of my navbar it only displays properly down to a certain width because of the menu. I’m not sure exactly how I’m going to fix that yet, or if it’s something I’ll need to change completely, so any guidance would be much appreciated!

I’m also trying to position my images better. Vertically, I want the background colour to be only behind the text, and horizontally extend slightly beyond the image. I also want the text vertically centered, so that the photo extends equally above and below the background color. I’ve managed to get the photo where I want it horizontally, but the vertical positioning has just been done by adjusting the margin, which makes it non-responsive. I have a feeling I’m going to have to nest each section inside of a div, but I haven’t figured out quite where to go on this one yet either.

New Resources:

W3Schools has been getting visited quite a lot in the past few days- I’ve just started leaving a browser tab open for quick referencing. It’s been really helpful when I’m not sure about something which is straightforward.

For things which aren’t as straightforward, I’ve been finding myself on Stack Overflow after a quick google search. It’s great because there are so many people volunteering different ways to do things- I’m pretty sure any issue I’ll ever run into has been raised (and resolved!) on Stack Overflow!

I’ve also just discovered the CodeNewbie community- last night actually, but I haven’t had much of a chance to explore it yet.

If anyone’s managed to make it through this post, thanks! Do you have any go-to resources for when you get stuck? (or any tips for me?)