LogoLogo
  • FAC Curriculum
  • archive
    • Node & npm introduction
    • developer
      • Programming Paradigms
    • handbook
      • Asking for help
      • Coaching groups
      • Code review
      • Course rules
      • Debugging
      • Employment schedule and material delivered in FAC20
      • GitHub Workflow
      • Glossary or terms
      • Presentation Guidance
      • Equality, Diversity and Inclusion
      • Installation guide
      • Learning circles
      • Mentoring guidance
      • What to expect from your mentors
      • One-day projects
      • Pair programming
      • Portfolio
      • Questions for problem solving
      • Progress Logs
      • Final project report
      • Managing software projects
      • Project Presentations
      • Project roles
      • Projects
      • Retrospectives
      • Role Circles
      • Safeguarding policy
      • Technical Spikes
      • System requirements
      • Tech for Better
      • User Manuals
      • Wellbeing Support
      • project-docs
        • What makes a mentor?
        • Product Handover
        • Sprint Planning
        • Tech for Better Presentations
        • User Research & Usability Testing
    • foundation
      • full-stack
        • Learning Outcomes
        • project
      • testing
        • project
        • spikes
  • docs
    • Contributing to the curriculum
    • Curriculum intent
    • Curriculum process
  • src
    • About our curriculum
    • course
      • Code of Conduct
      • Docker
      • .NET and Umbraco
      • Getting started
      • Founders and Coders coursebook
      • KSB's
      • Mini projects
      • Revision checklist
      • Svelte
      • TypeScript
      • handbook
        • Software Developer Handbook
        • Software Foundation Handbook
      • precourse
        • Before you start the course
        • Installation List
      • syllabus
        • developer
          • app
            • learning-outcomes
            • project
            • schedule
            • spikes
          • introduction
            • learning-outcomes
            • project
            • resources
            • schedule
          • week00-pre-course
            • We'd like you to spend some time before starting the course working on useful fundamentals.
            • spikes
          • week01-project01-basics
            • Employability introduction
            • Homework
            • learning-outcomes
            • Week of September 9th
            • project
            • resources
            • schedule
            • spikes
          • week02-project02-chatbot
            • employability
            • Homework
            • learning-outcomes
            • Week of September 16th
            • project
            • resources
            • schedule
            • spikes
          • week03-project03-server
            • Learning Outcomes
            • Week of September 23th
            • The Amazin' Quizzer API Backend
            • resources
            • schedule
          • week04-project03-frontend
            • learning-outcomes
            • Week of September 30th
            • UI for Quizzer App
            • resources
            • schedule
          • week05-project03-test-deploy
            • Testing and deployment
            • Week of October 7th
            • project
            • resources
            • schedule
          • week06-project04-databases
            • learning-outcomes
            • Week of October 14th
            • project
            • Databases
            • schedule
          • week07-project04-authentication
            • Learning Outcomes
            • Week of October 21st
            • project
            • resources
            • schedule
          • week08-project04-test-deploy
            • Learning Outcomes
            • Week of October 28th
            • project
            • resources
            • schedule
          • week09-reading-week
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
          • week10-project05-DOTNET-intro
            • Learning Outcomes
            • overview
            • project
            • Resources
            • schedule
          • week11-project05-DOTNET-testing
            • Testing and deployment
            • Week of November 18th
            • project
            • Resources
            • schedule
          • week12-project05-DOTNET-deploy
            • Learning Outcomes
            • Week of November 25th
            • project
            • Resources
            • schedule
            • Spikes
          • week13-TFB-design
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Design Week Spikes
          • week14-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • DevOps Resources
            • schedule
            • Spikes
          • week15-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Spikes
          • projects
            • in-house-design
              • Learning Outcomes
              • Project
              • Resources
              • schedule
              • Design Week Spikes
        • foundation
          • Obsolete-full-stack
            • project
          • post-course
            • Homework
            • schedule
        • portfolio
          • fruit-shop
            • learning-outcomes
            • project
            • resources
          • game
            • learning-outcomes
            • project
            • resources
          • hobby-page
            • learning-outcomes
            • project
            • resources
          • movie-data
            • learning-outcomes
            • project
            • resources
          • project-gallery
            • learning-outcomes
            • project
            • resources
          • website
            • learning-outcomes
            • project
            • JavaScript
        • tfb
          • week 1
            • Introduction (45 minutes)
            • Further reading
          • week 10
            • content
            • resources
          • week 11
            • What will we be doing this week?
            • resources
          • week 12
            • What will we be doing this week?
            • Further reading
          • week 2
            • Discover (90 minutes)
            • resources
          • week 3
            • content
            • resources
          • week 4
            • Mapping the user journey (90 minutes)
            • resources
          • week 5
            • Figma Workshop 1 (90 minutes)
            • Further reading
          • week 6
            • Figma Workshop 2 (90 minutes)
            • resources
          • week 7
            • Product pitches & Selection (90 minutes)
            • resources
          • week 8
            • content
            • resources
          • week 9
            • content
            • resources
    • learn
      • DOTNET
        • Introduction to .NET
      • auth
        • Authenticating web apps
      • database
        • Persisting data with SQLite and Node
      • dotnet-two
        • Dependency injections and interfaces in .NET
      • form-validation
        • Form validation
      • react
        • Building client-side apps with React
      • server
        • HTTP servers with Node & Express
      • typescript
        • TypeScript
    • mentoring
      • design-week
        • Analysis Workshop
        • Code planning
        • Definition Workshop
        • Discovery Workshop
        • Figma introduction
        • Usability testing
        • User Research
    • resources
      • http
        • introduction
    • workshops
      • cookie-auth
        • index
      • creating-promises
        • index
      • css-layout
        • index
      • cypress-testing
        • index
      • database-testing
        • index
      • dev-tooling
        • Developer tooling
      • dom-challenge
        • index
      • dom-rendering
        • index
      • es-modules
        • index
      • express-middleware
        • Express middleware
      • first-class-functions
        • index
      • form-validation
        • index
      • functions-callbacks-async
        • Functions, callbacks, & async JavaScript
      • git-intro
        • Introduction to Git
      • git-terminal
        • Using Git in the terminal
      • git-workflow
        • Git workflow
      • github-projects
        • GitHub Projects Workflow Workshop
      • heroku-sql-challenge
        • index
      • html-forms
        • index
      • learn-a11y
        • index
        • starter-files
          • solution
            • Accessibility solution explanation
      • learn-fetch
        • index
      • learn-integration-testing
        • index
      • learn-testing
        • Learn testing in JavaScript
      • learn-unit-testing
        • index
      • node-error-handling
        • Node error-handling
      • node-express-server
        • Node and Express HTTP server
      • node-npm-intro
        • Node & npm introduction
      • node-postgres
        • Learn Postgres with Node
      • node-scripting-challenge
        • index
      • password-security
        • index
      • promise-practice
        • index
      • react-components
        • React components
      • react-fetch
        • index
      • react-forms
        • React forms
      • react-refactor-classes
        • index
      • react-state-effects
        • React state & effects
      • real-world-fetch
        • index
      • scope-challenge
        • Scope debugging challenge
      • semantic-html
        • index
      • server-side-forms
        • Server-side forms
      • session-auth
        • Session authentication
      • sql-intro
        • index
      • tdd-array-methods
        • index
