Flexbox Action Grid HTML5 CSS3 | XO PIXEL

Flexbox Action Grid HTML5 CSS3 | XO PIXEL


Hey, Pixels! In this week’s tutorial, I’ll be showing you
how to code an action grid using the flexbox layout—an easy and quick way to create a
responsive grid layout on any website with CSS3. This tutorial will feature three action boxes;
download, upload, and share. They also feature icons from Font Awesome. Be sure to visit my website xopixel.com and
read the article, interact with a live demo, and download the source files for this tutorial. Now, let’s jump right in! The HTML First, we’re going to create a section and
give it a unique class name called “xop-section”. Within the section, we’re going to use the
div tag, then we’ll give it the class “xop-wrapper”. Then, we’re going to create another div
classed “xop-container”. Now, we’re going to code the actual action
box. First, we’re going to create a div and give
it the class “actionBox”. Within the action box div, we’re going to
use the heading tag for the heading and the p tag for the lines of text below the heading. Lastly, we’re going to use the button tag
and give it a class called xop-btn. Within the button tag, we’re going to name
the actual button, so in this case, ‘download’, and then we’re going to add an icon right
next to the text. The icon is from font awesome and I’m just
going to use the html method of adding an icon. Alright, so we’ve coded our first action
box! To make our other two action boxes, all we
need to do it highlight the code up to the “xop-actionBox” div and then paste it
two more times. Then, we’re just going to change the heading
text and the text in the bottom. Finally we’re going to grab the icons that
relate to each button type—so an upload icon and a sharing icon. Well, that’s it for the HTML, now let’s
head on over to the CSS. The first thing that we’re going to do in
our CSS file is give our entire page a really nice purple background. Then, we’re going to select .xop-section
and style the properties relating to the fonts we’ll be using in this section. Then, we’re going to select .xop-wrapper,
which we’ll give a max-width of 85%, a width of 960px; and finally set margin to 0 auto
to center everything. Now, we’re going to select .xop-container
and use the display: flex declaration. That means that we’re going to be using
the famous flex layout on the content within the container. Using the flexbox layout makes it so much
easier to make your content responsive. Finally, we’re going to add a 2% margin
to the top and bottom of the container. Now, we’re selecting the actual action box
so that we apply some nice styles to it. First, let’s set the width and height of
the action box to 270px. Then we’re going to add a purple background
color to the box. We’re going to center-align the text and
color it white. Add 40px of padding, and add a 10px border-radius
to give the box rounded corners. Finally, we’re going to give the boxes a
2% padding all around so that they have some breathing room beside each other. Now, we’re going to set the responsiveness
of the actionBoxes. First, let’s declare the media screen property
for when the browser is 1070px—that seems to be the breaking point for the boxes in
my browser. I’m going to select .xop-container and set
it’s flex direction to column—that means that when the browser is 1070 and smaller,
it will automatically move the items into a column layout which is ideal when scrolling
a website on a mobile phone. I’m also going to select .xop-actionBox
and set it’s height to 270px and it’s width to 200px. I don’t want the action box to look to wide
on mobile screens. We’re almost done now, all that we need
to style is the heading, text and the button within the action boxes. First, we’re just going to set the font
size and weight of the headings and add a 2% margin to the top and bottom of the heading. To style the lines of text, we’re just going
to add some padding to the top and bottom and give it a line height of 1.4. Now, we just need to style the buttons. First we’re going to select .xop-btn and
give it a white background. We’re going to remove the border, add 5%
padding, and set its width to 100%. We’re going to color the text purple, and
set the font family style. We’re also going to add round corners to
the button. Finally, we’re just going to style the hover
state of the button. First, we’re going to change it’s background
to a light purple, color it’s text white and then change the cursor type to pointer. There you have it! You’ve just coded a Flexbox Action Grid
using HTML5 and CSS3. Give this video a big thumbs up if you liked
it. Subscribe to xopixel for more great coding
videos just like this one. I’ll see you in next weeks video!

Comments

  1. Post
    Author
    XO PIXEL

    Be sure to read the article & share a screenshot of your creations using this tutorial in the comments for this tutorial here: http://xopixel.com/flexbox-action-grid-html5-css3/ . Happy Coding! (P.S. my videos sound so much better with headphones!!)

  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
    The Awkward Dev

    oh and one more thing, what do you think of my web designing skills / if you are looking for someone to build a website would you choose me? And would you consider subscribing to my channel if you are interested in HTML and CSS?

  5. Post
    Author
    Deviprasad Sahoo

    hi, thanks for supporting through you tube, I request you to start HTML5 from basic to advance then css3, java script. this is why because i like your videos but I can't get all info as I am a beginner. Hope your can help next time. again thanks and love you

  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *