AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
- 1. navigating entrepreneurship in the arab world AstroLabs Academy Coding Bootcamp Introduction
- 2. Your Instructors 2 - Proprietary and Confidential -
- 3. To Get Maximum Benefit Ø Ask lots of questions! Ø Work closely with your group and team Ø Submit your assignments on time Ø View the course material and on: http://academy.astrolabs.com (you’ll be added after today’s workshop) Ø Join our Slack group to keep up to date even after the program, connect to the community and learn about career opportunities: http://astrolabsacademy.slack.com Ø Build your portfolio and keep in touch for career opportunities Ø Tweet / Instagram us @AstroLabsME
- 4. Agenda Ø Saturdays are workshop days 10am-4pm Ø Mondays are review and mentoring 6:30-9pm Ø Wednesday is for coding 6:30-9pm 4 - Proprietary and Confidential - Week Content 1 Intro to Coding, HTML, and CSS 2 Prototyping 3 JavaScript Programming 4 Backend Node JS, Express and Mongo DB 5 Backend Node JS, Express and Mongo DB 6 Frontend React JS 7 Frontend React JS 8 Final Project
- 5. Deliverables You must finish them to get your final diploma (some are individual some are group work) 5 - Proprietary and Confidential - Week Item 1 1) Build a simple eCommerce site 2) Your own Portfolio site hosted online 2 1) A landing page for your project (all hosted online) 2) Mock design prototype for app (a homepage and one other page) 3 Finish 3 algorithm challenges in JavaScript 4 Create your own backend API 5 Create a secure API to register and login users with hashed passwords and hosted online on a remote server 6 Create your own React application 7 Connect your React application to the backend you created (logging in and registering users) 8 Final Project – Convert your landing page to an fullstack application, with login functionality and at least one separate function
- 6. What you need Your Laptop Ø Windows: Basic windows machine will do. You need to install Git Bash: https://git-scm.com/downloads Ø Mac: Comes with a Terminal just make sure it’s activated Both need to 1)Install a text editor: https://code.visualstudio.com/ 2) Use either Chrome of Firefox as their browser 3) Download Node JS and Git 6 - Proprietary and Confidential -
- 7. Learning To Code Can Be Complicated ØLearning to code can take a very long time! (the 10,000 hour rule) ØThis program will teach you the basics, show you the paths, and give you the important must haves (the 80/20 rule)! ØThis class is a crash course, how much you get out of it depends on your effort afterwards! 7 - Proprietary and Confidential -
- 8. 8 CODING LANGUAGES Web Development iOS Data Science / Machine Learning Android Python, JavaScript Main Coding Languages in the Industry • Objective C • Swift • JavaScript • Java • Kotlin • JavaScript • Must use HTML / CSS • JavaScript / Ruby (on Rails) / Python (Django), PHP
- 9. Focus on Web Development Ø Is the easiest to get started with! (can be coded in a text editor and run in the browser) Ø Gives you immediate feedback and is fun to see results quickly! Ø Is the most used and in-demand job / market skill (everyone needs a website) Ø Even if you want to built an mobile app (or something else) later having a core competency of web development will help (shared backend across web and mobile, and developing basic programming skills) 9 - Proprietary and Confidential -
- 10. Web Development Is A Huge Field! 10 - Proprietary and Confidential - See full diagram at: https://coggle.it/diagram/Vz9LvW8byvN0I38x
- 11. The Components 11 - Proprietary and Confidential -
- 12. HTML Code ØHyperText Markup Language ØThis is where the content lives ØLet’s try it ourselves! 12 - Proprietary and Confidential - <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
- 13. Basics of HTML Ø<tags> you should know § <html> - tells the browser this is an html file § <head> - the header (connects to libraries) § <title> - the title in the browser tab § <body> - your site lives here § <a href> - links § <img src=> - images ØLet’s build a simple site, with an image and a link 13 - Proprietary and Confidential -
- 14. CSS ØThis is what makes your site look nice Ø“Templafies” your site ØUses id’s and classes ØLet’s try this! 14 - Proprietary and Confidential -
- 15. Basics Of CSS ØElements (tags h1, p etc.) ØClasses (identified with .) ØID’s (identified with #) 15 - Proprietary and Confidential -
- 16. Web Development vs Web Design 16 - Proprietary and Confidential -
- 17. JavaScript ØThis is the programming language of the web ØHow your site interacts with your database and the world! ØCan be used for “everything”! 17 - Proprietary and Confidential -
- 18. Web Design Principles Ø UI – User Interface (how it looks) Ø UX – User Experience (thinking of how users use it) Ø Responsive Design Ø Mobile First Ø Check out: https://design.google/ and http://bradfrost.com/blog/post/atomic-web-design/ Ø Use a library like Bootstrap, Material UI etc. Ø Use a CMS theme 18 - Proprietary and Confidential -
- 19. Front End Versus Backend 19 - Proprietary and Confidential -
- 20. Front End ØWhy do we need it if we have HTML / CSS? ØAllows you to: § Have login features § Interactivity § Change page without reloading § Send data to database § Have “state management” 20 - Proprietary and Confidential -
- 21. Front End Frameworks ØLearn about their popularity at: https://stateofjs.com/2017/introduction/ 21 - Proprietary and Confidential -
- 22. Server Side Web Applications ØJavaScript (NodeJS with Express) ØPHP (LAMP, WordPress) ØDjango- Python ØRuby On Rails - Ruby 22 - Proprietary and Confidential -
- 23. API’s Ø Application Program Interface Ø A way to connect with servers Ø They give you data not for a website Ø Usually in JSON form (JavaScript Object Notation) Ø See examples at: https://openclassrooms.com/c ourses/build-your-web- projects-with-rest- apis/examples-of-rest-apis 23 - Proprietary and Confidential -
- 24. Database ØWhere your data is stored 24 - Proprietary and Confidential -
- 25. Basics of SQL ØDatabases use the SQL language ADD, DROP, SELECT ØTables within databases ØUser data, CMS data is all stored here 25 - Proprietary and Confidential -
- 26. NOSQL ØMongoDB ØUses JavaScript ’Objects’ 26 - Proprietary and Confidential -
- 27. This is how hard it is to build a site on your own 27 - Proprietary and Confidential -
- 28. This is building a site with a CMS 28 - Proprietary and Confidential -
- 29. CMS – Content Management System ØAllows non-coders to easily make changes ØAdds another layer onto your site to customize easily ØEasily integrates the Web Development and Web Design of your site ØAllows multiple user permissions 29 - Proprietary and Confidential -
- 30. 4 Learning Paths 30 - Proprietary and Confidential - Harvard: Leaders of Learning on edX
- 31. For Coding 31 - Proprietary and Confidential - Online Courses Meetups Workshops CS Degree Bootcamps
- 32. What About in the region? 32 - Proprietary and Confidential - FreeCodeCamp (JS) edX Udemy, Udacity YouTube Meetups AstroLabs Coding Bootcamp Universities (if you’re still young)
- 33. Tips to be a better coder Ø1) Code every day Ø2) Hang out with people who code! Ø3) Have a bigger goal (building your dream project or getting a job) 33 - Proprietary and Confidential - Quincy Larson -FreeCodeCamp
- 34. What To Choose? ØWe recommend to focus on JavaScript because 1. “Any application that can be written in JavaScript, will eventually be written in JavaScript.” Jeff Atwood 2. JS is full stack, now with Progressive Web Apps (Google), Hybrid Apps (React Native – Facebook and Ionic / Cordova) , Desktop apps (Electron) and even Blockchain / VR. 34 - Proprietary and Confidential -
- 35. The Power of JavaScript ØWeb Apps ØHybrid Apps (Build in JS & HTML, then transformed into iOS / Android). Can be done using React Native (gives you more control over the code), or through Hybrid App builders (like Ionic) ØProgressive Web Apps (take websites and give them ‘mobile app’ functionality): § Push notifications § Offline storage § App icons on homescreen 35 - Proprietary and Confidential -
- 36. Free Resources I recommend you checkout Øhttps://FreeCodeCamp.org https://javascript30.com/ ØPodcasts: AstroLabs, CodeNewbie, FreeCodeCamp Podcast, Syntax, Front End Happy Hour, Software Engineering Daily, Build Your Saas, Startups For The Rest Of Us, Tropical MBA Ø#100DayOfCode (follow the hashtag on twitter). 36 - Proprietary and Confidential -