Build a Responsive HTML & CSS Template with FlexboxGrid

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn to build a responsive HTML5 and CSS3 website template using FlexboxGrid, a lightweight Flexbox-based grid system. Follow along to create a header, style columns, implement containers, and design various sections including info, image, and footer. Explore inner pages, sub-headers, and contact forms while mastering custom CSS techniques. Dive into responsive design with media queries and discover how to create visually appealing layouts using Flexbox. By the end of this tutorial, gain practical skills in modern web development and responsive design principles.

Syllabus

Intro
Template Overview
Flexbox Grid Overview
Flexbox Grid Sizes
Getting Started
Downloading FlexboxGrid
Creating The Header
Styling The Header
Columns
Container
Span
Nesting Grid
Info Section
Image Section
Footer Section
Columns Section
Footer
Inner Pages
Sub Header
Main Page
Services
Contact Form
Custom CSS
Fonts
Common Classes
Header
Navbar
Links
Middle Row
Showcase
Showcase H1
Showcase Paragraph
Grid Background
Media Queries