Front End Starterpack - 26 March 2022

Slideshow Front End Starterpack - 26 March 2022
Ma chung University

Transcript

1. Front End Starter Pack AXEL ANDRIAN
2. Axel Andrian Full-time Front End Engineer @ GandengTangan Part-time Front End Engineer @ DOT Indonesia Introduction Axel Andrian Axel Andrian
3. What is Front End Engineer? Software Engineer who is responsible for building various websites or web applications so that users can see and interact directly using HTML, CSS, Javascript.
4. What does Front End Engineer do? ➔ Using HTML, CSS, Javascript to bring concepts to life ➔ Developing & maintaining User Interface (UI) ➔ Optimizing User Experience (UX) ➔ Implementing design for mobile website ➔ Fixing bugs & testing for usability ➔ Managing software workflow
5. Skill Required ➔ Creativity ➔ Problem solving ➔ Teamwork ➔ Communication ➔ Organizational & Planning ➔ Industry-spesific technical knowledge
6. First Start
7. Browser ⭐ Firefox ⭐ Chrome ⭐ Safari
8. Code Editor Sublime Text ⭐ Visual Studio Code Atom
9. HTML, CSS
10. What? HTML Hyper Text Markup Language Content. Structure. Words/Text. Images. Videos. Paragraphs. CSS Cascading Style Sheet Colors. Design. Typography. Layout. Positionings. Responsiveness.
11. HTML - What You need to learn 1 Basics 2 Emmet 3 Forms 4 Semantic HTML 5 SEO Basics
12. CSS - What You need to learn 1 Basics 2 Selectors 3 Positioning 4 Box Model 5 Display 6 Flexbox 7 Grid 8 Media Queries 9 Pseudo Elements & Classes 10 Animations 11 Specificity
13. Resources to Learn ➔ MDN Documentation (Free) ➔ Freecodecamp (Also Free) ➔ Youtube (Free free. Be very careful. Make sure you don’t follow crappy tutorials) ➔ If you go to free materials. Make sure they’re not wasting your time. If you can afford it, Always go for paid materials.
14. How to start? ➔ Learn the basics from a source you can find on Google (Ex: MDN, Freecodecamp) ➔ Go to your favorite website (Ex: Facebook, Twitter, Youtube, etc) ➔ Find a micro-component that you like on these sites ➔ Layouts, positioning, grid, flexbox, Specificity ➔ Start building ➔ Repeat.
15. Find Look for atomic component such as navbar, footer, button, header, contact form to build The process Learn & Build Look up on tutorials how to build spesific thing and start coding Repeat Building once is not enough. You need repetition. Building another navbar, footer, button, header, contact form, etc
16. CSS Frameworks ⭐ Bootstrap ⭐ Tailwind Materialize Bulma and many others…
17. CSS Preprocessors CSS Without CSS Preprocessor CSS With CSS Preprocessor
18. CSS Preprocessors ⭐ Sass / SCSS Less Stylus
19. Javascript
20. What? Functionality. Interactivity. Form Submissions. Buttons. Advanced Animations. Logic.
21. Javascript - What You need to learn 1 Basics Syntax 2 DOM Manipulation 3 Functions 4 Event Listeners 5 Fetch API / Ajax 6 Promises 7 Async Await 8 Object & Array Methods 9 Scoping 10 Hoisting 11 Classes 12 Closures
22. Resources to Learn ➔ MDN Documentation ➔ Freecodecamp ➔ Go through blog tutorials for projects. They’ll be well written and more updated
23. How to start? ➔ Start with the course you choose. Pause and think every single course that you’ve been learning. Repeat the course if you still don’t understand and try finding another resource on Google ➔ Try to make something from what you learned immediately. Work on that. Come back and continue
24. Two things that help you learn 1. Solve Algorithm Challenges Solve carefully curated list of challenges from top code-challenge websites (hacker rank, code wars). This will teach you how to think like a programmer 2. Build Project Build your own project with some usecase and features and implement some algorithm that you learn before. Algorithm will help you with the logic when it comes to building project
25. Javascript Frameworks ⭐ Vue ⭐ React Svelte Angular and many others… Disclaimer : Do not jump into any JS Framework before you fully understanding with JS Basics
26. GIT
27. What? Popular Version Control System. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source. Cloud VCS (Git)
28. CLI vs GUI Git Client Command Line Interface (Git Bash) Graphical User Interface (Sourcetree)
29. How to start? ➔ Git documentation or Youtube. ➔ Try CLI first (using Git Bash) and practice with git command. ➔ Make cloud repository on cloud Git (Github or Gitlab) and keep pushing your changes files to Github/Gitlab. ➔ Learn gitflow to manage your branches. ➔ You can switch GUI (Sourcetree) after you undestand everything you need in CLI.
30. Challenge when you become a Front End 1 4 Responsive design Cross-browser compability 2 Always improve UX 5 Fast page load 3 Maintainable code 6 Client
31. Need to know ➔ Learning code is hard. Harder when you do it alone. ➔ You can’t become a engineer in short time. ➔ Take your time. Learn it slow. Learn it well. ➔ If you go fast, You’ll crash. ➔ Take a look at the industry technologies and get a high-level understanding of all players involved. ➔ Don’t quit. You need to sit with the problem longer. Try to fall in love with the pain. Sometimes you can’t find your solution in the first page. Go through dozens of resources until you find them.
32. Thank You! Credit : Illustrations by undraw.co & Icons by flaticon.com