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
Create a Featured Projects Portfolio Site Read More »
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
Positioning and Layout Tests Read More »
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
Quality Assurance Checklist Read More »
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
Intro to Web Animation Techniques Read More »
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
Typography Specimen Tests Read More »
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
Create a Simple Image Grid Portfolio Site Read More »
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
Code a Simple Web Page with CSS Read More »
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
CSS Basics: Selectors and Syntax Read More »