Code a Small Business Website using popular web frameworks

Code a Small Business Website using popular web frameworks, available at $44.99, has an average rating of 4.29, with 137 lectures, based on 7 reviews, and has 102 subscribers.

You will learn about Learn to create a Small Business Website with 5 pages and all the relevant sections and content Learn how each framework uses different code structure, classes and attributes to create the same kind of component Learn how each framework differ in the visual style of each component Learn what is possible and what isnt with each framework This course is ideal for individuals who are Beginning web designers and developers who want know the most popular frameworks or Web designers and developers who know one of the frameworks, but are curious to see how it compares to other frameworks or UX Designers and Art Directors who want to learn how to create quick prototypes with code It is particularly useful for Beginning web designers and developers who want know the most popular frameworks or Web designers and developers who know one of the frameworks, but are curious to see how it compares to other frameworks or UX Designers and Art Directors who want to learn how to create quick prototypes with code.

Enroll now: Code a Small Business Website using popular web frameworks

Summary

Title: Code a Small Business Website using popular web frameworks

Price: $44.99

Average Rating: 4.29

Number of Lectures: 137

Number of Published Lectures: 137

Number of Curriculum Items: 137

Number of Published Curriculum Objects: 137

Original Price: 219.99

Quality Status: approved

Status: Live

What You Will Learn

Learn to create a Small Business Website with 5 pages and all the relevant sections and content

Learn how each framework uses different code structure, classes and attributes to create the same kind of component

Learn how each framework differ in the visual style of each component

Learn what is possible and what isnt with each framework

Who Should Attend

Beginning web designers and developers who want know the most popular frameworks

Web designers and developers who know one of the frameworks, but are curious to see how it compares to other frameworks

UX Designers and Art Directors who want to learn how to create quick prototypes with code

Target Audiences

Beginning web designers and developers who want know the most popular frameworks

Web designers and developers who know one of the frameworks, but are curious to see how it compares to other frameworks

UX Designers and Art Directors who want to learn how to create quick prototypes with code

ABOUT THE COURSE

This course is for the beginner who wants to get a quick introduction to various popular front-end CSS frameworks by recreating the same project multiple times. By taking this course you’ll get introduced to the latest versions of Bootstrap 4, Bootstrap 5, Bulma, Semantic UI, Foundation 6 and Materialize. These frameworks are some of the most popular ones used today by web designers and developers all over the world.

In this course you’ll learn how to create a Small Business Website using various popular front-end CSS frameworks. Using one framework at a time I will start from scratch and walk you through how to create the same project. The project created with each framework will have the same general layout and design, however there will be some small visual differences from project to project due to the specific features and styles of the various frameworks.

The idea behind re-creating the same project with different frameworks is to learn how each framework use different code structure, classes and attributes to create the same kind of component. You will also learn how each framework differ in the visual style of each component, and learn what is possible and what isn’t with each 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 FRAMEWORKS

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

Bootstrap 4 (compatible with the latest version v4.6.0)

Bootstrap 5 (compatible with the latest version v5.1.0)

Bulma (compatible with the latest version v0.8.0)

Semantic UI (compatible with the latest version v2.4.2)

Foundation 6 (compatible with the latest version v6.5.3)

Materialize (compatible with the latest version v1.0.0)

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 useFont Awesome 5 to add icons to your project and how to useGoogle Fonts to add web fonts to your project.

Bootstrap 5:

We’ll use the following parts of Bootstrap 5:

Layout: Containers, Grid system

Content: Typography, Images

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

Utilities: Border, Embed, Flex, Spacing, Text

Bonus:

As a bonus you’ll also learn how to useFont Awesome 5 to add icons to your project and how to useGoogle Fonts to add web fonts to your project.

Bulma:

We’ll use the following parts of Bulma:

Modifiers: Color Helpers, Typography Helpers

Layout: Columns, Container, Footer, Hero, Section

Forms: General, Input, Select, Textarea

Elements: Button, Content, Icon, Image, Notification, Title

Components: Card, Dropdown, Navbar

Bonus:

As a bonus you’ll also learn how to useFont Awesome 5 to add icons to your project.

Semantic UI:

We’ll use the following parts of Semantic UI:

Elements: Button, Container, Header, Icon, Image, Input, List

Collections: Form, Grid, Menu, Message

Modules: Dropdown, Embed

Views: Card

Foundation 6:

We’ll use the following parts of Foundation 6:

