Bootstrap 4: Create a Small Business Website | Jeppe Schaumburg Jensen | Skillshare

Bootstrap 4: Create a Small Business Website

Jeppe Schaumburg Jensen, Front-end developer and digital designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Videos (1h 54m)
    • About the project

      2:29
    • Home – Installing icon font and web fonts

      5:11
    • Home – Navigation

      9:47
    • Home – Hero

      3:14
    • Home – Alert

      2:11
    • Home – About

      2:19
    • Home – News

      3:48
    • Home – Footer

      9:24
    • Home – Responsive adjustments

      12:49
    • Home – Adjustment with utilities

      8:21
    • Services – Services

      3:43
    • Services – Responsive adjustments

      2:08
    • Services – Adjustment with utilities

      3:43
    • About – Story

      2:02
    • About – Office

      2:26
    • About – Clients

      1:20
    • About – Responsive adjustments

      3:47
    • About – Adjustment with utilities

      3:22
    • Team – Team

      4:59
    • Team – Responsive adjustments

      2:27
    • Team – Adjustment with utilities

      3:03
    • Contact – Address and hours

      2:50
    • Contact – Message

      9:13
    • Contact – Map

      1:56
    • Contact – Responsive adjustments

      5:34
    • Contact – Adjustment with utilities

      2:22

About This Class

ABOUT THE CLASS

This class is for the beginner who wants to get a quick introduction to the latest version of Bootstrap 4. This framework is one of the most popular ones used today by web designers and developers all over the world.

In this class you'll learn how to create a Small Business Website using Bootstrap 4. I will start from scratch and walk you through how to create it.

You'll learn how the framework use code structure, classes and attributes to create different kinds of components. You will also learn about the visual style of each component, and learn what is possible and what isn't with this framework.

ABOUT THE PROJECT

This project is about creating a Small Business Website. You'll learn how to structure various pieces of content, how to design a user-friendly interface, and how to make it look great on all device sizes by using a responsive grid.

The project will contain the following pages:

  • Home
    Menu, dropdown, hero section, message, highlights, responsive grid layout with cards, footer with icons

  • Services
    Menu, dropdown, responsive grid layout with large images, text and buttons, footer with icons

  • About
    Menu, dropdown, text, responsive grid layout with images, footer with icons

  • Team
    Menu, dropdown, responsive grid layout with images, icons and headings, footer with icons

  • Contact
    Address, opening hours, contact form, embedded Google Maps

ABOUT THE FRAMEWORK

The following version will be used to create a Small Business Website:

  • Bootstrap 4 (v4.1.1)

Bootstrap 4:

We'll use the following parts of Bootstrap 4:

  • Layout: Containers, Grid system

  • Content: Typography, Images

  • Components: Alert, Button, Card, Dropdown, Forms, Input Group, Jumbotron, Navbar

  • Utilities: Border, Embed, Flex, Spacing, Text

Bonus:

As a bonus you'll also learn how to use Font Awesome 5 to add icons to your project and how to use Google Fonts to add web fonts to your project.

DEMO

Online demo of the project

---

I hope you will be inspired to create your own Small Business Website afterwards. Please send me a link if you do so. I would love to see it!

6

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Jeppe Schaumburg Jensen

Front-end developer and digital designer

Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.

See full profile

Report class