CSS-Tricks Screencasts

p class=wp-block-paragraphWith a href=https://www.mailpoet.com/?aff=8638 rel=nofollow noopenerMailPoet/a and a href=https://woocommerce.com/?aff=8638 rel=nofollow noopenerWooCommerce/a, we can build a href=https://woocommerce.com/create-a-paid-newsletter-with-woocommerce/?aff=8638 rel=nofollow noopenera paid subscription newsletter/a into a a href=https://wordpress.com/?aff=8638 rel=nofollow noopenerWordPress/a website. Our only costs are transaction fees, whatever WordPress hosting we might need, and a yearly fee for WooCommerce Subscriptions, making it a very cost-friendly hellip;/p

p class=wp-block-paragraphI think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We#8217;ll get into that in the video. How can we call it a framework if it asks you to #8220;bring your hellip;/p

p class=wp-block-paragraphI paired up with a href=https://twitter.com/sonicdmg rel=nofollow noopenerDavid Jones-Gilardi/a of DataStax to go through a href=https://github.com/datastaxdevs/appdev-week3-graphql rel=nofollow noopenerone of the workshops/a they have put together (with a href=https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw rel=nofollow noopenerAnia Kubów/a, who has a href=https://www.youtube.com/watch?v=g8COh40v2jU rel=nofollow noopenera video/a you should watch as well) that does a good job of showcasing how hellip;/p

p class=wp-block-paragraphThis is the video version of a href=https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/a blog post we did/a asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the othernbsp;side?/p

p class=wp-block-paragraphIt#8217;s a satisfying answer because hellip;/p

p class=wp-block-paragraphI get a hands-on performance review with a href=https://timkadlec.com/ rel=nofollow noopenerTim Kadlec/a of a href=https://webpagetest.org/ rel=nofollow noopenerWebPageTest/a! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I#8217;m all about sgetting a little free consulting/s helping y#8217;all hellip;/p

p class=wp-block-paragraphI#8217;m joined by a href=https://twitter.com/chris__sev?lang=en rel=nofollow noopenerChris Sev/a from a href=https://www.digitalocean.com/ rel=nofollow noopenerDigital Ocean/a to talk about their new a href=https://try.digitalocean.com/css-tricks/?utm_medium=partneramp;utm_source=csstricksamp;utm_campaign=global_brand_video_enamp;utm_content=conversion rel=nofollow noopenerApp Platform/a. We#8217;re going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic hellip;/p

How it works

p class=wp-block-paragraphYou apply codea href=https://css-tricks.com/almanac/properties/p/position/#stickyposition: sticky;/a/code to an element along with a codetop/code, codeleft/code, coderight/code, or codebottom/code threshold and it will #8220;stick#8221; in that position when the threshold is passed, as long as there is room hellip;/p

p class=wp-block-paragraphIn this video, I#8217;m joined by a href=https://twitter.com/accessibility20 rel=nofollow noopenerPreety Kumar/a of a href=https://www.deque.com/css-tricks/ rel=nofollow noopenerDeque/a to take a look at their a href=https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US rel=nofollow noopenerDevTools plugin/a for a href=https://www.deque.com/axe/ rel=nofollow noopeneraxe/a. Short story: this is an emamazing/em plugin that helps you quickly find accessibility problems on any website, emthen helps /emhellip;/p

p class=wp-block-paragrapha href=https://pages.cloudflare.com/ rel=nofollow noopenerCloudflare Pages/a is Jamstack hosting, meaning it#8217;s a static file host that runs your builds and lets you do a href=https://www.cloudways.com/blog/cloudflare-hosting/?id=1223312amp;data1=ArticleLink target=_blank rel=noreferrer noopener nofollowdynamic things/a with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site#8217;s hellip;/p

p class=wp-block-paragraphLike so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker./p

p class=wp-block-paragraphA reader wrote in with a screenshot of what they were trying to accomplish — basically an hellip;/p