Introduction

This video will introduce you to Meraki and explain how to set up your text editor. This is a vital step to creating your website. After you have set up your text editor as the video outlines, copy and paste the starter template into your index.html file.

Starter Template


<!DOCTYPE html>
 <html>
    <head>
      <!--- Required meta tags --->
      <meta name="viewport" content="width=device-width">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!--- Meraki CSS --->
      <link href="style.css"rel="stylesheet" type="text/style"></link>

      <title>Hello World!</title>

    </head>

    <body>
      <!--- Javascript --->
      <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="app.js"></script>
    </body>
</html>

Wayfinder

A wayfinder can help you navigate through your page. It is a fundamental component that could take your website to the next level.

The navigation bar takes the user to different places within your website, making maneuvering always clear.



<nav class="wayfinder">
  <div class="wayfinder-logo">
    <h1>Wayfinder</h1>
  </div>
  <div class="catalog-container">
    <ul class="catalog">
      <li class="way-item">
        <a class="way-link" href="#">Home</a>
      </li>
      <li class="way-item">
        <a class="way-link" href="#">Link</a>
      </li>
      <li class="way-item">
        <a class="way-link" href="#">Link</a>
      </li>
      <li class="way-item">
        <a class="way-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Billboard

Welcome the user to your webpage with a billboard. This component can help you catch your viewer's attention.

It helps your not only enhance your product, but it also provides clarity to a central message.

Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON


<div class="billboard-container">
  <div class="billboard billboard-picture">
    <div class="billboard-content">
      <h1>Title Here</h1>
      <p>Lorem ipsum dolor sit amet,
        consectetur adipiscing
        elit, sed do eiusmod tempor</p>
      <div class="button-space">
        <a class="button-body" href="">BUTTON</a>
      </div>
    </div>
  </div>
</div>

Carousel

Give your viewers a gallery of your product and take them through a sequence of your work.

Adding in a carousel can help you break down more complex concepts into simple steps.

Slide One

Caption

Slide Two

Caption

Slide Three

Caption

Slide Four

Caption

Slide Five

Caption

Slide Six

Caption

Slide Seven

Caption

Slide Eight

Caption

Slide Nine

Caption

Slide Ten

Caption


<div class="gallery-container">
  <div class="slides">

    <div class="slide firstSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide One</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide secondSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Two</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide thirdSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Three</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide fourthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Four</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide fifthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Five</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide sixthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Six</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide seventhSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Seven</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide eighthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Eight</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide ninthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Nine</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>

    <div class="slide tenthSlide">
      <div class="slide-content">
        <h1 class="slide-heading">Slide Ten</h1>
        <p class="slide-caption">Caption</p>
      </div>
    </div>
  </div>

  <div class="gallery-key">
    <span class="key k-one"></span>
    <span class="key k-two"></span>
    <span class="key k-three"></span>
    <span class="key k-four"></span>
    <span class="key k-five"></span>
    <span class="key k-six"></span>
    <span class="key k-seven"></span>
    <span class="key k-eight"></span>
    <span class="key k-nine"></span>
    <span class="key k-ten"></span>

	
  </div>
</div>

Grid System

The grid system will provide you an overall layout of how you want to style your page. This component allows your design to be organized and neat.

The website you're viewing at this moment has even been arranged by a grid system.

Section 6

Section 9

Section 3

Section 5

Section 7


<div class="grid">
  <div class="row">
    <div class="section s-6">
      <div class="content-box"></div>
    </div>
    <div class="section s-6">
      <div class="content-box"></div>
    </div>
  </div>

  <div class="row">
    <div class="section s-9">
      <div class="content-box"></div>
    </div>
    <div class="section s-3">
      <div class="content-box"></div>
    </div>
  </div>

  <div class="row">
    <div class="section s-5">
      <div class="content-box"></div>
    </div>
    <div class="section s-7">
      <div class="content-box"></div>
    </div>
  </div>
</div>

Cards

Cards can help you section off your product as well as seperate different ideas. This is an effective method to display your design.

Feel free to make it unique and alter the styling yourself!

Card Title 1

Card Subtitle

You can display information about your first topic here.

Card Title 2

Card Subtitle

Then you can elaborate on a different idea.

Card Title 3

Card Subtitle

You can even add another card after this one!


<div class="card-deck">
  <div class="card">

    <div class="card-image"></div>
    <div class="card-content">
      <div class="card-heading">
        <h2>Card Title 1</h2>
        <h3>Card Subtitle</h3>
      </div>
      <p class="card-pg">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</p>
    </div>
  </div>
  <div class="card card-shadow">
    <div class=card-image></div>

    <div class="card-content">
      <div class="card-heading">
        <h2>Card Title 2</h2>
        <h3>Card Subtitle</h3>
      </div>
      <p class="card-pg">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</p>
    </div>
  </div>

  <div class="card card-shadow">
    <div class=card-image></div>

    <div class="card-content">
      <div class="card-heading">
        <h2>Card Title 3</h2>
        <h3>Card Subtitle</h3>
      </div>
      <p class="card-pg">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</p>
    </div>
  </div>
