Table of contents
- Intro: Who am I?, Why am I here?, Our goal today.
- HTML: What is HTML?, Writing HTML
- CSS: CSS, Classes, Frameworks
- Demos: Demo 1, Demo 2, Demo 3, Demo 4, Demo 5, Demo 6
Who am I?
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. 😉
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.
Headings & Paragraphs
Writing a Heading (or Title) or Paragraph is pretty straight-forward in HTML.
<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.
And images use a
src="" (source) to tell a web browser to pull up a particular image file.*
*Does anyone notice something different about our
<img> tag above, compared to the paragraph or link tag we looked at earlier?
Styles, Classes, and Frameworks (oh my!)
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:
<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 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.
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.
Codepen – A free place to write HTML & CSS and test your layouts before publishing.
Materialize Icon Set – Included in the Brainier LMS.
- 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.
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: firstname.lastname@example.org