Skip to main content

Week 03

HTML Forms​

The <form> Tag​

action - the URL to send form data to method - the type of HTTPS request

The <input> Tag​

Creates interactive controls, with the type attribute determinining the type of input.

Types available:

  • text
  • date
  • color
  • file
  • checkbox
  • radio
  • email
  • password
  • submit

The <label> Tag​

Labels are important for site readability. 


<label>Username: 
    <input type="text" placeholder="username" name="username">
</label>

<label for="username">Username:</label>
<input type="text" placeholder="username" name="username">

Validations​

  • The required attribute validates that an input is not empty.
  • Type validations validate that the input is the type that is required, e.g. Email

<form action="/some-url" method="GET">
    <label for="email">Email:</label>
    <input type="email" placeholder="Email.." name="email" id="email" required>
    <label for="password">Passtword:</label>
    <input type="password" placeholder="Password Pls!" name="password" id="password" required>
    <button>Login</button>
    <input type="submit" value="Log Me In">
</form>

Basic Input Categories​

  • Single Line Text
    • Text/Search
    • Hidden
    • Password
  • Multiple Line Text
  • Selection

Additional Input Fields​

  • Email
  • URL
  • Telephone
  • Number
  • Date
  • Time

Nested Elements and the DOM​

Descendant Selector​


<section>
    <h1>Heading</h1>
    <p>Paragraph</p>
    <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
</section>

In the sample code above, the <h1>, <p> and <ul> elements are children of the <section> element, and are siblings.
The <li> elements are children of the <ul> element, and descendants of the <section> element.

  • section p (...)
    • Will only select paragraphs contained within a section.
  • section p a (...)
    • Will only select links inside a paragraph that is contained within a section.

It is possible to go as many levels as you want with descendant selectors, but it is recommended to use only 3 levels at most.

Grouping Selectors​

  • h1 {...}
    • Applies to all h1 elements
  • .class {...}
    • Applies to any element with this class
  • h1, h2 {...}
    • Applies to both h1 and h2 elements
  • h1, h2, .class, #id {...}
    • Applies to both h1 and h2 elements, aal elements with .class and all elements with #id

Styling with DOM​

Inheritance​

CSS styles can be inherited from parent elements

Cascade and Specificity​

A rule declaration with a higher specificity will take precedence, followed by the lowest declaration in the source order.

Specificity​

Specificity determines how browsers decide which CSS rule takes precedence.

In order of decreasing specificity:

  • id (#example)
  • class (.example)
  • type (p)
  • Universal (*)
Cascade​

Style declarations cascade are read from top to bottom. Thus, the lower declaration will take precedence.

Important

The !important keyword overrides source order and specificity.
Added just before the end of the rule declaration before the semicolon. 

p{
    font-size: 12px !important;
}

The only way to override !important is with another !important.

CSS Styles​

Styles can be written inline: 

<h3 style="color: pink">Let's make me pink</h3>
<p style="color: black">Make this paragraph black</p>

Styles can be written using the style tag

<style type="text/css">
    li{
        color: red;
    }
</style>

Styles can be written uing an external stylesheet. This is the most commonly used, and the best practice. 

<link rel="stylesheet" type="text/css" href="style.css">

ID Selector (#)​

An ID selector selects an element with a given ID. You should only use one per page.
An ID, once assigned, should not be repeated.

Class Selector (.)​

A class selector selects an element with a given class.
Classes can be reused and stacked.

CSS Box Model​

Content: Text, Images, etc
Padding: Transparent area around the content, inside the box
Border: Goes around the padding and content
Margin: Space between boxes

CSS Files​

Include your CSS files in this order:

Link to normalize stylesheet: https://necolas.github.io/normalize.css/


<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

Media Queries in CSS​

Media queries are used to modify the CSS of a site depending on qualities such as viewport size or device type.

  • @media
    • Applies one or more CSS properties based on the result of a media query.
  • min-width
    • If the minimum width of the viewport is at least the specific width or wider, then the media query is true
  • max-width
    • If the maximum width of the viewport is at no more than the specified width narrower, then the media query is true.

Example: 

/* media query starts here */
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px ) {
    h1{color: green;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px ) {
    h1{color: blue;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px ) {
    h1{color: purple;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px ) {
    h1{color: lightpink;}
}

Positioning in CSS​

Relative Position​

Relative position moves elements around relative to where they would appear on the page.
It uses top, left, right and bottom properties.

TIP

Think of relative position as:
Object A should be at this position, let's move object 50px away from there.

Absolute Position​

Offset is relative to the entire browser window. It uses top, left, right and bottom properties.

TIP

Think of relative position as:
Object B should be 50px away from the edge of the left side of the browser.

Fixed Position​

Fixed elements are exactly like absolute elements, just that they do not scroll with the rest of the page.
They are commonly known as sticky elements.

Z-Index​

The z-index property let's you control the depth of elements on the page.

  • Negative z-index goes farther into the page (behind)
  • Positive z-index comes out of the page (in front)

An element with a higher z-index value will overlap an element with a lower z-index value.
Z-index only works on elements with a position property set to absolute, fixed, or relative. If you set a z-index with no position, it will do nothing.

Flexbox​

A flexbox container is a parent of a flex item.
The children of a flexbox container can be laid out in horizontal or vertical easily and flex their size when the content grows or shrink accordingly.
Flexbox can be used to ge flexible layouts.

Wireframes​

Wireframes act as a blueprint for a site or app's layout.

  • Shows important functionality
  • Conveys contet types and grouping
  • Shows information hierarchy

Wireframes can

  • Quickly generate ideas
  • Aids discussion
  • Show content hierarchy
  • Establish key functionality

Static Wireframe​

Pros:

  • Usually quick to create
  • Variety of tools and software

Cons:

  • Not responsive

Tools:

  • Pen & Paper
  • Balsimiq
  • Ommigraffle
  • Invision
  • Sketch
  • Framer
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe XD
  • Microsoft Powerpoint

Fidelity​

Fidelity is the level of detail used to produce a wireframe.

Low-Fidelity Wireframes​

Pros:

  • Can be created quickly
  • Get out many ideas before committing to one direction
  • Can be simple like a sketch with pen and paper

Cons:

  • Might not have enough detail for every situation

High-Fidelity Wireframes​

Pros:

  • Contain more detail than low-fiedelity wireframes
  • Closer representation of final design

Cons:

  • Stakeholders might be confused by the design

Boilerplate​

Every HTML document we start with uses this boilerplate: 

<!DOCTYPE html>
<html>
    <head>
        <!-- Our metadata goes here -->
        <title></title>
    </head>
    <body>
        <!-- Our content goes here -->
    </body>
</html>

Comments​

Comments are used to remind us, and other people reading the code, what the line or lines of code means.

<!--HTML Comments are written with this format-->