Todays Progress: Internal Links, Content Spaces and Making My Life Easier

Today has been another good day of developments on my site. Mainly I've been working on creating the colour content sections that appear below the main, central banner.

I had a few issues when creating this.

I keep forgetting to close the <div> tags.
No doubt, one of the most common issues I've had with simply building this site in general is my habit of making typing errors, constantly. For this, though, I've found Google Chrome's Developer Options very useful.

When trying to create an entirely new container (below my existing one) to start framing out each content section I was having problems with it actually appearing where it was supposed to, and myself and several classmates just could not work it out. All of my tags were correct, I'd used the correct CSS where applicable, my 'classes' seemed okay and the HTML (for the new container) was entirely correct too. This was frustrating and I honestly thought it was just a case of the browser/html file itself getting confused and "perhaps if I just leave it, it will work itself out!".

I opened up the Chrome Developer options to view the code from a different perspective and use their 'find' options to hover over my site.

Thinking I'd be greeted with two containers in the code - my existing container and the new ones I was trying to create, I instead saw this:

Just one container.

Turns out I'd forgot to end 5 <div> tags. Therefore I hadn't actually closed my previous container and was just adding things inside it and not realised.

As you can see in the code above, none of those <div> tags I had opened for each Box (e.g. 'box four') did I actually close. Smart. 

Closing all of the tags fixed my problem, resulting in a new separate container and completely solving my problem.

Solving this has allowed me to create the 4 content sections on my one long home page. I am yet to add the 'arrows' that divide each section, but have inserted the two columns I need in each (as defined in my plan) and inserted some text just to pad it out and get the gist of where all my content will be.

Once I'd done this, I started to add the internal links. The idea is that the user clicks on the links in the navigation bar at the top and is skipped to the appropriate area on the page. This was a lot simpler than I anticipated. All I did was give each section (chapter 1: yellow etc) an ID (which they had already) and each button in the navigation put that id for the href="ID". This does not include any animation (e.g.  a smooth scroll) so for now this is a quick fix that works. I'd like to look into implementing a more slick, smooth motion. 

Making My Life Easier

Even though it's just a small point, I just wanted to mention what I've been doing in my code to ensure that I don't get lost in it. I am in no way an expert when it comes to HTML/any web language, so this has helped to make sure everything is spelled out to me and I know where I am - comments. 

<!--- <insert comment here> -->

I've used comments everywhere in my code to create little headings and subheadings that divide it all up into specific sections. This way, if I need to change something in the navigation bar I do not need to read all of the code to try and find it, I just have to look for the comment. Something small, and certainly not a new discovery (and not even the most appropriate use of the feature), but it's helped me hugely.

(comments in green)