Html/Css Responsive Landing Page (+Bootstrap & Font Awesome)
Published 2/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 412.27 MB | Duration: 1h 3m
Published 2/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 412.27 MB | Duration: 1h 3m
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