Html/Css Responsive Landing Page (+Bootstrap & Font Awesome)

Learn how to build a responsive landing page using HTML & CSS

What you'll learn

Basic Responsive HTML/CSS

Font Awesome

Bootstrap

Uploading a website to the internet

Requirements

None

Description

Build a clean, responsive HTML/CSS landing page with Bootstrap 5. We'll cover:Bootstrap 5 Install and implementationSetup of responsive imagesResponsive Grid with CardsUpload to Netlify (for free)Connect to a domain name Font Awesome icons for social mediaWe'll start with the basics. Literally from scratch, we will build up the responsive design with the help of Bootstrap. Then we'll go into CSS and customize our design. We will then use Bootstrap cards to organize our content. Built for beginners looking to learn responsive web design.Bootstrap (or Get Bootstrap) is a CSS framework that helps us speed up the design of our site. What I like about Bootstrap is that we can easily build on top of what they offer, or use their pre-existing design elements. Especially their grid.Why bother building a responsive grid when one is built for you? That's the power of using Bootstrap as a CSS framework for our website. I'll walk you through the inline CSS elements that are pre-written into Bootstrap to help further our design along.I'll help you through every step of the process. From a blank canvas, to a finished website where we can launch it online!

Overview

Section 1: Build & Launch Website

Lecture 1 The Tools & Bootstrap Setup

Lecture 2 Setup of Header Information

Lecture 3 Centering The Design & Adding a Gradient

Lecture 4 Setting up Header Image & Title

Lecture 5 Bringing In an Intro Paragraph

Lecture 6 Cards & Content

Lecture 7 Email Contact Footer

Lecture 8 Publish to the Web

Section 2: Adding Font Awesome

Lecture 9 Adding Font Awesome Icons into our landing page

Beginning HTML/CSS developers