Introduction to Web Frontend (Week 5)
Course Time
Wednesday, June 24th 2020 16:30 - 20:30 online, Google Hangouts
Instructor Information
Instructor: Mytt Mao
CRM Frontend Team, Software Engineer
Slack: @Mytt, #pj-build-2020-students-hall
Work Hours: Usually 12:00 to 21:00, 平日, but anytime is fine, I will respond when I see
Prerequisites
- Basic programming knowledge
Description
Very hands-on course to learn the basics of frontend by creating your own personal page and host it online with no cost! The course will cover the very basics of frontend (HTML, CSS, JS) and web-related technology (React, Vue, Webpack, Ionic).
Requirements
- Node.js (10.15.3) using nvm will be a good option (if you can't get nvm installed, anything about version 10 should be good)
- VScode, Sublime, or any other editor you like but I won't be able to teach your small tricks that's related to the recommended editors
- Install Chrome
Preparation Material
- None
Syllabus
- Q&A of last lecture (~ 30 mins)
- Little concept on how the web works (~ 5 mins)
- Turn a design into real HTML and css using codepen (~ 20 mins)
- What is HTML?
- What is CSS?
- How to make a page responsive?
- Open up the chrome inspector and let's play with the DOM (~ 30 mins)
- What is the DOM?
- How do you query elements?
- How do you add event listeners?
- How do you change DOM node properties?
- JS nature and Synchronous vs Asynchronous (~ 30 mins)
- What is JS good at? What is JS bad at?
- What is the difference between Syncrhonous and Asynchronous calls?
- How do you make an asychronous call to an API endpoint?
- How do you do error handling in JS?
- SPA with React (uisng codesandbox) (~ 60 mins)
- What's the difference between SPA, static page, server side rendered page?
- What is the virtual dom? How is it better than the DOM?
- What are states and props?
- What is stateful component and what is stateless component?
- How do you handle events in React?
- How do you write a form in React?
- How do you make async calls in React?
Further study topics:
- State management with Redux
- Module bundler and local development environment setup with Webpack
- Design Patterns in JS
- CSS Tricks
- Semantic HTML
Evaluation
By 48 hours before next week’s course, students will be expected to:
- With all the things you have learned, let's build a real web page!
- With the presented UI, please create a page that resembles the UI and component behaviours as closely as possible
Stretch goals:
- Add some animations to make your page cooler!
- Connect it with the backend API that you will be creating in the next week!
Warning: Failure to complete the required assignment can result in disqualification from the Build@Mercari Program. If you feel that you will have issues meeting the deadline, inform your instructor and the Build@Mercari facilitators in #pj-build-2020-students-hall Slack channel with a mention to @build-core-members or @build-instructors as soon as possible.
Course Policy
- I don’t believe in “cheating” when it comes to real world software engineering You are encouraged to ask questions in Slack, help each other with solutions, work on the assignment together, make it better
- While I don’t believe in “cheating” in the traditional sense, there are certainly good solutions and bad solutions Asking another student or iOS engineer when you’re stuck, receiving feedback from them about how to solve the problem and then changing your code is a good solution
- Searching on Google for “how to push a view controller using code” and then researching sample code and making changes to your code based on what you find, is a good solution
- Finding a sample iOS build code on Github, downloading it, copying the files into your directory and pushing it to your Github after changing the name and Bundle ID, is a bad solution. Please do not do this.