Styling social media icons provides you with in-depth training on Web. Taught by Justin Seeley as part of the Building a Responsive Portfolio Site.
A great portfolio can make the difference between landing the job and getting passed over. This quick and fun project-based course will show you how to build a responsive portfolio site from start to finish. Staff author Justin Seeley shows how to plan the website in Photoshop and convert the plan into a single-page site. The backbone driving the portfolio will be Skeleton, an intuitive CSS framework that you’ll learn how to use for your own projects. Along the way, you’ll find out how to work with web fonts like Google fonts and icon fonts, how to start inserting content into containers, and how to style the look of headers, images, typography, and even social media buttons with some simple custom CSS. Add on a responsive lightbox effect and some media queries to make sure your site is ready for mobile, and you’ll have a complete, high-quality platform for showcasing your work.
- Planning and setting up an HTML layout
- Creating responsive CSS grids
- Incorporating web and icon fonts
- Building a layout with the Skeleton grid
- Styling the website
- Using jQuery for simple lightbox effects
- Testing a website’s responsiveness
- Adjusting media queries
CSS frameworks offer different modules and tools:
- reset style sheet
- grid especially for responsive web design
- web typography
- set of icons in sprites or icon fonts
- styling for tooltips, buttons, elements of forms
- parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
- equalizer to create equal height content
- often used css helper classes (left, hide)
Skeleton is: Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system.
Google Fonts (previously called Google Web Fonts) is an interactive directory of free hosted application programming interfaces for web fonts. It was launched in 2010, and revamped in 2011. Many of the fonts are released under the SIL Open Font License 1.1, while some are released under the Apache License; both are free software licenses. The fonts are also served by Monotype’s SkyFonts, and Adobe’s Edge Web Fonts and Typekit services.
Google Fonts is designed to provide a platform for users to discover fonts and is used extensively, and example font faces include Lato, Raleway, and Lobster.
Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with the Twitter Bootstrap, and later was incorporated into the BootstrapCDN.
Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it on a second place after Google Fonts.
See more resources:
Build My Site