# Coaching - March 23 Introduction with Founders and Coders --- We are a non-profit founded in 2014 and based in Finsbury Park with a mission to open access to the tech industry. ---- Every year over 40 people successfully complete our full-time training and find employment as software developers. ---- Starting this year, we are running a Level 4 Apprenticeship in Software Development. ---- In order to prepare people for our application process, we are now running a coaching programme. --- :sparkles: Welcome to the programme introduction! :sparkles: :seedling: :rocket: :shamrock: --- ### Today, we'll cover: - What is coaching? - The programme - Our expectations - HTML / CSS - JavaScript - Homework --- ## What is coaching? ---- Learn to code through peer-led learning :two_women_holding_hands: ---- Workshops will outline the key concepts and will be for everyone ---- You'll be assigned a tutorial group with a few others on the programme ---- In your tutorial groups, focus on learning together and supporting one another over rushing ahead on your own :woman-running: ---- In your own time, if you're ready to move on to the next step of the prerequisites - we encourage you to. :scales: ---- You'll be assigned a coach for the programme ---- Your coach is a guide :mage: not a teacher :mortar_board: --- ## Being a developer ---- Nobody is an expert, we're here to help you find gaps in your knowledge. Developers learn new things every day. :bulb: ---- As a developer, you'll run into errors every day. It's okay to make mistakes. :exclamation: :exploding_head: ---- Being able to find the answer is more important than knowing the answer. :mag: --- ## The programme ---- ### Structure of the programme Once a week, there will be a workshop on that week's topic. After a couple of workshops, we'll begin holding tutorial groups. ---- In order to complete our coaching programme you'll need to come along to every workshop and tutorial, as well as complete homework in your own time. ---- If you complete the programme and our course requirements, you'll be ready to apply to our full-time programme. ---- Completing our coaching programme does not guarantee a place on our full-time programme. A place on our full-time programme does not guarantee an apprenticeship. --- ## Our expectations ---- ### We expect you to treat your opportunity here at Founders and Coders as you would at a job. ---- be professional, ---- arrive on time, ---- be courteous to other people. --- ### We expect you to invest in yourself ---- We are laying the foundation for you to train and become software developers and you will need to dedicate the time in between workshops to self-study. ---- We believe everyone deserves a chance to learn how to code. Our goal is to remove obstacles from your path into tech. ---- However we are not here to carry you along that path — you will have to work hard and apply yourself. Learning how to do your own research, figure things out, know when to ask for help and teach yourself are critical skills for developers. --- ### We expect you to work well with others ---- Work collaboratively and focus on learning as a group. Take your time to understand and give others time to understand. ---- We expect everyone to be aware of the space you're taking up and recognise your privilege. ---- >Prioritise marginalised people’s safety over privileged people’s comfort —paraphrased from afrotechfest.co.uk/coc --- ### Give others space to talk ---- If you're extroverted or loud that's okay. If you're introverted or quiet that's okay too. We want everyone to have a voice in our discussions. --- ### We expect you to maintain good attendance throughout the programme. ---- To succeed on this programme, you'll need to come to ***every*** tutorial and attend or watch the recording of ***every*** workshop. ---- If you will be absent, you must let us know at least a week in advance. ---- If you are finding it hard to commit to the programme, let us know. We'll do our best to find a way to support you. --- ### We expect you to be respectful of other people's time. ---- We suggest you only work during work hours. You may be an early bird :bird: , or a night owl :owl: - whichever you are, find time to code and find time to rest, relax and recuperate. ---- You may have a lot of time to code. Somebody else might not have much time. Be aware that others will progress at different paces and be mindful of each other. ---- Arrive on time to sessions, ready to start to make the most of everybody's time and patience. --- ## Daily learning ---- We believe it's important to build a habit of learning ---- The best way to do this is with small sessions every (working) day ---- ### Active problem-solving Warm up by writing some code before you start the day (i.e. CodeWars or freeCodeCamp) ---- ### Passive learning Finish the day by reading your code from earlier or reading an interesting article. Try to take notes as you go to reinforce the learning. (Dan likes [Anki](https://apps.ankiweb.net/) for turning notes into flashcards) --- ## HTML / CSS ---- ### HTML :building_construction: ---- HTML is the language we use to create the structure of a webpage. ---- HTML stands for HyperText Markup Language ---- In HTML, we use different tags wrapped around content to build webpages. --- ### CSS :nail_care: ---- CSS is the language we use to style an HTML document. ---- CSS stands for Cascading Style Sheets. ---- In CSS, we write selectors which target HTML elements. We use CSS properties to define how these elements should look. --- ### JavaScript :scroll: ---- JavaScript is a programming language. ---- Esentially, this means JavaScript is how we _do things_ on our websites with our code. ---- We can use JavaScript to make webpages interactive and dynamic. --- It's like a house... ---- HTML is the building blocks, the structure of the house.  ---- CSS is the decoration of the house. For example, the paint on the outside.  ---- JavaScript is what makes the house come to life. For example, if I press a button next to the door then it triggers a sound.  ----  --- ## Questions --- ## Javascript ---- JavaScript is a scripting language you can use to make web pages interactive. It is one of the core technologies of the web, along with HTML and CSS, and is supported by all modern browsers. --- ## How does JavaScript relate to HTML & CSS? ---- When we write a website, we use JS to update the HTML document which the users sees. ---- While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive and dynamic. ---- We'll look at connecting HTML, CSS and JS in later weeks. For now, we'll focus on JavaScript fundamentals. --- ## freeCodeCamp ---- A free platform to learn to code. [Take a look](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/golf-code) :eyes: ---- When faced with a problem, follow these steps: - Read the problem - Check the tests - Code between the comments - Check your outputs ---- By today, we hope you've completed the HTML and CSS sections. --- ## Features of JavaScript --- ### Variables ---- A variable is used to store information or data. ---- Each variable has a unique name. ---- ```javascript= var myNumber = 10; var emptyVar; ``` --- ### Assignment ---- We can _assign_ values to variables using a single `=`. ---- ```javascript= var myNumber = 10; myNumber = 25; console.log(myNumber) // outputs 25 var emptyVar; emptyVar = myNumber - 2; ``` ---- ```javascript= var firstString = "Hello"; var secondString = "World"; var combinedString = firstString + " " + secondString; ``` --- ### Arrays ---- Arrays let us store multiple values. ---- ```javascript= var numArray = [1,3,5,7]; var strArray = ['dog', 'cat', 'fox', 'cow']; var mixedArray = [1, 'frog', true, 0, [4, 5, 6]]; ``` --- ### Objects ---- Objects also allow us to store multiple values. ---- In objects, we store values in key / value pairs. In other words, each value has a particular key we use to access that value. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic' } ``` ---- We can access values using dots or square brackets. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic' }; console.log(myObject['name']); // outputs 'Gregor' console.log(myObject.username); // outputs 'Albadylic' ``` ---- We can nest objects inside of other objects. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', profession: { day: 'web developer', night: 'crime fighter' } }; ``` ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', profession: { day: 'web developer', night: 'crime fighter' } }; console.log(myObject.activities.daytime); console.log(myObject['activities']['daytime']); console.log(myObject['activities'].daytime); ``` --- ### Functions ---- ### What is a function? Some lines of code that do a predefined task. A function may take some input and return an output. ---- ### Why do we use functions? ---- #### Define reusable code Declare code which can be used in many places to do similar things with different inputs to give different outputs. ---- #### Modularise our code Break our code up into sections. ---- #### Help us understand our code - Having a well named function is easier to understand than a list of statements. - A meaningful name makes it easier to understand what the function does. A function that adds two numbers can be "addTwoNumbers". ---- #### Writing a function ---- ```javascript= function addTwoNumbers(num1,num2){ return num1+num2; } var total = addTwoNumbers(2,3) // total is assigned the returned value ``` --- ## Homework ---- Before next week's session, complete at least up to Record Collection :musical_score: on freeCodeCamp. ---