Colour Theory in a nutshell: view here!
Where to find good webfonts
A few options are commercial, free, and open-source.
MyFonts is a great marketplace for type designers to sell their stuff, so you see a wide variety of prices, from free to super expensive. They're good at organizing, and make it obvious & searchable to find fonts you can use on the web.
Typekit, which was recently bought by Adobe, is a subscription service that provides a library of awesome typefaces for use on the web.
FontSquirrel is a great list of free fonts – some open-source, some just free. They've also got a webfont generator, where you can upload a font (assuming you're legally allowed to use it), and they'll convert it to all the formats you need and give you a ready-to-use kit.
Google Fonts is a large collection of free fonts, some open-source, which they host and let you reference. It's very easy to use and include if you want your fonts hosted somewhere.
The League of Moveable Type, started by yours truly, is the first open-source type foundry, whose fonts are not only free to use, but free to dissect and learn from, too.
Hoefler & Co. Hoefler & Co. makes extremely refined, exhaustively hinted web fonts. They make typefaces for the distinguished typesetter. Their webfont service is available at http://www.typography.com/cloud/welcome/.
Including Fonts
@font-face {
font-family: 'League Spartan';
src: url('leaguespartan-bold.eot');
src: url('leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
url('leaguespartan-bold.woff2') format('woff2'),
url('leaguespartan-bold.woff') format('woff'),
url('leaguespartan-bold.ttf') format('truetype'),
url('leaguespartan-bold.svg#league_spartanbold') format('svg');
font-weight: bold;
font-style: normal;
}
h1 { font-family:"League Spartan"; }
Student Recommendations
div is a division/divider tag. It breaks content into individual boxes or containers.header contains your header information such as logo, site name, etc.nav contains your navigation links and information.section is used to divide your page into individual sections.article is a child of section and is designed to create individual articles. Arguably replaceable with divs.aside is a new tag! This tag is designed to be afooter containPull down the latest! During this lab, you will update your resume. It should be added to github.com/your-name/resume repository.
1. We will review a completed style guide! The source code is available in the `02_java.../html_css_style_guide/` directory.
2. Next, we'll wireframe a basic two-column website together.
3. We'll turn that into a basic website using HTML/CSS.
4. Now, visit your favourite website. On the graph paper provided, wireframe out the layout of the website. Use *developer tools* to inspect all elements on the page. Notice that some pages change layout when the window is sized smaller or larger... we'll tackle this *soon*.
5. Now that you've created two wireframes, wireframe out what you'd like your resume to look like. This will not be anywhere near as advanced as some websites and that is a-ok!
6. Finally, use your knowledge of wireframes and style guides to style the resume website that you created during after hours last night.