Table of contents
Retrospective
This article is the continuation of my first website development project to be fully based on HTML, CSS and JavaScript.
In my project-kickoff article, I lucidly described the framework of my website and the HTML and CSS components used to get to that milestone. An overview was given on the HTML tags and CSS properties used to style particular elements.
The project continues
In this article I build upon my kickoff article overview as I continue to develop my website towards a dream look, feel and functionality.
Version 1
- Outline
I introduce a navigation bar inside a header section to house the website navigation buttons and dropdowns. I used the header tag to house everything of the navigation bar inside it (and navigation bars appear at the header area of a website). This is also to maintain a clear distinction with a footer section to be added in the future. Well this navigation bar contains these buttons:
Home
Courses
Course 1
Course 2
Course 3
About
Vision
Mission
Contact buttons.
Within the Courses button we see a dropdown list displaying our available courses. At this point, the dropdown looks fantastically eye-catching, i.e completely out of place!
Concepts
HTML
<nav> tag - to house the unordered list and its items
<ul> tag - the unordered list to contain list items
<li> tag
<a> tag
CSS
:hover pseudo selector - to determine the "behaviour" of an element on which we hover our mouse pointer
display: block - to ensure my targeted element takes up the right space that's meant to be and later dimensions can be tweaked
text-decoration - to tweak the text decoration of an element (for e.g we can remove the underlining of an anchor tag text and we did exactly that with text-decoration: none)
Version 2
- Outline
You can see that the earlier unruly dropdown list has been disciplined to be at it's place. As effortless as this change looks, it was quite the contrary. This was a very difficult challenge to tackle and bring it to place. Once it's tackled successfully, it's a skill learnt for life.
Concepts
CSS
transform: translateX() - to move an element horizontally along the x-axis, either left or right. You can put it in percentage or values
position: relative - this positions any element relative to it's starting position, this can be used to move it any direction
Conclusion
This was it for this post as I chronicle my journey. Thank You very much for reading. I will be glad if You received even a tiny benefit from this article. :)