# Coaching C - 8 July with Founders and Coders --- We, at Founders and Coders, run a full time apprenticeship training programme in web development. ---- Our coaching programme offers support during our application process. --- ### Today, we'll cover: - What coaching is - Paths through the programme - Our expectations - HTML / CSS - What's next? --- ## What is coaching? ---- Learn to code through peer-led learning :two_women_holding_hands: ---- You'll be assigned homework each week and are expected to code outside of our workshops ---- 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 ---- ### The curriculum 1. Introduction 1. Basic JavaScript 1 1. Basic JavaScript 2 1. Functions 1. Methods 1. DOM ---- ### Structure of the programme ---- Each week, we'll host a workshop on the week's topic. After a couple of workshops, we'll begin holding study groups. ---- On our coaching programme you'll need to come along to every workshop and study group, as well as complete work in your own time. ---- Our next application deadline is in six weeks and there's a lot of material to learn before then. ---- Completing our coaching programme does not guarantee a place on our full-time programme. --- ## HTML / CSS / JavaScript ---- ### What is HTML? ---- HTML is the language which we use when writing the structure of a webpage. ---- HTML stands for HyperText Markup Language ---- In HTML, we use different tags wrapped around content to build webpages. ---- ```htmlembedded= <h1> Welcome to my page </h1> <p> This website is an introduction to me... </p> ``` --- ### What is CSS? ---- 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. ---- ```css= p{ color: red; background-color: black; width: 300px; } .big-image{ height: 400px; width: auto; border-width: 5px; border-style: solid; border-color: black; } ``` --- ### What is JavaScript? ---- 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. ---- ```javascript= let myVar = 10; let result = myVar * 2; console.log(result); ``` --- 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 --- ## freeCodeCamp --- A free platform to learn to code [Take a look](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-images-to-your-website) 👀 --- When faced with a problem, follow these steps: - Read the problem - Check the tests - Code between the comments - Check your outputs --- Before completing your tribute page, complete: - Basic HTML & HTML5 - Basic CSS When you finish those sections, work on: - Responsive Web Design Principles - CSS Flexbox --- ## The Tribute Page --- The first project to complete in our pre-application stage is to build a small website in CodePen (https://codepen.io/) using HTML and CSS --- This site can be about something you like or about someone (public figure) you admire. You are not required to make this about yourself or disclose anything personal. --- This will give you the opportunity to practice with HTML and CSS as well as demonstrate your learnings from this stage --- 1. The page has a title, or heading, at the top of the page 2. There are at least three images on the page 3. Elements have styles such as background colours, borders, margins and padding 4. Some pieces of text have emphasis such as bold or italics 5. A user can click on a link that takes them to another website 6. The page has at least one list 7. Everything on the page fits on any screen size, without content overflowing or being cut off --- Let's build a tribute page... --- ### For next week: - Build a tribute page - Start working on Basic JavaScript on freeCodeCamp - Aim to get as far as Record Collection - Share your learnings on Discord - Ask each other questions when you get stuck