Learn Bulma CSS for free

Learn Bulma CSS for free

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    	</head>
    	<body>
    		<section class="section">
    			<div class="container">
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
            <style>
                
    .center {
        display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <link rel="stylesheet" href="styles/debug.css">
    		<style>
    
    .is-paddingless-horizontal { padding-left: 0; padding-right: 0; }
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .hero {
    	background: black url(images/hero-1.jpg) center / cover;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<style>
    
    .hero {
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<style>
    
    .hero {
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Hello Bulma!</title>
    		<link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<link rel="stylesheet" href="styles/grid.css">
    		<style>
    

Building websites is hard… But Bulma can lessen the pain! πŸ™Œ

Bulma is the brainchild of CSS Guru Jeremy Thomas @jgthms. It's a modern CSS framework based on Flexbox. The framework makes scaffolding and designing websites a breeze with best-in-class documentation and well-designed, intuitive components and modifiers. ✨

Bulma is great not just for building but learning best HTML and CSS practices, too! It's like having @jgthms πŸ‘¨β€πŸŽ¨ there the whole time. 😍

In this course, you'll learn to create three beautiful, responsive websites with Bulma in less than an hour. It'll cover the following concepts:

  • Bulma classes
  • Modifiers and helpers
  • Color helpers
  • Padding
  • Width
  • Center content
  • Titles
  • Columns
  • Container
  • Hero, Section, Navbar
  • Notifications
  • Bulma and CSS Grid

... and much more!

And remember, this isn't a regular video course, it's a Scrimba course! This means you can interact with the code inside the tutorials whenever you want, which makes learning much more fun!

Have a question, comment, or feedback? Feel free to reach out to the course creator Zaydek at Twitter: @username_zaydek.