</div>

Background Image

Background image is a necessity to intriguing your views. Pictures help bring content to life!

You can use this component as a background or even place it into a card.

Container

A container can help you seperate ideas from the rest of your content.

This component acts as a fence would around a house.

Heading

Here you can explain and elaborate on what you labled as your heading. Feel free to type as much or as little as you want.


<div class="container width-lg">
  <h1 class="h-md txt-center txt-black all-upper">Heading</h1>
  <br>
  <p class="txt-sm txt-center txt-black">
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
  ex ea commodo consequat.</p>
</div>

Buttons

Buttons can help you get from one page to another. Simply link in the page, and it will take the viewer to it.

You can think of it as a teleportaion device.

BUTTON

Helpers

Color Helpers is a vital component that can transform you website. An aesthetic page will surely capture the viewers attention.

Not only that, but there is so many ways you can do it! Below are a few colors you can easily choose from.

meraki

Introduction

Starter Template

CSS

Javascript

Wayfinder

Billboard

Title Here

Carousel

Slide One

Slide Two

Slide Three

Slide Four

Slide Five

Slide Six

Slide Seven

Slide Eight

Slide Nine

Slide Ten

Grid System

Section 6

Section 6

Section 9

Section 3

Section 5

Section 7

Cards

Card Title 1

Card Subtitle

Card Title 2

Card Subtitle

Card Title 3

Card Subtitle

Background Image

Container

Heading

Buttons

Helpers

red-txt red-bg #FF0000

rose-txt rose-bg #d92626

crimson-txt crimson-bg #a81d1d

tangerine-txt tangerine-bg #e86c28

lightorange-txt lightorange-bg #f1af7f

sandstone-txt sandstone-bg #ca5c23

yellow-txt yellow-bg #FFFF00

butter-txt butter-bg #fddf28

mustard-txt mustard-bg #e1ac24

green-txt green-bg #4ca635

chartreuse-txt chartreuse-bg #a0f62c

pistachio-txt pistachio-bg #a5cab6

blue-txt blue-bg #0000FF

sky-txt sky-bg #53b9d1

midnightblue-txt midnightblue-bg #191970

purple-txt purple-bg #611f94

lavender-txt lavender-bg #E6E6FA

periwinkle-txt periwinkle-bg #ae7dc8

pink-txt pink-bg #e883c2

lightpink-txt lightpink-bg #FFB6C1

deeppink-txt deeppink-bg #FF1493

pearl-txt pearl-bg #fafbf5

ivory-txt ivory-bg #FFB6C1

coconut-txt coconut-bg #fceee0

black-txt black-bg #000

soot-txt soot-bg #110d07

metal-txt metal-bg #0c0b0a

gray-txt gray-bg #808080

silver-txt silver-bg #9d9cbb

lightgray-txt lightgray-bg #D3D3D3

brown-txt brown-bg #231201

peanut-txt peanut-bg #654a27

cinnamon-txt cinnamon-bg #4f1e0e

red-txt
red-bg
#FF0000

rose-txt
rose-bg
#d92626

crimson-txt
crimson-bg
#a81d1d

tangerine-txt
tangerine-bg
#e86c28

lightorange-txt
lightorange-bg
#f1af7f

sandstone-txt
sandstone-bg
#ca5c23

yellow-txt
yellow-bg
#FFFF00

butter-txt
butter-bg
#fddf28

mustard-txt
mustard-bg
#e1ac24

green-txt
green-bg
#4ca635

chartreuse-txt
chartreuse-bg
#a0f62c

pistachio-txt
pistachio-bg
#a5cab6

blue-txt
blue-bg
#0000FF

sky-txt
sky-bg
#53b9d1

midnightblue-txt
midnightblue-bg
#191970

purple-txt
purple-bg
#611f94

lavender-txt
lavender-bg
#E6E6FA

periwinkle-txt
periwinkle-bg
#ae7dc8

pink-txt
pink-bg
#e883c2

lightpink-txt
lightpink-bg
#FFB6C1

deeppink-txt
deeppink-bg
#FF1493

pearl-txt
pearl-bg
#fafbf5

ivory-txt
ivory-bg
#FFB6C1

coconut-txt
coconut-bg
#fceee0

black-txt
black-bg
#000

soot-txt
soot-bg
#110d07

metal-txt
metal-bg
#0c0b0a

gray-txt
gray-bg
#808080

silver-txt
silver-bg
#9d9cbb

lightgray-txt
lightgray-bg
#D3D3D3

brown-txt
brown-bg
#231201

peanut-txt
peanut-bg
#654a27

cinnamon-txt
cinnamon-bg
#4f1e0e