Prior Learning -

Some Advanced Tools

Aim

To learn web design tools needed for Level 2 web design.

0 - Set up the website correctly

Follow the instructions in Prior Learning Tutorial 1 - Set up a Website  to make sure folders and sections are set up correctly.

1 - Create a NAVIGATION bar

Find out more about NAV BARS here .

The Nav bar usually appears on every page, so make it first (so you can copy it easily to every page).

1.0 - Create an unordered list for items in your nav

In the HTML (index.html) create an unordered list <ul> for your nav.

Make each item in the list a list item <li>.

Then set the CSS styling for the nav.

Get rid of the height setting and set a new font color for your menu.

1.1 - Pad out the buttons

Pad out the words and get them on one line (this will also get rid of the bullet points).

This looks like this:

1.2 - Centre (or align) the nav menu

To centre of align the menu, set a style for nav ul.

This sets the style for the complete list (not each word individually), so we can use it to centre the list or right align the list.

This looks like this:

1.3 - Add button spacing

Add space between the buttons by adding left and right margins to the list items using nav ul li.

I made the width bigger too so that the menu still fits on one line.

1.4 - Add links

Put each item in the menu into anchor tags <a>.

Set the href to the name of the page it will go to.

1.5 - Make the whole button clickable

Style the anchor nav ul li a.

Move the padding over to the new css so that the button is padded and not just the list item.

Set display: block so that the anchor takes up the whole button.

1.6 - Set hover color and text decoration (LEVEL 2 SKILL)

2 - Make a drop down menu (LEVEL 2 SKILL)

Find out more about using CSS to create dropdowns at w3schools.

2.0 - Add the HTML for your dropdown menu

Add a new unordered list inside the anchor <a> on your menu.

NOTE: remove the href unless you still want it to go to a different page.

2.1 - Position the dropdown

Absolute position means you are positioning it starting from the bottom right hand corner of the element above. -20px means 20px to the left

2.2 - Style the dropdown

Make the dropdown boxes the right size and color

The rgba sets the red, green, blue and alpha level - 0.6 means partly-see-through (1 is opaque, 0 is transparent)

2.3 - Hide the dropdown

Add this to the CSS

opacity: 0; hides the class   hidden .

Transition changes how long it takes for the dropdown to appear - this bit won’t do anything until we make the dropdown appear on hover.

Read about how transition works here .

2.4 - Make the dropdown appear on hover

So now when you hover over any list item in the nav, any class hidden in that element will change opacity to 1 (it will appear).

2.5 - Make the dropdown boxes light up on hover

To make the list items light up on hover, make them into anchors <a> because we have already written CSS to make the nav anchors light up (if you want them to light up differently, you’ll need to use a class).

This will work, but will change the formatting of the dropdown.

To remove this padding, change the CSS for the dropdown list items (we no longer need to pad these out, because now the anchor inside them has padding instead.

You might also like to reset the top margin of the dropdown so that it isn’t pushed away from the menu.

3 - Add Gradients (only more complex gradients are advanced)

Find out more about gradients here

Add a background gradient to your wrapper like this.

NOTE: Leave in the background-color too - if the gradient fails to load on an old browser, the box will then just be the plain color, which is better than no color at all!

3.1 - More complicated gradients (LEVEL 2 SKILL)

You can set any gradient you like using this general rule:

background: linear-gradient(angle, color-stop1, color-stop2, color-stop3, etc);

The angle can be in degrees  (

e.g.

0deg (down)

90deg (right)

180deg (up)

-90deg (left)

The color stops can be

names (e.g. red )

hex codes (e.g. #A1B2C3 )

RGBA values ( rgb(0, 0, 255, 0.5)  )

You can also set a  radial-gradient .

Try adding one to your header:

4 - Import Fonts

Go to fonts.google.com .

Choose a font you like:

Bring up the selection tab at the bottom.

Click on @IMPORT.

Copy everything between the <style> tags (but NOT the tags themselves!).

Paste this at the top of your css

Copy the “Specify in CSS” part.

And paste this in wherever in the CSS you want to use the font.

(I’ve also made the header font bigger and aligned center so you can see it).

So now it should look like this:

4.1 - Add downloaded fonts (LEVEL 2 SKILL)

Visit w3schools  to see how to do this.

5 - Text shadows and box shadows (only customised shadows are advanced)

Find out more about shadow effects at w3schools here.

5.0 - Add Text shadows

The CSS for a text shadow looks like this.

text-shadow :  horizontal vertical blur color ;

For example:

Try adding this to your CSS:

4.1 - Box Shadow

Find out more about Box Shadows here .

A box shadow works the same way.

 box-shadow :  horizontal vertical blur color ;

For example

Try this:

It looks like this:

6 - Use bootstrap or jQuery

Bootstrap and jQuery are libraries of pre-made code.

You can link to the library, then it lets you do awesome stuff really easily, because you don’t have to make it yourself

You can follow the w3schools tutorial here

Bootstrap tutorial  - provides auto-formatted columns/buttons/boxes/text which is responsive to screen size

jQuery Tutorial  - makes it easy to make things fade/hide/slide when you click/hover/press/scroll

6.0 - Put links to bootstrap and jQuery in the <head> of your HTML