Powered by GitBook
On this page
  • Precourse Material
  • Command Line
  • Git & GitHub
  • Markdown
  • Semantic HTML
  • CSS
  • DOM Manipulation
  • SQL
  • Practical Project
Export as PDF
  1. src
  2. course
  3. precourse

Before you start the course

PreviousprecourseNextInstallation List

Last updated 4 years ago

The purpose of our is to make sure that everyone is familiar with the key concepts we will be using throughout your time here. A solid grounding in the fundamentals will help you immensely.

Please make sure you have finished the precourse material and installed the software on our before day 1 of your course.

We will be having an installation party shortly before you arrive. If you are using a Windows OS then attending this installation party is crucial. But if you are unable to attend, you can also do this by yourself. If you run into any difficulties, please get in touch.

Precourse Material

Please do not forget that we don't use frameworks at FAC – ignore Bootstrap and JQuery, and make sure you work in vanilla HTML, CSS and JavaScript.

If you have any problems with the following material, feel free to reach out to your peers and FAC Staff through your cohort's Slack channel!

Command Line

Learning outcome:

  • Be familiar with navigating around your computer without using a Graphical User Interface (GUI).

Resources:

Git & GitHub

Learning outcomes:

  • Understand the purpose of using Git and GitHub

  • Know basic git commands like git add, git commit and git push

