Master Bulma CSS framework and code 4 projects with 14 pages
3.8 (71 ratings)
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.
523 students enrolled

Master Bulma CSS framework and code 4 projects with 14 pages

Master the latest version of Bulma and create real projects and themes while learning HTML, web design and coding
3.8 (71 ratings)
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.
523 students enrolled
Last updated 4/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
  • 10 hours on-demand video
  • 1 article
  • 5 downloadable resources
  • 44 coding exercises
  • 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 how to create and use all elements, components and modifiers of the Bulma framework
  • Learn how to create four different responsive websites using the Bulma framework
  • Practice with 44 coding exercises and a special built Bulma Learning Kit (100+ source files)
  • Master the latest version of Bulma
  • How to creating fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to use all the modifiers
  • How to create all kinds of forms
  • How to build all of the 11 elements
  • How to build all of the 10 components
  • How to add icons with Font Awesome 5
  • Project 1: Create a resume and CV page with Bulma
  • Project 2: Create a small business website with Bulma
  • Project 3: Create a knowledge base with Bulma
  • Project 4: Create an online forum
Course content
Expand all 102 lectures 10:10:33
+ Introduction
8 lectures 21:15

An introduction to this course with an overview of what you're going to learn and create.

Preview 02:23

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.

Projects Overview and Demos
00:22

An introduction to the Bulma framework. This will give you an overview about its history, general features, available components and much more.

Preview 03:33

Learn about how you can create responsive web pages with Bulma.

Responsiveness
01:54

Learn about all of the available color classes that can be used with Bulma for text, backgrounds, and some of the components.

Colors
02:06

Learn how to download and install the latest version of Bulma on your local machine.

Preview 02:23

Learn how to download and install the Font Awesome icon set and include it in your own project.

Downloading and installing Font Awesome v5.1.0
04:49

Learn how to use and navigate the custom built Bulma Learning Kit created specifically for this course. This is very useful when learning about all the features, components and utilities of Bulma.

Bulma Learning Kit
03:45
+ Modifiers
4 lectures 29:53

Learn how to create and use helpers. Apply helper classes to almost any element, in order to alter its style.

Preview 07:43
Helpers
1 question

Learn how to create and use responsive helpers. Show/hide content depending on the width of the viewport.

Responsive Helpers
08:00
Responsive Helpers
1 question

Learn how to create and use color helpers. Change the color of the text and/or background.

Color Helpers
03:49
Color Helpers: Background Color
1 question
Color Helpers: Text Color
1 question

Learn how to create and use typography helpers. Change the size and color of the text for one or multiple viewport width.

Typography Helpers
10:21
Typography Helpers: Text Weight
1 question
Typography Helpers: Text Transformation
1 question
Typography Helpers: Responsive Text Alignment
1 question
Typography Helpers: Responsive Text Size
1 question
+ Layout
8 lectures 56:29

Learn how to create and use columns. A simple way to build responsive grid systems.

Preview 23:04

Learn how to create and use containers. A simple container to center your content horizontally.

Container
02:44
Container
1 question

Learn how to create and use heroes. An imposing hero banner to showcase something.

Hero
10:52
Hero
1 question

Learn how to create and use sections. A simple container to divide your page into sections, like the one you're currently reading.

Section
01:19
Section
1 question

Learn how to create and use footers. A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.

Footer
01:12
Footer
1 question

Learn how to create and use levels. A multi-purpose horizontal level, which can contain almost any other element.

Level
04:04

Learn how to create and use media objects. The famous media object prevalent in social media interfaces, but useful in any context.

Media Object
05:50

Learn how to create and use tiles. A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids.

Tiles
07:24
+ Forms
6 lectures 01:05:58

Learn how to create and use general form controls. All generic form controls, designed for consistency.

Preview 22:36
Form - Control
1 question
Form - Field
1 question
Form - Addon
1 question

Learn how to create and use inputs. The text input and its variations.

Input
11:26
Input
1 question

Learn how to create and use textareas. The multiline textarea and its variations.

Textarea
07:09
Textarea
1 question

Learn how to create and use selects. The browser built-in select dropdown, styled accordingly.

Select
08:12
Select
1 question

Learn how to create and use checkboxes and radio buttons. The 2-state checkbox in its native format and the mutually exclusive radio buttons in their native format.

Checkbox & Radio Button
06:57

Learn how to create and use file inputs. A custom file upload input, without JavaScript.

File
09:38
+ Elements
11 lectures 59:28

Learn how to create and use boxes. A white box to contain other elements.

Box
01:12
Box
1 question

Learn how to create and use buttons. The classic button, in different colors, sizes, and states.

