Use semantic elements: Instead of using the div element to wrap the navigation links, you can use
the nav element. This helps to improve the accessibility and SEO of your website, Example of
Semantic tags with HTML5 are
Section
Nav
Heading
Site logo, Site title, main navigation
Main
Footer
Article
This is a self-contain piece of content. It can be read and still make meaning without
adjoining information to the rest of the web content
Figure
Images, videos etc
Aside
Side bar content, related article or advertisement
These tags portray meaning as the names imply. These tags helps search engines & assistive
technologies such screen reader understand the structure and content of the web page.
Images if not specified takes up the size of the whole DIV object by repeating itself
Background-size: contain:
This property will stretch the image to occupy the entire DIV. This will stretch in proportion to the
DIV size.
The more padding you have on a DIV, the allowance you have for the background-image
While margin pushes things away
1. Font Family and Font Stacks
This allows you to create a fall-back font, if the required font family is not present on the current
working PC
For example, styling the h1 tag will be as follows
The following CDN is used to make available fonts which are not available as system fonts
[Link] Always remember that attributes are inherited
Since the font family for the hi-tag is not specified, it inherit the font family attribute from the
body-tag, which is Calibri.
Considering figure above, the font family for hi-tag is specified. Hence this takes priority over
inheritance.
All h-tag and p-tag have by default, margins at top and bottom. By default, the size of each margin
is corresponding to the font-size of the text
Also, the spacings between lines or text are called lettings
Spacing
between text
These spacings can be adjusted with the attribute Line-height. Preferably, the value of the Line
height should be unitless and not pixels
Text decoration, Text transform are also CSS attributes that can aftect the appearance of text or
lines
The Anchor-Tag does not inherit attributes because it has its own default attribute (e.g text color =
blue)
2. Pseudo-Class
This is a keyword added to a selector that specifies a special state (action) of the selected element
e.g hover effect, active state of a button
It is pseudo i.e false state because by default it is not active. This is only active when the class is
active. This action or active state is dependent on the verb of the pseudo class
The pseudo-class have to be in the following order
Default link
Visited
Hover
Active
This is because of the top-down approach of executing CSS code. They might over ride an existing
action
We also have the focus pseudo-class. This can be visualized by pressing the tab button. This will
allow it navigate through the links and physically displaced by a rectangular boarder around the
current link which is active
This is particular for website accessibility. Fir readers that cannot navigate by moving the mouse
1.1 Pseudo Element
::before & ::after donot work for self closing tags like img-tag
Responsive Outline
The h1 – h6 tags should be structured like the headers in Microsoft word document.
So therefore h1 1
h2 1.1
h3 1.1.1
ID-tags are best used for linking forms in a web page and also
GLOBAL ATTRIBUTES
3. CREATING A RESPONSIVE NAVBAR
1.2 Pusing objects to left and right
This can be done by uain the float attribute as shown below
1.1.1 Issue Encountered:
After performing float:left & Float:right, The header shrunk to having a height = 0px (Seemed like
it disappeared)
1.1.2 Solution:
The following code resolved the issue
1.3 A MODERN APPROACH TO A RESPONSIVE NAV BAR WITH HTML & JS
This involved the use of the following design concepts
CSS Variables: a variable, also known as a "CSS variable" or a "custom
property," is a way to store a value that can be reused throughout a
stylesheet. CSS variables are defined using the ‘- -’. It is used/called in any
CSS property value by using the var() function. These are illustrated below
4. BUILDING A CAROUSEL
Best practices include the follow
Use ul-tags for grouping your slides instead of a div-tag
1.1.3 Issue Encountered:
For left and right arrow objects (i.e., < & >) , we add the image within a button using the html script
below
However, the svg object did not allow the lifeserver to be active. The error is shown below
1.1.4 Solution:
The following code resolved the issue
5. ShortCut Keys and functions
6. Using UL for Navigation bar or Carousel Slides
The following are styling codes used for adjusting the List items
Removing the bullets
List-style: none;
We have the following strata
Grand-parent DIV-class for the entire
Carousel.
It will be with the carousel
section
Main-parent DIV-class for the buttons and
slides only
Parent Class for all unordered list-
items
Child Class for individual list items
To stack the slides or images on top of each other, the child must have a Postion: absolute; This
will make it go out of the work flow but must be relative to something
Hence we make it relative to major container (not the section) which is the Grand-parent by giving
the property of Position: relative
1.1.5 Issue Encoutered: Objects of the carousel side go out of the flow when given a
position of absolute: (this did not affect the images:
1.1.6 Solution:
7. JAVASCRIPT FOR CAROUSEL
The less event listeners you have the merrier
