Thu Oct. 5

Display / WebFonts

9 – 12h Teaching

Teacher:

Monorom

Goals

I use WebFonts and IconFonts in my portfolio.
I know how to use the CSS display settings.

Content

FROM YESTERDAY – display settings
Google Fonts and other Font Licences
Icon Fonts

RECAP – 04.10.

Box Model / Box sizing
Media queries
Q & A

CSS display Property

Hide an Element - display:none or visibility:hidden?

Exercise – Portfolio #6 – Template

Set the navigation links to display:block
Set the liste element (li) display:inline-block for Desktop Screens.
Change the paddings or margin if necessary.
Add the class responsive to the images who need to scale.

img.responsive{

 max-width: 100%;

 height:auto;

solution | solution.zip

WebFonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites. About lesen.

Google Web Fonts

Wichtig: Impact on page load time.

IconFonts

Font Awesome – The iconic font and CSS toolkit.
Font Awesome Cheatsheet.
Icomoon, ist eine Icon Bibliothek. Icomoon kann Schriften verschiedener Anbieter zu einem Fontpacket zusammenfassen.
Glyphsearch Icon-Font-Suchmaschine.

Exercise – Portfolio #7 – Fonts

Add Google Webfonts to your portfolio. (import to CSS)
Create a new folder inside your portfolio folder, named the folder fonts.
Download Font Awesome Icon Font.
Add the icon font to your fonts folder.
Try to display Icons

solution | solution.zip

12 - 13.30h Lunch (Restaurant Paprika)

13.30 – 16h Coaching

Coaches:

Hussam
Matthias

Goals

I'm ready for the presentation.
My portfolio has more content.

Exercises

Prepare your presentation.

What will you show in 5 Minutes?
Fix only the quick wins!

16 – 17.30h Community Meet-Up

Community Meetup

Everybody who is interested to get to know our Powercoders is invited to join!