Preview 13:54
Button: Default Button
1 question
Button: Button Colors
1 question
Button: Button Sizes
1 question
Button: Button Styles
1 question
Button: Button States
1 question

Learn how to create and use content. A single class to handle WYSIWYG generated content, where only HTML tags are available.

Content
03:40
Content
1 question

Learn how to create and use the delete element. A versatile delete cross.

Delete
03:16
Delete
1 question

Learn how to create and use icons. Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.

Icon
04:28
Icon
1 question

Learn how to create and use images. A container for responsive images.

Image
07:07
Image
1 question

Learn how to create and use notifications. Bold notification blocks, to alert your users of something.

Notification
03:05
Notification
1 question

Learn how to create and use progress bars. Native HTML progress bars.

Progress
03:55
Progress
1 question

Learn how to create and use tables. The inevitable HTML table, with special case cells.

Table
05:18
Table
1 question

Learn how to create and use tags. Small tag labels to insert anywhere.

Tag
08:42
Tag
1 question

Learn how to create and use titles. Simple headings to add depth to your page.

Title
04:51
Title
1 question
+ Components
10 lectures 01:16:01

Learn how to create and use breadcrumbs. A simple breadcrumb component to improve your navigation experience.

Breadcrumb
07:05
Default Breadcrumb
1 question
Various Breadcrumbs
1 question

Learn how to create and use cards. An all-around flexible and composable component.

Preview 07:13
Card
1 question

Learn how to create and use dropdowns. An interactive dropdown menu for discoverable content.

Dropdown
08:37

Learn how to create and use menus. A simple menu, for any type of vertical navigation.

Menu
05:36

Learn how to create and use messages. Colored message blocks, to emphasize part of your page.

Message
03:56
Default Message
1 question
Message Colors
1 question
Message Sizes
1 question

Learn how to create and use modals. A classic modal overlay, in which you can include any content you want.

Modal
10:18
Modal
1 question

Learn how to create and use navbars. A responsive horizontal navbar that can support images, links, buttons, and dropdowns.

Navbar
10:17

Learn how to create and use paginations. A responsive, usable, and flexible pagination.

Pagination
07:46
Default Pagination
1 question
Various Paginations
1 question

Learn how to create and use panels. A composable panel, for compact controls.

Panel
08:08

Learn how to create and use tabs. Simple responsive horizontal navigation tabs, with different styles.

Tabs
07:05
Default Tabs
1 question
Tabs Styles
1 question
+ Project 1: Resume and CV Page
9 lectures 54:30

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 02:02

Setup and basic structure of the project.

Setup and Basic Structure
05:19

Learn how to create the "Introduction" section of this project.

Box – Introduction
03:54

Learn how to create the "Work Experience" section of this project.

Box – Work Experience
08:58

Learn how to create the "Education" section of this project.

Box – Education
03:37

Learn how to create the "Testimonials" section of this project.

Box – Testimonials
02:34

Learn how to create the "Contact Info" section of this project.

Box – Contact Info
13:47

Learn how to create the "Portfolio" section of this project.

Box – Portfolio
06:29

Learn how to create the "Skills" section of this project.

Box – Skills
07:50
+ Project 2: Small Business Website
17 lectures 01:27:04

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 03:35

A quick guide to installing Bulma and Font Awesome for this project.

Installing Bulma and Font Awesome
03:46

Learn how to create the "Navigation" section of this project.

Home – Navigation
09:55

Learn how to create the "Hero" section of this project.

Home – Hero
04:47

Learn how to create the "Notification" section of this project.

Home – Notification
01:48

Learn how to create the "What we do" section of this project.

Home – What We Do
05:20

Learn how to create the "News" section of this project.

Home – News
06:42

Learn how to create the "Footer" section of this project.

Home – Footer
10:11

Learn how to create the "Services" section of this project.

Services
04:14

Learn how to create the "Our story" section of this project.

About – Our Story
02:23

Learn how to create the "Our office" section of this project.

About – Our Office
02:56

Learn how to create the "Our clients" section of this project.

About – Our Clients
04:24

Learn how to create the "Team" section of this project.

Team
06:10

Learn how to create the "Address" section of this project.

Contact – Address
04:57

Learn how to create the "Opening hours" section of this project.

Contact – Opening Hours
01:19

Learn how to create the "Message" section of this project.

Contact – Message
11:33

Learn how to create the "Map" section of this project.

Contact – Map
03:04
+ Project 3: Knowledge Base
17 lectures 59:23

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 03:25

Learn how to create the "Navigation" section on the "Home" page of this project.

Index – Navigation
06:48

Learn how to create the "Search" section on the "Home" page of this project.

Index – Search
03:12

Learn how to create the "Articles" section on the "Home" page of this project.

