fbpx

Front-End Web Development

COURSE OUTLINE

INTRODUCTION AND COURSE OVERVIEW

– What is Front End Development?

  • What is difference between Front End Development and Back End Development?
  • What is a web browser, server and how they work?
  • Install required tools

– Intro to HTML.

  • HTML Structure
  • Specifying dierent versions of HTML – Doctype
  • Understanding structure
  • Learning about markup
  • Tags, attributes and elements

– Text

  • Headings and paragraphs
  • Bold, italic, emphasis
  • Structural and semantic markup

– Lists

  • Numbered lists
  • Bullet lists
  • Definition lists

– Links

  • Creating links between pages
  • Linking to other sites
  • Email links

– Images

  • How to add images to pages
  • Choosing the right format of image
  • Optimize images for the web

– Tables

  • How to create table
  • What information suits tables
  • How to represent complex data in tables

– Forms

  • Different kinds of form controls
  • New HTML5 form controls

– Video

  • Audio
  • Iframes – YouTube

– Comments

  • Meta Information
  • Class Attribute
  • ID Attribute
  • Escape characters

– Block elements

  • Inline elements
  • Inline block elements
  • Grouping elements & text elements in block and inline

– Block elements

  • Inline elements
  • Inline block elements
  • Grouping elements & text elements in block and inline

– Introduction in CSS

  • What CSS does?
  • How CSS works?
  • Rules, properties and values
  • Inheritance, parent – Child relationship

– Color – CSS

  • How to specify a color
  • Color terminology and contrast
  • Background color

– Text

  • Size and typeface of text
  • Bold, italics, capitals, underlines
  • Spacing between lines, words and letters

Pseudo classes and elements in CSS?

– CSS Resets

How they work

– Boxes

  • Controlling size of boxes
  • Box model for borders, margin, and padding
  • Displaying and hiding boxes
  • Shadows

– List, Tables and forms

  • Specifying bullet point styles
  • Adding borders and backgrounds to tables
  • Changing the appearance of form elements

– Layout

  • Controlling the position of elements
  • Creating site layouts
  • Designing for dierent sized screens
  • Positions

– Images

Controlling size of images in CSS Aligning images in CSS Adding background images

– CSS3 Transitions

– CSS3 Transforms

– CSS3 Animations

– Screen Sizes

  • Screen Resolutions
  • Page Size
  • Fixed Layout
  • Liquid Layout

– Responsive Websites

BOOTSTRAP

– DevTools

  • How to test a website with DevTools
  • HTML5 Layout

– Process & Design

  • How to approach building a site
  • Sitemaps
  • Wireframe
  • Visual Hierarchy

– Convert font and add in website

Google Fonts

– CSS Preprocessors

– Introduction to Javascript

– What is Javascript

– How Javascript works

– Working with Document Object Model

– DOM

– Javascript variables, strings and arrays

– Javascript functions and objects

– Javascript loops

– Javascript conditions

– Javascript events

– jQuery Introduction

– Convert font and add in website

How jQuery works

– jQuery Selectors and Events

– jQuery Traversing

– jQuery Effects

  • Fade Effect
  • Slide Effect
  • Callbacks

– Create image slider and add in website

– Google Map in website

– Slice tools

Learn how to slice a photoshop design

– PSD Slice

– Deploy a website

  • Web Hosting
  • Domain

Course Duration: 40 training hours

Price: 99.00 €

Apliko tani!