Code a Knowledge Base using popular web frameworks
What you'll learn
- Learn to create a Knowledge Base with 3 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 isn't with each framework
Course content
- Preview03:12
- Preview00:20
- Preview07:29
- 07:34Downloading and installing Bootstrap 5
- Preview02:23
- 09:49Downloading and installing Semantic UI
- 03:47Downloading and Installing Foundation 6 (Complete Version)
- 04:10Downloading and installing Materialize
- Preview04:49
Requirements
- Basic knowledge of HTML and CSS
- Code editor and browser of any choice
Description
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, footerCategory
Menu, dropdown, breadcrumb, search form, responsive grid layout, page navigation (including smooth scroll effect), main content with headings and lists with links, support contact, footerArticle
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!
Who this course is for:
- 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
Instructor
![Jeppe Schaumburg Jensen](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.2 Instructor Rating
- 1,187 Reviews
- 28,938 Students
- 10 Courses
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.
Front-end development
I started developing websites for desktop computers in 1999 and in 2000 I started developing my first websites for the mobile web as well.
I have been a graduate teaching assistant in an introductory course about web design and development.
I currently work as a front-end developer at one of the biggest global web agencies, Isobar.
Interaction design
I have a Master of Science in Information Technology with a specialization in Interaction Design and User Experience.
I have worked as a user experience designer at the biggest Danish online webshop: Saxo.
Music
When not working with the web I work as a professional musician, mostly playing the drums in various bands. I also consider myself as an expert in using Ableton Live for live performances, with a lot of experience in how to create and use backing tracks.
Productivity
I have spent many hours to improve my workflow and productivity by reading books about the topic and experimenting with different techniques, tools, software and apps.