As we go through the book, we’re going to build a website for the Nanonauts. Below are examples of the code from the book for you to copy and paste — or change! Looking for code from a certain page in the book? Look for the page number in the green circle below.
IMPORTANT!When you’re working with your HTML and CSS files, double-clicking them to open them may not work. For example, clicking the HTML file might just open up the web page in your browser, instead of letting you into the code. You might have to tell the computer which program to use. Try right-clicking the file instead and choosing “Open with…”, then picking your text or code editor.
p10Linking stylesheet to About Us HTML
p13Adding a photo to About Us HTML
p28CSS stylesheet with a border
p34Link pages with a menu HTML
p35Turning links from a list to a menu bar CSS
p36Step 1: List style type CSS
p36Step 2: List background color CSS
p36Step 3: Add border to list CSS
p39Step 10: Padding between menu entry and separator line CSS
p40Step 11: Remove final separator line CSS
p40Step 12: Remove underline from menu items CSS
p41Step 13: Change the link color CSS
p42Changing background color of nav ul elements CSS
p42Changing background color of ul elements CSS
p42Rules for nav ul li elements CSS
p53Step 1: Table font size CSS
p54Step 4: Collapsing table borders CSS
p54Step 6: Border text alignment CSS
p55Step 7: Heading row background color CSS
p55Step 8: Background color for main part of table CSS
p56Complete HTML for styling the menu links
p58Changing color of non-clickable links CSS
p58Underline hover for clickable links CSS
p61Scratch HTML for embedding a guitar tuner
p62Javascript for image swapper
p69HTML for the expanded About Us page
p75Stylesheet that highlights structural elements CSS
p78Step 3: Floating images CSS
p81Step 6: Header and footer CSS
p81Step 7: Rounded borders CSS
p82Step 8: Floating media query CSS