Learning Frontend aka Frontend Fun

This is a repository for the code and notes for the frontend fun workshops.

Getting Started

There are Guides about what was covered in each session. There will also be the accompanying code covered in the session, the code for that specific session can be found under Commits where the commit will detail what session it was, so you can jump in and out wherever you want.

Session Plan

Here's a breakdown of what will be covered in each session. We'll be threading accessibility, security and performance information throughout.

0. Intro

   • HTML, CSS, JavaScript how they work together

1. Session 1 - HTML Into

   • Basic Page Structure
   • Elements/Tags
   • Attributes
   • Building a landing page

2. Session 2 - HTML Forms

   • Inputs
   • Forms
   • Validation

3. Session 3 - CSS Intro

   • Box Model
   • Flex Box
   • CSS Grid

4. Session 4 - CSS

   • Cross Browser
   • Tools - Bootstrap/Bulma/SASS
   • Animation Intro

5. Session 5 - Javascript Intro

   • Variables
   • Loops
   • Functions
   • Execution Order
   • Callbacks

6. Session 6 - Javascript Promises

   • Promises
   • Try/Catch
   • Await/Async
   • Structuring your code

7. Session 7 - Javascript on the web

   • Fetch
   • Web API's
   • Third Party Scripts

8. Session 8 - Javascript Data Flows/Frameworks

   • Data Flows
   • Frameworks

9. Session 9 - Javascript Tooling

   • Building
   • Linting/Code Formatting
   • Testing

10. Session 10 - Explaining the Jargon

    • Types of websites
      • Server Side Rendering
      • Single Page Apps
      • Progressive Web Apps
      • Static

11. Session 11 - Web Components

    • What/Why/How
    • Elemental Design

12. Session 12 - (Bonus) Getting your website as an App

    • Trusted Web Activity
    • Cordova
    • PWABuilder

Questions

Any questions on anything or see anything you would like covering get in touch with me JordanFinners or on Twitter.