Skip to content

Latest commit

 

History

History
90 lines (46 loc) · 6.93 KB

Frontend.md

File metadata and controls

90 lines (46 loc) · 6.93 KB

Front End Development

The practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.

This is what the user of your web app or static website will see, and interact with - kinda like the stars of the show on stage.

CSS (Cascading Style Sheets)

Breaking this word up into smaller parts, lets start with the phase 'Style Sheets'.

Style Sheets : During the earlier days of the internet, HTML only allowed for very little style of it's web pages, and only allowed for inline styling, written within the same file. Nowadays, these style sheets, are files that segregated from HTML files, and can be easily added anytime.

Cascading : This word represents how the styles are organised, when both styles for the same selector is made, the latest change to that style will be the one most prominant - the one that actually gets used.

If you are completely new to web development, please head to W3School CSS

Flexbox - An nice animated guide to Web Designers companion for responsive designs

CSS Animations - Great playlist from Devtips (definitely recommend watching a lot of his videos)

Pseudo Class Selectors - Gain Mastery manipulating the shadow-DOM

JavaScript

Javascript for Cats - A big leap here, JavaScript + Using the Web Console + Cats; try not to be too intimidated.

Death of the For Loop - make your code pretty again with map().

Understanding the Module Pattern in JavaScript - learn you how to make your code accessible, but only when you need it

How Do You Structure JavaScript? The Module Pattern Edition - A nice. understandable introduction to how to structure your javascript

Understand JavaScript's "this" With Clarity, and Master It - Every OOP language employs 'this' to refer to abstract coding objects. Unfortunately with JavaScript there are some additional caveats you've got to learn too - see below

.call(), .apply() and .bind() explained - these function usually confuse developers from other languages, due to their nature with this. Aids with handling the OOP side with JS functional aspects

What is a promise? - does what it says on the tin.

The Promise of a Burger Party - wrapping your head round promises, callbacks and asynchronous stuff, with burger analogies. Nom nom!

Javascript Cheat Sheet - a cheeky set of JavaScripts feature descript upsides and essentials

What the heck is the event loop anyway - video with some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.

Higher Order Functions playlist - funfunfunction - regardless if it's JavaScript you are learning, understanding higher order functions, allows you master the functional programming side of coding.

David Walsh Fetch Api Article - Total classic, API is just a fancy term of using a library to interact with another person program essentially

ES6

Learn ES6 the Dope Way.

ES6 short for (ECMAScript 6, more fondly known as ECMAScript 2015 - was released that year). Lets again, break this up.

ECMAScript is the standard implementation of what is widely known as JavaScript, however the name JavaScript came from it's inventor Brendan Eich.

When his boss asked him one day to create a language for it, using some of the object orientated implementation of the language hot at the time (1995) 'Java'.

However the official name of the new standard of this langauge is called ECMAScript; the new naming is derived from a long arduous history of the language's inception, and corporate war between Microsoft's JScript and NetScape's JavaScript language standards

Not going to go into any more depth, the story to take from this is that having 2 or more competiting standards for a technology is usually bad for industry.

Lets Learn ES6 Playlist

React

React is a view library created by Facebook, that frontend devs utilize. Due to it's rapid ability to render only particular parts of the page when it's required - known as dynamically generating elements.

In the past, whenever some part of the page has changed,even if it was a single letter, the whole page has to be reload. Where as react can load in that tiny change, for that single letter, without having to reload the entire page

React Howto by Pete Hunt

React intro for people who know just enough jQuery to get by

9 things every React.js beginner should know

React Fundamentals - Tyler McGinnis

React FreeCodeCamp Beta

The Motherload of React and Redux Links