Index – Articles
04:56

Learn how to create the "Categories" section on the "Home" page of this project.

Index – Categories
03:20

Learn how to create the "Footer" section on the "Home" page of this project.

Index – Footer
03:24

Learn how to create the "Top Bar" section on the "Category" page of this project.

Category – Top Bar
04:49

Learn how to create the "Page Navigation" section on the "Category" page of this project.

Category – Page Navigation
03:29

Learn how to create the "Main" section on the "Category" page of this project.

Category – Main
03:21

Learn how to create the "Aside" section on the "Category" page of this project.

Category – Aside
02:11

Learn how to create the "Smooth Scroll" effect on the "Category" page of this project.

Category – Smooth Scroll
04:57

Learn how to create the "Top Bar" section on the "Article" page of this project.

Article – Top Bar
01:25

Learn how to create the "Page Navigation" section on the "Article" page of this project.

Article – Page Navigation
00:58

Learn how to create the "Content" section on the "Article" page of this project.

Article – Content
05:32

Learn how to create the "Aside" section on the "Article" page of this project.

Article – Aside
01:27

Learn how to create the "Feedback" section on the "Article" page of this project.

Article – Feedback
04:24

Learn how to create the "Smooth Scroll" effect on the "Article" page of this project.

Article – Smooth Scroll
01:45
+ Project 4: Online forum
12 lectures 01:40:32

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

About the project
02:56

Learn how to create the "Navbar and Breadcrumb" section on the "Index" page of this project.

Index – Navbar and Breadcrumb
12:33

Learn how to create the "Board Overview" section on the "Index" page of this project.

Index – Board Overview
13:02

Learn how to create the "Members and Statistics" section on the "Index" page of this project.

Index – Members and Statistics
11:00

Learn how to create the "Footer" section on the "Index" page of this project.

Index - Footer
02:30

Learn how to create the "Forum Category Overview" page of this project.

Forum Category Overview
03:40

Learn how to create the "Topics Overview" section of this project.

Topics Overview
09:51

Learn how to create the "Pagination" section of this project.

Pagination
05:16

Learn how to create the "Filer and Sorting Widget" section of this project.

Filter and Sorting Widget
09:16

Learn how to create the "Content" section of the "Post" page of this project.

Post – Content
11:24

Learn how to create the "Comment and Login" section of this project.

Post – Comment and Login
10:52

Learn how to create the "New Topic" page of this project.

New Topic
08:12
Requirements
  • Basic understanding of HTML
  • A text editor and a browser
Description

ABOUT

Bulma - one of the world's most popular front-end frameworks!

This course covers all the different parts of the latest version of one of the world's most popular front-end framework, Bulma 0.8.0. Bulma has been used by thousands of people around the world and have been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Bulma works across all kinds of devices, browsers and screen sizes and will have a clean and modern design.

This course is for the beginner who want to learn Bulma from the bottom up. It goes through all the different parts, but each lecture can be watched independently.

In addition to just learning about the different parts of Bulma you will find a detailed walk-through of how to build four different responsive and modern complete projects using only Bulma.

PROJECTS

Create the following projects with Bulma

  • Project 1: Resume and CV Page

  • Project 2: Small Business Website

  • Project 3: Knowledge Base

  • Project 4: Online Forum

LEARNING STYLE

More than just video lectures

In addition to the video lectures this course contains the following kinds of learning materials:

  • 44 coding exercises:
    A total of 301 automatic tests against your code. This is one of the best ways to learn how to code - no downloads or installations required.

  • Bulma Learning Kit: Downloadable ZIP file that works offline A custom built learning kit with source code for all parts of Bulma. Features a reference section with many examples and a practice section, which you can use while learning about Bulma. More than 100 source files included in this learning kit.

UPDATES

Upcoming future updates for this course will include the following:

  • New projects will be added: online shop, social network, portfolio, CMS admin, dashboard and more...

  • New components, utilities and other features in future versions of Bulma will be added

  • Advanced section on how to customize Bulma with Sass

  • Quizzes and assignments

TESTIMONIALS

Don't take my word for it – read what other students are saying:

If you want to learn Bulma, this is the course to buy. (...) The course is direct to the point and it doesn't waist your time. At the end you'll know everything you need about Bulma.
Nelson Prado

(...) i am looking forward to the projects which seem to be promising :D
– Martin Nirtl

I'm enjoying the course, the explanation (...)
– Leonardo Isso Campos de Oliveira

Who this course is for:
  • Anyone who wants to learn how to make responsive and modern websites with Bulma
  • Anyone who wants to learn how to make quick prototypes
  • Anyone who wants to learn a new and popular CSS framework