CSS Podcast
CSS Podcast (https://thecsspodcast.libsyn.com/) hosted by Una Kravets and Adam Argyle, Developer Advocates from Google, who discuss all things CSS in short, digestible episodes.
CSS
Create a Featured Projects Portfolio Site
Showcase select projects by coding an online portfolio site from scratch There are many different ways to share your work online. If you are a web designer with front-end web development skills looking to showcase your talent, one of the best ways is to custom design and code your own portfolio site from scratch. In this …
Positioning and Layout Tests
Hands-on exercises to help understand different layout techniques Check out the codepen examples below, each with multiple ways to center content. Be sure to delete the css (or comment it out) line-by-line so you can fully understand the impact of each css property and value. Centering Horizontal Centering Note how it’s just one line of …
Quality Assurance Checklist
Pre-launch QA Diligence Prior to the launch of web sites both big and small, there are several techniques and best practices to help ensure the delivery of a quality product that is performant and bug free. Often times addressed toward the end of a project, one of the most commonly used terms to describe this …
Intro to Web Animation Techniques
CSS, JS, Animated Gifs, Videos, SVG, and More… Purposeful animation can be used to guide users through a workflow in the same way that good typography should underscore the hierarchy of information in a document. – Rachel Nabors, Web Animation Engineer Ever since Apple choose to not support the Flash player on the iPhone, thus …
Typography Specimen Tests
Are you my Type? Let’s find out… Quick Hands-on Google Docs Exercise Check out the two Google Docs examples below: one containing raw, unset type and the other stylized using Google Fonts. Using Google Docs, create your own type specimen test starting from (almost) scratch using the raw unset text. Take advantage of Google Doc’s …
Create a Simple Image Grid Portfolio Site
Display your work by coding an online portfolio site from scratch There are many different ways to share your work online. If you are a web designer with front-end web development skills looking to showcase your talent, one of the best ways is to custom design and code your own portfolio site from scratch. See a …
The Box Model
CSS Margin, Padding, and Borders In web development, the CSS box model refers to the composition of a webpage or HTML page from blocks or boxes using CSS. Specifically, the box model describes how the size of each such block and its content is determined through styling instructions. The guidelines of the box model are …
Code a Simple Web Page with CSS
Use CSS to style a web page from scratch One of the best ways to get started when learning about web design and CSS is to get your hands dirty and style a simple web page from scratch. See a Demo: https://johndoenma.github.io/coursework/art128/simplewebpagewithcss/index.html View on Github: https://github.com/johndoenma/coursework/tree/master/art128/simplewebpagewithcss View on Codepen: https://codepen.io/kccnma/pen/ppQdmo Video Lesson Watch this old …
CSS Basics: Selectors and Syntax
A short intro to the core fundamentals of CSS as a styling language CSS is a rapidly growing and evolving technology that keeps getting more powerful with each new feature that gets added to its specifications. For a “styling” language, it can do more than just affect the presentation of markup via the UI, it …