Resources:

Markdown

Learning outcome:

  • Know markdown syntax well enough to create readmes

Resources:

Semantic HTML

Learning outcome:

Resources:

CSS

Learning outcomes:

  • Be able to apply positioning and layout techniques to solve common problems

  • Understanding basic CSS rules

  • Understand the differences between em and rem units and how to combine them effectively

Resources: This section includes condensed articles/videos that will be beneficial when tackling CSS throughout the course;

DOM Manipulation

Learning outcomes:

  • Understand what the DOM is

  • Create, access, and style a DOM element

Resources:

  • Bonus videos:

SQL

Learning outcomes:

  • Understand what a relational database is

  • Select, Create and Manipulate data between tables

Resources:

  • Playing around with creating tables and accessing the data on your local device will increase your confidence in week 6 - feel free to reach out if you'd like a practical project to work on with SQL!

Practical Project

Learning outcomes: Cement your knowledge of the concepts above through practical application.

Task:

Rather than using Codepen or JS Fiddle, you should do this directly with your text editor, terminal and browser. Start by creating your repo on GitHub and stick to the command line for adding, committing and pushing your changes as you go.

Make sure to host your project on GitHub pages.

If anyone has already made a calculator and feels that they need a different challenge, please message one of us. Have fun, and don't hesitate to use your Slack channel!

Learn Python The Hard Way has a great .

is a brilliant set of videos. The course is quite long, so don't worry about completing the whole thing. We will go into more depth in week 1. For now, just complete lesson 1 (Navigating A Commit History section).

No GitHub repo is complete without proper documentation. Follow this to learn the syntax that you need to write a banging Readme!

Be familiar with HTML5 elements.

is a 6 minute youtube video to introduce you to the concept of the semantic web. You will be expected to write semantically during week 1, so brush up with the following:

Read to stop using too many divs (divitis). Don't be fooled by the scroll bar - the article isn't particularly long, but there are many comments below.

Head to for more specific examples of useful semantic tags.

is a helpful, lightweight, well-ordered guide that covers a lot of concepts in CSS to help you understand how to create a super basic layout. Additional links are provided in each section for more detailed explanations of concepts.

this great 7 minute video will cover the position property, after watching you’ll be able to apply positioning techniques with layout techniques from the video to accomplish many important tasks like .

is an essential guide to understanding how CSS rules are applied and how CSS works in general.

this is another essential guide to help you understand the differences between em and rem units and how to combine them effectively.

(archived version) will cover a lot of the basics.

- useful for some further reading, if you'd like

will help put that into practice.

(includes some jQuery, but provides a useful overview and some vanilla JS examples)

- At a minimum, tackle section 1, hopefully section 2 and if you're having fun then section 3 and 4!

Build a calculator. This is one of the "Advanced Front End Development Projects" on . Having a look at their guidelines might help you to get started.

Command Line Interface Crash Course
Udacity's git & GitHub course
markdown tutorial
accessible
Here
this article
this article
Learn Layout
Relative & Absolute Positioning
Learn Layout
centering
CSS Specificity
Rem/Em Units
Call Me Nick - DOM Manipulation Basics
MDN article on "Manipulating Documents"
Appspot's DOM Tutorials: Exercises 1,2 & 3 only
The DOM: What is the Document Object Model?
Live coding intro to the DOM, with JS examples
Code Academy's Introduction to SQL
Free Code Camp
Installation List
precourse material
Command Line
Git & GitHub
Markdown
Semantic HTML
CSS
DOM Manipulation
SQL
Practical project