Building the About Page


Not CompletedBuilding the HTML Structure for the About Page Header

In this guide, we're going to walk through how we can start building the "About Us" page, and we'll build out the basic HTML structure that we'll be using.

Not CompletedHow to Skew Images in CSS

In this tutorial, we're going to walk through how we can leverage CSS's transform property in order to create these types of skewed images.

Not CompletedUsing the CSS Float Property to Have Text Flow Around an Image

With our skewed image complete, our next task is going to be to add the page content. We're also going to learn how we can have a featured image and have the content flowing around it.

Not CompletedBuilding the Square Grid HTML Structure

Moving our way down the about us page, you can see the next component that we're going to build is going to be this box grid.

Not CompletedCreating a Two Column Layout with CSS Grid and Flexbox

Now that we have all of our content here, I think we are ready to add our square styles, and I think you'll also be pleasantly surprised by how little amount of code you're going to have to write in order to get this working.

Not CompletedFinalizing the About Page Styles and Review of Code Organization Best Practices

Now that we have our two-column grid layout finished and that's looking good, and everything else on the page is really coming along nicely, the last element that we want to integrate is the footer.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.