Giter Club home page Giter Club logo

fed-training's Introduction

Frontend Training Material

Purpose

This project is intended to train modern frontend principles and mechanics to backend developers as it relates to JavaScript.

Removing Jargon

  • Module: A group of training sections that encapsulate a broad idea/topic ie. React

  • Section: A focused topic/idea ie. How to setup React

Tech Stack

This application is creating using create-react-app.

Additionally, codesandbox embeds are used to provide code samples.

Project Details

  • Shared components such as the Navbar and tableOfContents are stored in the src/components directory.

  • SCSS is used instead of plain CSS, however this may change since this project also uses css modules and the features that sass offers are not extensively used.

  • Pages are defined in the src/pages directory.

  • Training Content is created by creating a markdown directory in the desired page directory and creating markdown files.

  • Route Config is inserted in each page directory to scaffold meta information (see file for details)

  • render-sub-page.js is used to create the module pages based on the route config.

Conventions and Code Styles

This project makes use of React Hooks and forgoes any use of class-based components.

There should be an strong sense to do the following:

  • Use codesandbox to display practical code samples
  • Begin each section with an overview.md file
  • Try to answer the why, what, and how to a topic, in that order
  • Keep the content simple so that the focus is on the code samples
  • Use of emojis, jokes, puns, etc is strongly encouraged to add a personal feel
  • All links to outside content open in a new tab

Issues

If any point something does not appear correctly, filing an ensure will ensure it gets properly addressed while also helping others who have a similar issue.

fed-training's People

Contributors

mtliendo avatar verticaldesign avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.