DEV Community: FollowAndrew

CSS Flexbox Tutorial

FollowAndrew — Thu, 26 Oct 2023 15:55:21 +0000

Alright friends, I finally created a much-requested CSS Flexbox tutorial. Learn the key principles of how flex box works instead of just randomly adding values to see what happens! You'll be able to confidently write flexbox code after watching my quick 30 minute overview.

CSS Clip Path

FollowAndrew — Wed, 07 Apr 2021 18:31:21 +0000

CSS Clip Path for 'clipping mask' style effects

Part 10 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Scroll Snap

FollowAndrew — Tue, 30 Mar 2021 17:59:28 +0000

Easy CSS animation and auto snapping for carousels and more!

Part 9 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Focus Within

FollowAndrew — Tue, 23 Mar 2021 16:23:27 +0000

Learn how to style parent tags from within child elements with CSS focus-within property!

Part 8 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

HTML Tables w CSS Styling

FollowAndrew — Mon, 01 Mar 2021 18:32:40 +0000

It's just a matter of time until you'll need to create tables in HTML. While we no longer use them for layout, they are still used extensively in web design for well.. tabular data.

In this tutorial we'll cover everything from the basics of HTML tables to spans, to css styling!

Subscribe To The Channel!

Video Timestamps & Topics Covered

00:00 - Intro
01:00 - Rows & Data Cells
02:48 - Spans (merge cells)
04:01 - Cell Alignment (vertical & horizontal)
04:46 - Table Header, Body, & Footer
05:25 - Cell Padding & Cell Spacing
06:23 - Table Width & Height
07:22 - Nested Tables
08:16 - Deprecated Table Attributes
08:52 - Real World Table HTML
13:21 - Real World Span
18:02 - Real World CSS Styling of Tables
28:47 - El Fin

CSS Feature Detection

FollowAndrew — Thu, 25 Feb 2021 18:13:39 +0000

Part 7 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Color Scheme Prefers

FollowAndrew — Mon, 22 Feb 2021 16:29:54 +0000

Part 6 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Box Alignment

FollowAndrew — Wed, 17 Feb 2021 19:04:09 +0000

Part 5 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Logical Properties

FollowAndrew — Mon, 01 Feb 2021 22:27:12 +0000

Part 4 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

Auto Rotating Digital Picture Frame from 4K TV!

FollowAndrew — Sat, 30 Jan 2021 20:02:23 +0000

Alright folks, this project took me a while, but it is completely awesome.

I built a rig that rotates a 4K display based on the orientation of the photo (portrait or landscape) all powered by a Raspberry Pi 4 and some fancy 3D printing. The PI runs a node JS server and a stepper motor which displays the photos via the chromium web browser in KIOSK mode. It's everything I ever dreamed of and more!

You have to watch the whole video to appreciate it, as there is even a fancy Easter egg at the end with facial recognition on the RPI camera!

CSS Variables

FollowAndrew — Tue, 26 Jan 2021 18:23:27 +0000

Part 3 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

CSS Gap Property Tutorial

FollowAndrew — Sat, 23 Jan 2021 00:02:29 +0000

Part 2 of the 21 CSS tips for 2021 Series

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

Watch out for Safari, as it's lagging behind on support for this property...