Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Block, Inline, and Inline-Block explained | CSS Tutorial

Views: 293 | Comments: 0   


Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.

 Share


User Feedback


There are no comments to display.



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By Jimi Wikman
      Not too long ago, someone asked me if I could clone the Google Font theme toggle button, and after looking at it, it looked like a lot of fun to try and do, so I took on the challenge!
      🔗 Links
      ✅ Google Fonts: https://fonts.google.com/
      ✅ My finished code: https://codepen.io/kevinpowell/pen/Po...
      ⌚ Timestamps
      00:00 - Introduction
      00:55 - Getting everything ready
      03:14 - Setting the stage with CSS
      07:08 - Adding custom properties
      10:36 - Changing the theme on click
      15:01 - Changing the aria-label on click
      18:04 - adding the tooltip
      23:22 - Animating the tooltip
      27:27 - Animating the icon
      35:06 - Changing the icon on page load
      40:48 - Adding the pulse animation
      50:00 - Using focus-visible to improve the tooltip
    • By Jimi Wikman
      One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
      /// Timestamps
      00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back
    • By Jimi Wikman
      Figma is a really amazing design and prototyping tool that has exploded in popularity. If you are thinking about making the switch to it, or if you're looking to figure out how to use it, this tutorial is for you!
      /// Timestamps
      00:00 - Introduction 00:25 - What we are going to be building 02:06 - What is Figma? 03:03 - Starting a new project 03:33 - basic interface 04:12 - creating a frame (workspace/artboard) 05:45 - creating basic shapes 06:45 - color basics 08:16 - the text tool 12:30 - layer basics 14:07 - Zooming in and out and moving around the frame 16:57 - selecting, aligning, and locking items 20:22 - duplicating items 22:50 - stroke basics 23:47 - moving things perfectly straight 24:47 - more layer controls 26:59 - round corners 28:46 - grouping items, equal distribution, layer organization 31:45 - placing images 35:29 - the scale tool 37:15 - eye dropper and more on colors 38:04 - making the layout look better with everything we learned
    • By Jimi Wikman
      While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!
    • By Jimi Wikman
      In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!
×
×
  • Create New...