Figma
Figma (https://figma.com) is a powerful browser-based tool for UX/UI design with convenient frontend web development features such as API for design tokens and features such as variables (to align with css custom properties).
Front-end Web Development
Intro to Web Hosting
For Web Designers who can Code Where should you host your site? Web designers and web developers are faced with this question all the time. Depending upon the client website, there might be dozens of options to choose from. The best solutions are typically determined based upon the technical requirements for each website the specific …
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.
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 …
Netlify
Netlify (netlify.com) is a free “serverless” website hosting service that offers a wide range of powerful services that make site deployment super easy and static sites super powerful. Known for the term Jamstack, a modern way to build lightning-fast websites and web apps, Netlify prioritizes performance via its CDN network and improves the developer experience by offering …
Smashing Magazine Podcast
The Smashing Magazine Podcast is an interview-based podcast from Smashing Magazine. Host Drew McLellan talks to design and development experts about their work on the web, as well as recent news and articles at Smashing Magazine. Links Podcast-specific: https://podcast.smashingmagazine.com/ https://www.smashingmagazine.com/category/smashing-podcast https://podcasts.apple.com/us/podcast/smashing-podcast/id1485403438 Smashing Magazine: https://www.smashingmagazine.com/
ScrollOut
ScrollOut is a small, lightweight JS library for scroll-triggered events, such as reveal and parallax. CDN: <script src=”https://unpkg.com/scroll-out/dist/scroll-out.min.js”></script> Init <script> ScrollOut(); </script> HTML <section data-scroll=”out”> <h1>Section</h1> <p>Lorem ipsum et dolorem.</p> </section> CSS: [data-scroll] { transition: opacity 1s; } [data-scroll=”in”] { opacity: 1; } [data-scroll=”out”] { opacity: 0; } Example:
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 …
The Web Design and Development Process
A User Centered Design Approach The web design and development process shares several resemblances to the software development process and systems development life cycle and is influenced by the rich history and practice of related fields such as systems engineering and information science. Building upon several influential methodologies and preceding models, the following is a simple 5-Step process specifically …
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 …