Computer Science 318

Learn

Breaking down your design

Before you jump into the coding I suggest opening the designs in Illustrator, Photoshop, or InDesign and using the rectangle tool to help you visualize the HTML elements you will need to create the design in HTML and CSS. Like the example below.

Remember when breaking your design apart to think about it in blocks. What content is in each block? How do the block react to each other?

Jump Links

Remember if you are adding in links that jump to another point on the same page you need to add an id to whatever html element you want to jump to. Like in the onion lab you added an id="news" to the <h2 id="news">News</h2>. Then you will need to use that id value (value is what is inside the quotes) in your anchor that you want to jump from. So for instance in the onion lab navigation you added <a href="#news">News</a>. Whenever you want to jump to an id you need to put a # in front of the value inside of your href="", that way the browser knows the <a> is linking to an id because of the #.

Adding in Special Fonts

Did you have a fancy font in your design that isn't an option in Visual Studio code?

A great way to add in non-standard fonts is to use Google Fonts. They have over 900 open source fonts you will be able to link to.

Select your fonts with the plus sign. Once you do a black box will pop up on the bottom right.

Click on the black box and follow all of the instructions displayed.

CSS Gradient Generator

CSS Gradient Generator