Code a Knowledge Base using popular web frameworks

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 Knowledge Base 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 Knowledge Base. 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:

• Index
  Menu, dropdown, search form, responsive grid layout with card and images, responsive grid layout with text, footer

• Category
  Menu, dropdown, breadcrumb, search form, responsive grid layout, page navigation (including smooth scroll effect), main content with headings and lists with links, support contact, footer

• Article
  Menu, dropdown, breadcrumb, search form, responsive grid layout, page navigation (including smooth scroll effect), main content with headings, text, link, lists, images, message, code block and table, feedback form, support contact, related articles, footer
  

ABOUT THE FRAMEWORKS

The following frameworks will be used to create a Knowledge Base:

• 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, Code, Images, Tables

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

• Utilities: Flex, Position, Spacing, Text

Bootstrap 5:

We'll use the following parts of Bootstrap 5:

• Layout: Containers, Grid system

• Content: Typography, Images, Tables

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

• Utilities: Flex, Position, Spacing, Text

Bulma:

We'll use the following parts of Bulma:

• Modifiers: Typography Helpers

• Layout: Columns, Container, Section

• Forms: General, Input, Radio, Textarea

• Elements: Box, Button, Content, Icon, Image, Table, Title

• Components: Breadcrumb, Card, Message, Navbar, Tabs

Semantic UI:

We'll use the following parts of Semantic UI:

• Elements: Button, Container, Divider, Header, Image, Input, List

• Collections: Breadcrumb, Form, Grid, Menu, Message, Table

• Modules: Dropdown

• Views: Card

Foundation 6:

We'll use the following parts of Foundation 6:

• General: XY Grid, Forms

• Typography: Helper Classes

• Controls: Button, Button Group

• Navigation: Menu, Top Bar, Breadcrumbs

• Containers: Callout, Card, Dropdown, Table

• Plugins: Smooth Scroll

Materialize:

We'll use the following parts of Materialize:

• CSS: Color, Grid, Helpers, Media, Table

• Components: Buttons, Breadcrumbs, Cards, Collection, Footer, Icons, Navbar, Table of Contents

• JavaScript: Dropdown, Pushpin, Scrollspy, Sidenav

• Forms: Radio Button, Text Inputs

---

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