tips-and-tricks.md

FAC-15 Tips & Tricks

Goal

Keep track of all the useful lessons, tips, and tricks we come across during FAC-15.

Method

Each tip should indlude a short description and How To. We'll also do our best to include the live version and repo of the project, and a link for further reading.

Contributing

This file is a work in progress, aimed to allow everyone to contribute. Please feel free to edit it to make things clearer.

Table of Contents

• Introduction

  • Goal
  • Method
  • Contributing

• Week 1

  • Team Awesome
    • Smooth Scrolling
    • Icons
    • Vertical Navbar
    • Grid in Mobile Display
  • Team KA$H
    • Adding a favicon
    • Using gimp for designing a logo
    • Automatic form validation
    • Including invisible text for screen readers
  • Team CCSM
    • Hamburger menu
    • Adding alert messages as form validation
  • Team CC
    • input field’s pattern attribute
    • aria-labelledby
    • Grid
    • Linking each team member image to it’s own team bio

Team Awesome

Project link | Github repo

Smooth Scrolling

• We found a quick and simple way to add smooth scrolling to the entire html page with no JS code. To apply it to your project, add this next block of code to your css file:

  html {
    scroll-behavior: smooth;
  }
  

• ⚠️ This does not support all browsers/ all browser versions: It currently doesn't work on Safari & Explorer. Also doesn't work on Chrome versions older than 61.0 nor on Firefox versions older than 36.0.

• 📖 Resource: w3schools

Icons

• We used Font Awesome to add icons and logo to our portfolio. The way to do this is to first Include the font awesome library in your index.html > head tag:

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  

  Then, use a span tag to add icons, like so:

  <span class="fas fa-pencil-alt fa-3x colorcss" ></span>
  

  The code above adds a pencil shaped icon to the page. The fa-3x sets the icon size. We chose to make it three times bigger than its original size. We also added our own project class name colorcss, that adds a specific color to the icon.

• 📖 Resource: Font Awesome: Getting Started

Vertical mobile navbar

Media queries & grid-template-rows

KASH

Portfolio URL | Github repo

Adding a Favicon

Using gimp for designing a logo

Automatic form validation

In the html, write "" for the email box. Add "<input type=text">" for the names, and "" for the submit button. More on this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

Including invisible text for screen readers

CCSM

Portfolio link | Github repo

Hamburger menu

We nicked code from an article for this, and altered it to fit our purpose. Will see if Mike can get the link...

Adding alert messages as form validation

We used regex rules, and added an eventListener on the submit button, resulting in a relevant alert message if certain criteria wasn't met (i.e no name inputted, or an invalid email address).

I (Charlie) personally think that other groups' use of the type attribute in the HTML input tag is an easier and nicer way to achieve this! Likewise for the pattern attribute instead of writing out regex rules in the JS file.

Useful resource for testing regex - https://regex101.com/ . Thanks Hannah

CC

Portfolio link | Github repo

input field's pattern attribute

aria-labelledby

Grid

Linking each team member image to it's own team bio

Other useful tricks

Shortcuts

To create a html skeleton on vs code, type ! and press the tab key.