Web

Tools

Atom

Tools

Modern Browser

11

That's ALL

:'(

Front-end

Backend

VS

- says: @#$TG@#%T$#%

Visual Designer

UI Designer

UX Designer

Front-end Engineer

HTML

HyperText Markup Language

CSS

Cascading Style Sheet 

Javascript

Script Language

HTML

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!--Page Content-->
  </body>
</html>

HTML-2

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>There is content text</p>
  </body>
</html>

Common Tags

  • p - paragraph
  • hx - titles
  • div - block, group
  • img - photos
  • video - films
  • input - user input
  • ul, ol, li - list view
  • table - table view

Semantic Tags

  • header
  • footer
  • article
  • section
  • main
  • figure
  • nav
  • mark

HTML - 3

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <main role='main'>
      <article class='topic'>
        <header>
          <h2>I'm feeling wired.</h2>
          <p class='author'>Chia Yu</p>
        </header>
      </article>
    </main>
  </body>
</html>

Attribute

<form role='form' method='post' action='/target'>
  <label for='name'>Name:</label>
  <input type='text' placeholder='your name' id='name' name='username' />
</form>

CSS

#main-container {
  background: #FAFAFA;
}

#main-container > .list {
  padding: 0;
  margin: 0;
}

Something like..

Microsoft Word

Space, Enter: Hi?

Selector

  • id - #container
  • class - .list
  • tag - p
  • universal - *
  • attribute - [type='text']
  • child - .list > .element
  • pseudo - .btn:hover
Made with Slides.com