course-work/prep-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Start with Python

Browse Source
This commit is contained in:
Kenneth Mendonca
2015-07-22 16:44:07 -04:00
parent 94031a251f
commit 57cb3981a0
100 changed files with 2085 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
3-front-end/1-basic-layout/README.md Normal file
View File

@ -0,0 +1,22 @@
Basic Layout
============
Using HTML and CSS, you are going to construct a skeleton for basic webpage.
Create a header positioned absolutely to the top of the page. Use HTML 5 semantics, the `<header>` tag.
Put a h1 tag inside that says something funny.
Make a navigation bar, also positioned absolutely, that is colored black. Use HTML5 semantics, the `<nav>` tag.
Add a list of links to the navigation bar, colored white. Make working links to any websites you want. Turn off the text decoration so it looks cool.
Create a content area of the page, with a 1em margin below the nav bar. It should be 90% of the page width.
See if you can make two columns inside, spaced evenly side by side
How about 3 columns inside?
Make a footer, positioned absolutely at the bottom of the page. Use HTML 5 Semantics.
Go into Dev tools and utilize the box model. Are your margins and spacing tight? What happens when you resize your window?

8
3-front-end/1-basic-layout/index.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
</body>
</html>

41
3-front-end/1-basic-layout/main.css Normal file
View File

@ -0,0 +1,41 @@
header {
background-color: gray;
height: 5em;
width: 100%;
}
nav {
height: 2em;
background-color: red;
width: 100%;
}
.content {
height: 20em;
width: 80%;
background-color: blue;
margin: 0 auto;
}
.col {
width: 24%;
height: 100%;
float: left;
border-right: 1px solid black;
margin-right: .9%;
}
.col:nth-child(4) {
border-right: none;
margin-right: none;
}
footer {
position: absolute;
bottom: 0;
height: 3em;
background-color: black;
width: 80%;
left: 10%;
}