learn-web-development

Learn Web Development from Top Articles of 2017

English Version | 中文版本

Between Jan~Dec 2017, we’ve compared nearly 16,000 Web Development articles to pick the Top 45.

We believe learning from web developers who have hands-on experience in the field is a great way to advance your career. This directory is designed to make your life easier as it organizes the most useful tutorials written in 2017, where experienced web developers share their lessons in building and shipping a web application..

This directory has 20 key topics:

If you want a version with images: Go to our Medium link

Table of Contents

1. General Guide
2. AWS
3. Docker
4. Security
5. Best Coding Practices
6. Git
7. Google Analytics
8. Bootstrap
9. HTTPS
10. Vim
11. Web Font
12. HTML Email
13. WebAssembly
14. Chrome DevTools
15. Case Study
16. Performance
17. Progressive Web App
18. Interview
19. Lesson Learned
20. User Interface
    

Recommended Learning

A) Gaming AI: The Beginner’s Guide to Building an Artificial Intelligence in Unity.

5,041 recommends, 4.7/5 stars

B) Computer Vision: Deep Learning and Computer Vision A-Z™: Learn OpenCV, SSD & GANs and create image recognition apps.

8,161 recommends, 4.5/5 stars

General Guide

• Front-end Developer Handbook 2017 - Cody Lindley
• Roadmap to becoming a web developer in 2017
• Front-End Checklist: The perfect Front-End Checklist for modern websites and meticulous developers
• Our 500+ engineers all use this front end development guide

AWS

• The Open Guide to Amazon Web Services.
• The Hitchhiker's Guide to AWS ECS and Docker

Docker

• Here’s How You Start Using Docker
• Docker Introduction

Security

• Web Developer Security Checklist
• Auth-Boss: Learn about different authentication methodologies on the web.
• Bypassing Browser Security Warnings with Pseudo Password Fields

Best Coding Practices

• Design Patterns for Programmers
• Key software engineering practices at Google [PDF]

Git

• Git-flight-rules: A guide for programmers using git about what to do when things go wrong.

Google Analytics

• The Google Analytics Setup I Use on Every Site I Build

Bootstrap

• Bootstrap 4: Everything You Need to Know

HTTPS

• The 6-Step "Happy Path" to HTTPS

Vim

• Vim After 15 Years

Web Font

• Web fonts: when you need them, when you don’t

HTML Email

• An Introduction To Building And Sending HTML Email For Web Developers – Smashing Magazine

WebAssembly

• An Abridged Cartoon Introduction To WebAssembly – Smashing Magazine

Chrome DevTools

• Increase your web development skill-set: 150 animated tips on Chrome DevTools
• DevTools: State of the Union 2017 (Google I/O '17)
• Using Chrome Developer Tools to get tickets to Taylor Swift’s next concert
• Preload, Prefetch And Priorities in Chrome - Addy Osmani, Staff Engineer at Google

Case Study

• How We Built r/Place
• I learned to code, build a web app and launch it on Product Hunt in 2 months

Performance

• The State of the Web: A guide to impactful performance improvements
• Essential Image Optimization - Addy Osmani
• Web Cache - Everything you need to know
• Speed up your site with a little machine learning

Progressive Web App

• A Pinterest Progressive Web App Performance Case Study
• A Beginner’s Guide to Progressive Web Apps & the Frontend Web
• Production Progressive Web Apps With JavaScript Frameworks (Google I/O '17)

Interview

• I just got a developer job at Facebook. Here’s how I prepped for my interviews.
• The 30-minute guide to rocking your next coding interview
• I just got a developer job at Snapchat. Here’s what I learned and how it can help you with your job search.
• Google Coding Interview Question and Answer #1: First Recurring Character

Lesson Learned

• How I would explain a decade of web development to a time traveler from 2007
• I've been a Web Developer for 17 Years, and this is what I learned - Daniel Khan
• The Developer’s Edge: How To Become A Senior Developer
• Veteran CTO (with Multiple Successful Exits) Answers Your Top Startup-Building Questions

User Interface

• Rethinking drag and drop: Taking something basic and making it beautiful
• Expanding Grid Item Animation
• Inspiration for Menu Hover Effects