2018 Brainier E3 Learning Conference – Custom HTML Pages Workshop

Table of contents

Who am I?

Hello! My name is Bjorn Hagstrom, and I’m a website designer & developer. I’ve been building websites for 12+ years, and my focus is on the “front-end” of development. This means I care most about HTML, CSS and Javascript, since those are the languages that web browsers interact with directly. (This is opposed to the “back-end” technologies, languages and processes that happen on a web server.)

Why am I here?

So, I’m here because the nice people at Brainier have created this awesome Custom HTML Page feature which allow you to create your own custom landing pages (this for branding, marketing, etc.) within the Brainier LMS.

The only problem is, it turns out, is that none of you know any HTML! 🤦‍♂️

Our goal today.

Let’s fix that! Today I want you to learn enough HTML to be able to look at some webpage templates that I’m going to provide, and be able to identify and edit (if necessary) the relevant pieces to make them your own. We’re not going to learn everything there is to know about HTML… just enough to be dangerous. 😉

Follow Along!
I have all of these notes live on my website, so if everyone can go to whatmoves.com/brainier you can follow along while I’m talking.

➡️ whatmoves.com/brainier

What is HTML?

HTML is a computer language that helps describe and define the structure a web page.

HTML describes the various bits of content on a page with elements.

Some common HTML elements:

  • p – Paragraph.
  • h1, h2, h3, etc… – Headings.
  • div – Division.
  • a – Anchor (Link).
  • img – Image.
  • ul, ol, li – Lists.

Writing HTML.

Headings & Paragraphs

Writing a Heading (or Title) or Paragraph is pretty straight-forward in HTML.

ex. - <p> content goes here </p>

You’ll see in the above example of a paragraph that we have the letter “p” in brackets on both ends of the bit of content we’re writing. Those bracketed “ps” are called tags in HTML. And with an opening tag and a closing tag*, we’ve created a paragraph, and we’ve written our first HTML!

*Who can spot the difference between an opening tag and closing tag in HTML?

Links & Images

To write an image or a link to a page, we need just a little more information. A link, for example, needs a crazy-sounding thing call an href="" to tell a web browser where the link should point to.

ex. - <a href="http://google.com">Google</a>

And images use a src="" (source) to tell a web browser to pull up a particular image file.*

ex. - <img src="cat.jpg">

*Does anyone notice something different about our <img> tag above, compared to the paragraph or link tag we looked at earlier?

See the Pen Brainier Demo: Anatomy of an HTML tag by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Styles, Classes, and Frameworks (oh my!)

Style

We can add styles to our HTML to update things like font family, size or color. Adding styles looks like this ( where we’re setting the color of an element to red:

ex. - <p style="color: red;"> this content will be red </p>

✏️ Important note: Adding style directly to an element is the strongest but least-flexible way we have of applying styles to HTML. So if we what to override any of the styles we see in our templates later, we’ll use styles directly on a tag like we see above.

Classes

Classes in CSS are a way to combine a bunch of styles together so they’re more easily re-usable. For example, with class="button" the “button” class might have the styles of  background: blue; color: white; padding: 10px;, etc… But instead of having to write all of those styles on every link we want to look like a button, we can just assign the class of “button” where we’ve already identified all of those styles.

See the Pen Brainier Demo: CSS & Classes by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Frameworks

Style Frameworks are essentially collections of CSS classes that are meant to be used together to help create a consistently styled large-scale app. (i.e. – So all of your text, buttons, icons, etc., look the same throughout everywhere your website/app.) The Brainier LMS uses a Framework that we can borrow classes from, which will make it much much easier to create some of the layouts & features we’re after.

 

Let’s build something!
Ok, now let’s take a minute to log in to Brainier, go to the Admin section, then Settings, and finally Custom HTML Pages.

Demo 01

See the Pen Materialize Demo Layout 01 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Demo 02

See the Pen Materialize Demo Layout 02 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Demo 03

See the Pen Materialize Demo Layout 03 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Demo 04

See the Pen Materialize Demo Layout 04 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Demo 05

See the Pen Materialize Demo Layout 05 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Demo 06

See the Pen Materialize Demo Layout 06 by Bjorn Hagstrom (@bjornhagstrom) on CodePen.

Resources

👨‍💻 Code
Codepen – A free place to write HTML & CSS and test your layouts before publishing.

🖼️ Images
Unsplash, Pixabay – Both are resources for free images. (But giving credit is highly recommended for public usage.)

😃 Icons
Materialize Icon Set – Included in the Brainier LMS.

🌈 Colors

  • Google the phrase “color picker” and you’ll get a eye-dropper style color picker that outputs color values you can use in your HTML/CSS.
  • Coolors.co – If you want to get more sophisticated, you can create whole color palettes to help with your page design.

🙋‍♂️Me!
I’m available to help! Either as a consultant (help you do it) or contractor (do it for you). The team at Brainier has my info or you can contact me directly: bjorn@whatmoves.com

⬆️ back to top