Week 19 – Navigation Bar and a Magic Secret!


Well Done Eoin

Fair Play to Eoin who this week got up and showed all his fellow CoderDojo programmers how to do a navigation bar in HTML and CSS.  First he showed us the HTML code and everyone decided what text they would use for their own navigation bar.  He did some of the lines of HTML really quickly, so I asked him how he did that so fast!  Malcolm didn’t want him to give away the magic secret but here it is.  When you are in Notepad++ and you press CNTRL (its on the bottom left hand side of your keyboard)  so keep your finger on the CNTL key and then press the letter d and then let go of both keys..got it ?  it repeats the line of the code just below the line that you are on.  Its really handy so no magic really but a good shortcut when you are using Notepad++.  Thanks Eoin for that one.  Some other handy tags were UL for an unordered list and OL for …….yes and ordered list.

Once the HTML was done, everyone could run the HTML and see how boring the navigation bar looked…so it was time to create a CSS file in Notepad++.  Eoin put the CSS up on screen, its important to use colons and semicolons in the right place so take note of those.  Make sure that you save the CSS file as a CSS file and not HTML.  It must be saved in the same folder as the HTML file…so everyone should just use the coderdojo folder on their desktop for all their files.

The last step was to go the head tag of the HTML file and call the CSS file ..and then hey presto the navigation bar would come up in better colours and shading and across the screen…that didn’t work for me …I might have had a few spelling mistakes! once they were fixed ..then hey presto !  If you want to see the code click here

Some Kodu fans stuck to Kodu and thanks to Adam and Evian who put up their two player game on screen to show us.

Finally a big welcome to Angela and Wanfred who joined last week and are enjoying HTML already (Sorry about the spelling mistakes Angela!)

See you next week.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s