Code a Knowledge Base using popular web frameworks
2.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
29 students enrolled

Code a Knowledge Base using popular web frameworks

Learn web design by coding a website using 5 CSS frameworks: Bootstrap 4, Bulma, Semantic UI, Foundation 6 & Materialize
2.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
29 students enrolled
Last updated 2/2020
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • 1 article
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Expand all 113 lectures 08:47:26
+ Introduction
7 lectures 31:44

Get an overview of all the projects you will learn to create in this course. You can also follow the links to experience live demos of all the projects.

Preview 00:15
Downloading and installing Semantic UI
09:49
Downloading and Installing Foundation 6 (Complete Version)
03:47
+ Comparison of Frameworks
19 lectures 03:35:39
Learning Kit
04:13
Badge
03:30
Breakpoints
02:24
Button Group
04:17
Card
11:44
Color
21:11
Dropdown
12:00
Form Fields I
20:19
Form Fields II
24:12
Grid
15:15
Message
08:06
Navbar
14:38
Pagination
17:56
Tabs
15:29
Tooltip
06:32
+ Bootstrap 4 – Code a Knowledge Base
22 lectures 01:12:21
Index – Navigation
05:10
Index – Search
02:25
Index – Articles
02:49
Index – Categories
01:47
Index – Footer
03:01
Index – Responsive Adjustments
03:18
Index – Adjustment with Utilities
04:44
Category – Top Bar
03:35
Category – Page Navigation
02:09
Category – Main
02:10
Category – Aside
01:22
Category – Responsive Adjustments
04:48
Category – Adjustment with Utilities
03:56
Category – Smooth Scroll
04:35
Article – Top Bar
02:16
Article – Page Navigation
00:44
Article – Content
10:45
Article – Aside
01:26
Article – Feedback
04:25
Article – Adjustment with Utilities
02:38
Article – Smooth Scroll
01:24
+ Bulma – Code a Knowledge Base
17 lectures 59:23
Index – Navigation
06:48
Index – Search
03:12
Index – Articles
04:56
Index – Categories
03:20
Index - Footer
03:24
Category – Top Bar
04:49
Category – Page Navigation
03:29
Category – Main
03:21
Category – Aside
02:11
Category – Smooth Scroll
04:57
Article – Top Bar
01:25
Article – Page Navigation
00:58
Article – Content
05:32
Article – Aside
01:27
Article – Feedback
04:24
Article – Smooth Scroll
01:45
+ Semantic UI – Code a Knowledge Base
17 lectures 51:09
Index – Basic Setup
00:52
Index – Navigation
04:41
Index – Search
01:59
Index – Articles
03:55
Index – Categories
03:44
Index – Footer
04:17
Category – Search
03:23
Category – Breadcrumb
02:01
Category – Page Navigation
06:02
Category – Article List
03:09
Category – Support
01:58
Article – Breadcrumb
02:29
Article – Page Navigation
00:45
Article – Content
04:44
Article – Feedback
04:29
Article – Related Articles
Processing..
+ Foundation 6: Code a Knowledge Base
16 lectures 42:46
Index – Basic Setup
00:59
Index – Top Bar
03:59
Index – Search
02:00
Index – Articles
03:34
Index – Categories
02:29
Index – Footer
03:28
Category – Breadcrumbs
03:47
Category – Page Navigation
03:03
Category – Article List
02:44
Category – Support
01:40
Article – Breadcrumbs
01:46
Article – Page Navigation
00:43
Article – Content
05:11
Article – Feedback
03:36
Article – Related Articles
01:46
+ Materialize CSS: Code a Knowledge Base
15 lectures 54:23
About the Project
03:09
Index – Basic Setup
01:13
Index – Top Bar
08:41
Index – Search
02:10
Index – Articles
03:39
Index – Footer
04:13
Category – Breadcrumbs
03:31
Category – Page Navigation
02:51
Category – Article List
11:40
Category – Support
02:09
Article – Breadcrumbs
01:28
Article – Page Navigation
00:39
Article – Content
03:15
Article – Feedback
03:38
Article – Related Articles
02:07
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, 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.4.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

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