Using #Hashtags

Beyond having a clear and precise hashtag (that’s an entire conversation on it’s own).

The three keys for a successful #hashtag campaign is

  1. Build Awareness
  2. Be Visible
  3. Create Conversation

Build Awareness

Your hashtag should be included in all social promotions of your event.

Be Visible

Make sure to include your event hashtag on your registration page, informing attendees to “Join the Conversation.” – the website footer and website homepage. 

Create Conversation

Have people use your hashtag. At a live event (which I think custom hashtags can be very successful). Having your MC announcing the hashtag and having it everywhere at the event. Make the hashtag one of your team members.

Using a Hashtag for an Event

Events are the perfect occasion to get creative with your #hashtag. For a unique event, have a unique #hashtag so when you visits to your #hashtag feed that content will be precise and related, without other random posts populating and pollulatting your feed.

What Hashtag to Use?

There is a bit of a side hustle with #hashtags – genetic #hashtags are for genetic items. Platforms like Pinterest do an awesome job of connection all these similarities into wide ranging genetic definitions, which works for Pinterest. Your small business, event, location, airbnb, doesn’t belong in the vast data of all other internet information. #hashtags are a little secret weapon to connect (for free) with your community.

  • Make you #hashtag unique enough to set hashtag in it’s own feed.
  • Don’t make your hashtag difficult to enter – make sure each letter is distinguishable.
  • Short hashtag – the easier it is to remember and enter the more useful your hashtag can be.

Track your #hashtag on All Platforms

https://walls.io/ – brilliant service (that you can use free for a month).

Walls – tracks you hashtags on all platforms via one interface. Provide you an instant overview of when, who, and where your hashtag is being used. With the free month service is worth testing out a unique #hashtag.

On the flip side – Walls can also be used to track for other #hashtag trends, including competition, trending keywords, trending locations – you can get creative (without having to scrolling endless feeds).

Showcase your live feed on the day of the event on large screens

WIth the https://www.tweetbeam.com/ ($200 daily) there is so much old school idealism about what Tweetbeam brings to your event that its a game change. It’s like hearing your name on the radio for the first time, or the sport cam broadcasting your face at the game. And then Tweenbeam brings the modern day connection and technology that is easy to understand and include at your event. What does TweenBeam do? Simple answer, TweenBeam provides you with the tools to track your #hashtag feed on all social media platform for content that you may wish to highlight on your LIVE FEED – that is broadcasting on large screens during your event. Providing you with a live connection with the attendees as they same their experiences. While you may not want to broadcast all posts – attendees know that they can contact you via the hashtag for help, assistance, or report on how long the bathroom lines are. With this direct connect with everyone in at your event – you could get very creative with a wide range of text games, quizzes, questionnaires, feedback, but mostly interaction.

CSS – 01 Styles

CSS – 01 Styles

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Header 01

Header 02

Header 03

Header 04

Header 05
Header 06

Paragraph Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


List Types

Definition List

Definition List Title
This is a definition list division.
This is a second definition list item.

Ordered List

  1. Item one.
  2. Item two.

Unordered List

  • Item one.
  • Item two.

Tables

Responsive Table Layout
PersonDue DateAmountPeriod
Billie04/01/2016$1,19003/01/2016 – 03/31/2016
Jill03/01/2016$2,44302/01/2016 – 02/29/2016
Jamie03/01/2016$1,18102/01/2016 – 02/29/2016
Robin02/01/2016$84201/01/2016 – 01/31/2016

Misc. Formatting Sub, Sup, Pre, Acronym, Abbr, and Code

Subscript

Subscript is the word, letter, object, or symbol positioned below the line.

Superscript

Superscript is the word, letter, figure, or symbol positioned above the line.

Cite

How to Cite Content

Pre.

Preformatted Text is presented exactly as written in the HTML file. To preserve typograpical formatting that affects the meaning of the content. Such as in poems, or lines of code, ASCII art, and transcripts. 

Acronym Tag

Acronym have a title tag added to the Acronym – in this case the title is National Basketball Association. NBA

Abbreviation Tag

A hidden Title Tag for the Abbreviation

Lenion AVE.

Blockquote

“Blockquotes are used to quote content from another source – can often be enclosed with quote marks”

– My name is prince

Code

The code tag provides a method to display code content with fixed letter size, font, and spacing.

Forms

The Form Tag is used for creating forms from the user. With a range of different form elements.

Form Element – Text Box Input

Capture short text answers.

Form Element – Password Input






Form Element – Text Area Input

The textarea element lets your users answer in their own words (with limits).

Form Element – Select Drop Down

Form Element – Check Box

How I Like to Travel





Form Element – Radio Input

The radio button allows the user to select only one anwser of many answers.

Choose your favorite Web language:

   
   
   

Form Element – File Input

Have the user upload a file.


Form Element – Submit Button

A form is nothing without a submit button.

CSS – 01 Styles

CSS – 02 Box Model

Demonstrating the Box Model

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Box Model

The CSS box model is essentially a box that wraps around every HTML element.

The content of the box has:

  • 2em padding
  • 20px margin
  • Border 2em Tomato Solid

CSS Values:

  • Width = 100%
  • background-color: LightSteelBlue;
  • padding: 2em;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • box-shadow: inset 0.2em 0.2em steelblue;

Demonstrating Box Model with Grid and Flex

Column One

Column One

Column One

CSS Values:

  • grid-template-columns: repeat(3, 1fr)
  • grid-template-rows: 100px;
  • column-gap: 10px;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • display: flex;

CSS – 04 Flexbox

With just a few lines of code. The display blocks can load as Flex Blocks with a Flex-Direction.

When setting the parent element for Flexbox to display: flex.
The children elements will automatically align left-to-right.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Row-Reverse

Using Flex-Direction to Row-Reverse the order the row content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Column Reverse

Using Flex-Direction to Column-Reverse the order the Column content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Justify Content

Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.

Flex-Direction = Fix Align Items

Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (height must be set to auto).

Flex-Direction = Align Self

Align-self allows the alignment of a single item to be targeted and changed.

Flex Wrap

Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.

flex-wrap: nowrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap-reverse

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Flex Flow

Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.

  • flex-flow: column wrap

Align Content with Flexbox

Align Content only impacts content on the cross axis that is more than one line long using the following options.

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch

Vertically Centering with Flexbox

.parent {display:flex; align-items: center;}