General: XY Grid, Forms, Icons

Utilities: Prototyping Utilities

Controls: Button

Navigation: Top Bar, Menu

Containers: Callout, Card, Dropdown

Materialize:

We’ll use the following parts of Materialize:

CSS: Color, Grid, Helpers, Media

Components: Buttons, Cards, Footer, Icons, Navbar

JavaScript: Dropdown, Sidenav

Forms: Select, Text Inputs

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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: About the Course

Lecture 2: Projects Overview and Demos

Lecture 3: Downloading and Installing Bootstrap 4

Lecture 4: Downloading and installing Bootstrap 5

Lecture 5: Downloading and Installing Bulma

Lecture 6: Downloading and Installing Semantic UI

Lecture 7: Downloading and Installing Foundation 6 (Customized Version)

Lecture 8: Downloading and installing Materialize

Lecture 9: Downloading and Installing Font Awesome v5.1.0

Chapter 2: Comparison of Frameworks

Lecture 1: Learning Kit

Lecture 2: Badge

Lecture 3: Breadcrumb

Lecture 4: Breakpoints

Lecture 5: Button

Lecture 6: Button Group

Lecture 7: Card

Lecture 8: Color

Lecture 9: Dropdown

Lecture 10: Form Fields I

Lecture 11: Form Fields II

Lecture 12: Grid

Lecture 13: Message

Lecture 14: Navbar

Lecture 15: Pagination

Lecture 16: Progress

Lecture 17: Tabs

Lecture 18: Tooltip

Lecture 19: Utility Classes

Chapter 3: Bootstrap 4 – Code a Small Business Website

Lecture 1: About the Project

Lecture 2: Home –?Installing Icon Font and Web Fonts

Lecture 3: Home –?Navigation

Lecture 4: Home –?Hero

Lecture 5: Home –?Alert

Lecture 6: Home –?About

Lecture 7: Home –?News

Lecture 8: Home –?Footer

Lecture 9: Home –?Responsive Adjustments

Lecture 10: Home –?Adjustment with Utilities

Lecture 11: Services – Story

Lecture 12: Services – Responsive Adjustments

Lecture 13: Services – Adjustment with Utilities

Lecture 14: About –?Story

Lecture 15: About –?Office

Lecture 16: About –?Clients

Lecture 17: About –?Responsive Adjustments

Lecture 18: About –?Adjustment with Utilities

Lecture 19: Team –?Team

Lecture 20: Team –?Responsive Adjustments

Lecture 21: Team –?Adjustment with Utilities

Lecture 22: Contact – Address and Hours

Lecture 23: Contact – Message

Lecture 24: Contact – Map

Lecture 25: Contact – Responsive Adjustments

Lecture 26: Contact – Adjustment with Utilities

Chapter 4: Bootstrap 5 – Code a Small Business Website

Lecture 1: About the Project

Lecture 2: Home – Navigation

Lecture 3: Home – Hero

Lecture 4: Home – Alert

Lecture 5: Home – What

Lecture 6: Home – News

Lecture 7: Home – Footer

Lecture 8: Services

Lecture 9: About – Story

Lecture 10: About – Office

Lecture 11: About – Clients

Lecture 12: Team

Lecture 13: Contact – Address

Lecture 14: Contact – Hours

Lecture 15: Contact – Message

Lecture 16: Contact – Map

Chapter 5: Bulma – Code a Small Business Website

Lecture 1: About the Project

Lecture 2: Home – Navigation

Lecture 3: Home – Hero

Lecture 4: Home – Notification

Lecture 5: Home –?What We Do

Lecture 6: Home – News

Lecture 7: Home – Footer

Lecture 8: Services

Lecture 9: About –?Our Story

Lecture 10: About –?Our Office

Lecture 11: About –?Our Clients

Lecture 12: Team

Lecture 13: Contact –?Address

Lecture 14: Contact –?Opening Hours

Lecture 15: Contact –?Message

Lecture 16: Contact –?Map

Chapter 6: Semantic UI –?Code a Small Business Website

Lecture 1: About the Project

Lecture 2: Index – Basic Setup

Lecture 3: Index – Navigation

Lecture 4: Index – Hero

Lecture 5: Index – Message

Lecture 6: Index – About

Lecture 7: Index – News

Lecture 8: Index – Footer

Instructors

Jeppe Schaumburg Jensen
Senior software engineer and published author

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 2 votes

4 stars: 3 votes

5 stars: 2 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!