How to start? Front-End?
Begin from the basics of primary coding languages:
1. HTML, CSS: The web building blocks
3. Understand DOM (Document Object Model), how it works?
4. Learn how the web platform works. (Web Browsers, HTTP Protocols)
5. Learn GIT, Basic REST APIs (Request-Response cycle and methods)
6. Learn the fundamentals of user interface design. (Ex. Application design/architecture)
7. Learn about Node.js, Node Package Manager (NPM)
How does the web platform work? (Rough idea)
You need to consider… Is there more?
After having a fundamental knowledge of the Front-end, you may need to know more. Here, I am sharing my opinions in a list that I think I learned it a hard way and I must implement in my frontend projects.
- Responsive design / Adaptive Design
You usually don’t care at first about resolutions and pixels. What are pixels by the way? Learn it. If you have started a new project then make sure you have a responsive design in your mind, at least it should support desktops/laptop screens.
Most Popular screen resolution:
Desktops/Laptops: 1024×768 pixels or higher
Get to know more about others:
Check out https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
2. Cross-browser compatibility
Normally, it’s an ability of a website, application, or script to support various web browsers identically. We can test the compatibility using various tools such as Comparium, Lambda Test, Litmus, etc.
Here’s a screenshot I got from gs-statcounter page. Here, You can get a clear idea, which one would be your priority browser.
3. Implementation of best practices and standards
- Write code that supports re-use. (DRY Principle)
- Lazy loading (especially images)
- Write code to be read (Keep it simple, stupid)
- Use comments if needed.
- Follow file naming convention
- Minimize HTTP requests and many more….
- Check out: https://github.com/cxpartners/coding-standards which may be helpful to you.
4. Web Performance (Improving the quality of web pages)
Keeping track of your system is the best way you can improve or enhance the performance of the application. We can keep a simple analysis of our web application performance using some automated tools: lighthouse chrome, Page speed insights, etc.
5. Choosing Frameworks and Libraries?
As you can see many vs among the frameworks such as
Angular VS React VS Vue
I reviewed some of the resources, blogs/sites, developer’s feedback. I learned that some factors do affect the choices of the framework. They are
- Size of a framework - Example: Angular is a massive framework with approx 143 KB. React with approx 43KB and Vue.js is the most lightweight with only approx 23–33.30KB min.
- Current Trends
- Learning Curve: How easy is it to learn?
- Scalability: Can we add more features in the future?
- Popularity in (number of stars) git hub
- Community and development involvement
- Regular updates and new features
Advice on learning: (From Front-end Developer Handbook 2019 by Cody Lindley)
Learn the actual underlying technologies, before learning abstractions.
Don’t learn jQuery, learn the DOM.
Don’t learn SASS, learn CSS.
Don’t learn JSX, learn HTML.
Don’t just use Bootstrap, learn UI patterns.
More curious to learn? I have an honorable mention.
- Single Page Application
- Server-side rendering
- Debugging tools
- MVVM, MVC Architectural pattern
- Build Optimization tools
- State Management and many others which you may add to your learning checklist.
Thanks! Happy learning……