Front end training level guide

Translator: Front-end wisdom

Original text: medium.freecodecamp.org/from-zero-t… Medium.freecodecamp.org/from-zero-t…

I remember when I first learned about front-end development. I read a lot of articles and materials, and I was overwhelmed by the learning materials, and I didn’t even know where to start.

This guide lists the front end learning path and provides some useful resources for your daily bookkeeping.

To make the guide easier to follow, I have divided it into two parts. The first part describes how to develop interfaces using HTML and CSS. Part 2 covers Javascript, frameworks, and design patterns.

HTML and CSS basics

In front-end development, everything starts with HTM and CSS. HTML and CSS control what you see on a Web page. HTML represents content, while CSS handles style and layout.

First, read the Mozilla Developer Network(MDN) HTML and CSS tutorial. MDN explains key concepts of HTML and CSS chapter by chapter. In addition, each chapter is only one page long, with interactive demos linked to CodePen and JSFiddle.

After completing these tutorials, check out CodeAcademy’s Make a Website course. This tutorial only takes a few hours to complete and is a great introduction to building a website using HTML and CSS. If wq wants to learn more, Building web forms is another tutorial from CodeAcademy that will guide you through Building and styling web forms.

To practice CSS, try CSS Diner. This is a fun CSS challenge game. Another important aspect of HTM L and CSS is layout. LearnLayout is an interactive tutorial that shows you how to create a layout using HTML and CSS.

In addition, learn the API basics of how to use CSS Tricks Google Fonts. Typography is the basic building block of an interface. If you have the time, I highly recommend you read this free online book, Professional Web Typography by Donny Truong, which teaches you everything you need to know about Typography as a front-end developer.

With these resources, don’t worry too much about memory. Instead, the focus is on understanding how HTML and CSS work together.

Practice HTML and CSS basics

Now that you have a basic understanding of HTML and CSS, let’s have some fun. In this section, there are two practices designed to provide you with practices for building websites and interfaces. I use the word “practice” because in practice, you learn as much from your failures as you learn from your successes.

Practice 1

In our first practice, we will use CodePen. CodePen is a front-end platform where you can write HTML and CSS code without having to store files locally. It also provides a live preview, which can be updated immediately when the code is saved.

By using CodePen, you can kill two birds with one stone. On the one hand, you practice HTML and CSS. On the other hand, you create a basic set of progress. We’ll also use Dribbble, a design-inspired website.

Find a design on Dribbble that is simple enough to code in a few hours. I’ve chosen a few designs to get you started :1, 2, 3, 4 and 5. I chose mobile-first web designs because they are simpler than desktop web designs. However, you are free to choose your desktop design.

After you decide on a design, go ahead and try writing it in CodePen. If you get stuck, remember that StackOverflow is your friend. Another useful practice is to visit sites like Medium, AirBnB, and Dropbox and use the Inspector tool to see how they implement different layouts and styles. Also, look at pens on CodePen. I’ve picked some good examples:

• Twitter widget
• Article News Card
• Simple Flat Menu

If you come out different from the original design, please don’t be discouraged. Continue to practice different designs and you will see improvement each time.

If you don’t have a design background, chances are your design vision isn’t mature enough. A front-end developer with a good design eye will be able to recognize good designs and replicate them perfectly. A few weeks ago, I wrote about how to develop your eye for design.

Practice 2

Hopefully this first exercise has given you some confidence in writing HTML and CSS. For practice 2, we’ll look at some websites and write some components.

Some sites use CSS frameworks or confuse their CSS class names, making it hard to read their source code. That’s why I chose several well-designed sites that are easy to read source code.

• AirBnB: Try copying their footer
• PayPa: Try copying their navigation bar L
• Invision: Try copying the registration section at the bottom of the page
• Stripe: Try to duplicate their payment portion

Again, practice 2 is not about recreating the entire page. Select a few key components, such as the navigation bar or hero section, to code. I offer a suggestion next to the list of sites, but feel free to choose other components.

HTML and CSS best practices

So far, you’ve learned the basics of HTML and CSS. The next step is to learn best practices. A best practice is a set of informal rules for improving code quality.

Semantic markup

One of the best practices in HTML and CSS is to write semantic markup. Good Web semantics means using appropriate HTML tags and meaningful CSS class names to express the meaning of the structure.

For example, the H1 tag tells us that the text it wraps is an important heading. Another example is the footer tag, which tells us that the element belongs at the bottom of the page. For further information, read CSSTricks on proper HTML5 semantics and what constitutes a semantic class name.

CSS Naming conventions

The next important best practice for CS S is proper naming conventions. Good naming conventions, such as semantic tags, convey meaning and help make our code predictable, readable, and maintainable. You can find OOCSS, ACSS, BEM, SMACSS in this article: What are they? What should I use? Learn about different naming conventions in.

In general, I recommend you try some simple naming conventions that are intuitive to you. Over time, you’ll discover what works best for you. To learn how companies like Medium take advantage of naming conventions like BEM, read Medium’s CSS is Actually Pretty F ***ing Good. In this article, you’ll also learn that coming up with a valid set of CSS conventions is an iterative process.

CSS reset

From page margins to line heights, every browser has some minor style inconsistencies. Therefore, you need to reset the CSS. MeyerWeb is a welcome reset. If you want to dig deeper, read Create Your Simple Reset.css File.

Cross-browser support

Cross-browser support means that your code supports the latest browsers. CSS properties like Transition require a vendor prefix to work in different browsers. In this article, I can read more about vendor prefixes, also known as CSS vendor prefixes. Most importantly, you should test your site across multiple browsers, including Chrome, Firefox, and Safari.

CSS preprocessor and CSS post-processor

CSS has come a long way since its introduction in the 1990s. As UI systems became more complex, tools called preprocessors and post-processors were proposed to manage complexity.

The CSS preprocessor is a CSS language extension that adds additional features such as variables, blending, and inheritance. The two main CSS preprocessors are Sass and Less. In 2016, Sass became more widely used. Bootstrap, a popular responsive CSS framework, is also being converted from Less to Sass. Also, when most people talk about Sass, they’re really talking about SCSS.

The CSS post-processor applies changes to the CSS after being written or compiled by the preprocessor. For example, some postprocessors, such as PostCSS, have plug-ins that automatically add browser vendor prefixes.

When you first hear about CSS preprocessors and post-processors, chances are you’ve already used them everywhere. However, start simple and add extensions such as variables and mixins only when necessary. The article I suggested earlier, Medium’s CSS is Actually Pretty F ***ing Good, also covers preprocessors.

Grid systems and responsiveness

A grid system is a CSS structure that allows you to stack elements horizontally and vertically.

Grid frameworks such as Bootstrap, Skeleton, and Foundation provide stylesheets for managing rows and columns in a layout. While grid frameworks are useful, it is also important to understand how grids work. Understanding CSS grid systems and Don’t Overthink Grids is a good overview.

One of the main purposes of a grid system is to add responsiveness to your site. Responsiveness means that your site adjusts to the width of the window. Most of the time, the response is implemented using CSS media queries, and CSS rules only apply to specific screen widths.

Read the following articles about media query knowledge and extension:

• Intro to Media Queries
• mobile-first
• An Introduction to Mobile-First Media Queries

Practice HTML and CSS best practices

Now that you’ve mastered the best practices, let’s put them to the test. The goal of the following two practices is to practice writing clean code and observe the long-term impact of best practices on readability and maintainability.

Practice 3

For practice 3, choose projects you’ve worked on before, and use what you’ve learned along the way to refactor your code. Refactoring means writing code to make it easier to read and simpler.

Being able to effectively refactor code is an important skill for front-end developers. Writing quality code is an iterative process. CSS Architecture: Refactoring your CSS is a beginner’s guide to refactoring code.

There are a few things you need to ask yourself when refactoring code.

* Is your class name ambiguous? Will you still be able to understand what your class name means six months later?

* Are your HTML and CSS semantic? When you browse through your code, can you quickly discern the meaning of structures and relationships?

• Do you use the same hexadecimal color code over and over again in your code? Would it make more sense to refactor it into a Sass variable?

• Does your code run the same in Safari and Chrome?

• Can you replace some of the layout code with a grid system like Skeleton?

• You use it a lot! Important flag? How do you solve this problem?

Practice 4

The final experiment is to apply what you’ve learned about best practices. However, the effects of best practices usually don’t become apparent until you apply them to a larger project.

As a final exercise, create a portfolio website for yourself. As a front-end developer, your portfolio website is one of your most important digital assets. Portfolio is a website that displays your work. More importantly, it is an ongoing record that helps you track your progress and development. So even if you only have one or two things to show, show them.

First, follow A simple Workflow for Designing and Developing portfolio Websites by Adham Dunaway

If your first portfolio website iteration isn’t perfect, that’s fine. Portfolio sites go through many iterations. Also, it’s important that you use your skills to build it.

Keep pace with The Times

While HTML and CSS won’t become obsolete anytime soon, it’s important to keep up with developments in the front-end environment.

Below is a list of websites, blogs and forums that are both fun and informative to read.

• CSSTricks
• Smashing Magazine
• Designer News
• Nettuts+
• CSS Wizard

Learn by Example

Finally, the best way to learn is by example. Here is a set of style guides and coding specifications that will teach you how to be a more effective front end.

The style guide

A Web Style guide is a collection of CSS components and patterns that can be reused throughout a Web site. The key thing to note from these style guides is how the component-based HTML and CSS approach allows code to be reused to keep it clean (DRY).

• Mapbox
• LonelyPlanet
• SalesForce
• MailChimp

Coding standards

Coding specifications make code readable and maintainable. Some of these links (such as CSS Guidelines) are Guidelines for writing better HTML and CSS, while others (such as Github Internal CSS Toolkit and Guidelines) are examples of high-quality code.

• CSS Guidelines
• Github internal CSS toolkit and guidelines
• An ‘s CSS Styleguide

summary

Hopefully, by the end of this article, you’ll be familiar with HTML and CSS and have mastered some projects. The best way to learn about the front end is to build projects and practices. Remember, every front-end developer has to start somewhere. Better to start today than tomorrow.

This article is the first in a two-part series. The second article describes how to use Javascript and Javascript libraries/frameworks to add interactivity, mutual learning, and progress.

JavaScript Basics

JavaScript is a cross-platform programming language that can now be used for almost anything.

language

Before you can learn how to apply JavaScript to the Web, you need to understand the language itself. First, read the Mozilla Developer Network’s Language Basics crash course. This tutorial will teach you basic language constructs such as variables, conditions, and functions.

Then, read the following section of MDN’s JavaScript guide:

• Grammar and Types
• Control flow and error handling
• Loops and Iterations
• Functions provides (function)

Don’t worry too much about memorizing specific syntax; you can always look it up in the documentation. Instead, focus on understanding important concepts such as variable instantiation, loops, and functions. If knowledge density is too difficult, let’s go ahead and do one, and you put these concepts into practice, and when you go back and look at them, it might be a little bit clearer.

Document-based learning can be a bit monotonous, but look at Codecademy’s JavaScript courses, which mix theory with practice and can be a lot of fun. Also, if you have the time, take a look at each of the concepts listed above, and read the corresponding section in Eloquent JavaScript to strengthen your learning: Eloquent JavaScript is a great, free online book that every aspiring front-end developer should read, Eloquent JavaScript.

interactive

Now that you have a basic understanding of JavaScript syntax, the next step is to apply it to the Web. To understand how JavaScript interacts with websites, you must first understand the Document Object Model (DOM).

DOM is a representation structure for HTML documents. It is a tree structure consisting of JavaScript objects that correspond to HTML nodes. To learn more about DOM, read CSSTricks’ What is DOM? It provides a simple and straightforward interpretation of the DOM.

JavaScript interacts with the DOM to change and update it. Here is an example where we select an HTML element and change its content

Var container = document. GetElementById (" container "); container.innerHTML = 'New Content! ';Copy the code

Don’t worry, that’s just a simple example. You can do a lot more with JavaScript DOM manipulation. For more information on how to interact with DO M using JavaScript, read the following guidelines in the document Object Model section of MDN.

• Events and DOM
• Examples of web and XML development using the DOM
• How do I build a DOM tree
• Summary of the DOM
• Use selectors to locate DOM elements

Again, it’s important to understand the concept first, not the grammar, and hopefully answer the following questions:

• What is DOM?
• How to query elements
• How do I add event listeners?
• How do I change DOM node properties?

For a list of common JavaScript DOM interactions, see PlainJS’S JavaScript functions and helpers. The site provides examples of styling and attaching keyboard event listeners to HTML elements. If you want to dig deeper, you can always read the DOM section in the Eloquent JavaScript section.

check

To debug JavaScript in the browser, we use the browser’s built-in developer tools. Most browsers provide an inspector panel that lets you see where web pages come from. You can trace JavaScript as it executes, print debug statements to the console, and view things like network requests and resources.

There is a tutorial on using Chrome development tools. If you use Firefox, check out this tutorial.

Practice base

There’s a lot to learn about JavaScript at this point. However, the last section contains a lot of new information. I think it’s time for us to take a break and do some practice. They help reinforce some of the concepts you just learned.

Practice 1

For practice 1, go to AirBnB, open your browser’s page inspector, and click the Console TAB. Here, you can execute JavaScript on the page. What we need to do is to have some fun by manipulating some elements on the page. See if you can complete all of the following DOM operations.

• Select the title tag with a unique class name and change the text

• Select any element on the page and delete it

• Select any element and change one of its CSS properties

* Select a specific region label and move it down 250 pixels

* Select any component, such as the panel, and adjust its transparency

• Define a function called doSomething, which in function j defines alert (” Hello world “) and executes it

• Select a specific paragraph tag, register a click event with it, and run doSomething every time the event is triggered

If you encounter difficulties, refer to the JavaScript functions and helper guide. Most of these missions are based on it. Here’s an example of how to accomplish the first point:

Var header = document.querySelector('.text-branding ')Copy the code

The main purpose of this exercise is to learn something about JavaScript and DOM manipulation and see them in action.

Practice 2

Using CodePen, write a basic JavaScript practice that uses DOM manipulation and requires some programming logic to run. The focus of this exercise is to combine some of the things you learned in Part 1 of the Front End Tutorial with JavaScript. Here are a few examples of inspiration.

• Mood Color Generator
• The calculator
• JavaScript test
• Playable Canvas Asteroids

More JavaScript

Now that you’ve learned some JavaScript and put it into practice, we’ll move on to some more advanced concepts. The following concepts are not directly related. I have grouped them in this section because they are necessary to understand how to build more complex front-end systems. Once you get into the framework section, you’ll understand and use them better.

language

As you work more with JavaScript, you’ll encounter higher-level concepts. Below is a list of some of these concepts. Also, Eloquent JavaScript covers most of it, as well, if you want to fill up on something else.

• Inheritance and prototype chains
• scope
• Event polling
• The event bubbling
• The Apply, call, and bind
• Callback functions and promises
• Promotion of variables and functions
• Currie,

Imperative and declarative

There are two ways in which JavaScript interacts with the DOM: imperative and declarative. On the one hand, declarative programming focuses on what happens. Imperative programming, on the other hand, is about what and how to do it.

Var hero = document.querySelector('.hero') hero.addeventListener (' click ', Function () {var newChild = document.createElement(' p ') newChild.appendChild(' document.createTextNode ') ') newchild.setAttribute (' class ', 'text') newchild.setattribute (' data-info ', 'header') hero.appendChild(newChild)})}Copy the code

This is an example of imperative programming where we manually query an element and store the UI state in the DOM. In other words, focus on how to achieve something. The biggest problem with this code is that it is fragile. If the person working with the code changes the class name in the HTML from Hero to villain, the event listener will no longer fire because there is no Hero class in the DOM.

Declarative programming solves this problem. You don’t have to select the element, but rather leave it to the framework or library you are working with. This makes you focus on what to do rather than how to do it. To learn more, check out the state of JavaScript — from imperative to declarative, and Web development: Declarative vs. Imperative.

Ajax

You’ve probably seen the term Ajax several times in these articles and tutorials. Ajax is a technology that allows Web pages to interact with servers using JavaScript

For example, when you submit a form on a website, it collects your input and makes an HTTP request that sends the data to the server. When you post a tweet to Twitter, your Witter client makes an HTTP request to Twitter’s server API and uses the server response to update the page.

For Ajax reading, check out what Ajax is. If you still don’t fully understand AJAX concepts, take a look at Explain It Like I’m 5, What is AJAX. If that’s not enough, you can also read the JavaScript section on HTTP.

Today, the browser standard for HTTP requests is Fetch. You can read more about Fetch in this article by Dan Walsh. It describes how Fetch works and how to use it. You can also find Fetch Polyfill with documentation here.

jQuery

So far, you’ve been using JavaScript for DOM manipulation. In fact, there are many DOM manipulation libraries that provide apis to simplify the code you write.

One of the most popular DOM manipulation libraries is jQuery. Remember that jQuery is an imperative library. It was written before front-end systems were as complex as they are today. Today, managing complex UIs is declarative frameworks and libraries such as Vue, Angular, and React. However, I still recommend learning jQuery, as you will likely encounter it in your front-end career.

To learn the basics of J Query, check out the jQuery Learning Center. It goes step by step through important concepts such as animation and event handling. If you want more hands-on tutorials, check out the jQuery courses at Codecademy.

ES5 vs. ES6

Another important concept for understanding JavaScript is ECMAScrip T and how it relates to JavaScript. Today, there are two main JavaScript styles that you’ll normally see :ES5 and ES6. ES5 and ES6 are the ECMAScript standards used by JavaScript. You can think of them as versions of JavaScript. The final draft of ES5 was completed in 2009, and you’ve been using it so far.

ES6, also known as ES2015, is a new standard that brings new language constructs to JavaScript, such as constants, classes, and template strings. It is worth noting that ES6 brings new language features, but ES5 is still used to define them semantically. For example, classes in ES6 are just syntactic sugar for JavaScript archetypal inheritance.

It is important to know about ES5 and ES6, because today you will see applications that use both approaches. This is a great introduction to ES6, Dan Wahlin’s INTRODUCTION to ES6 – what’s happening with the Next version of JavaScript. Later, you can see the full list of changes from ES5 to ES6 in the ES6 features. If you want more, check out this Github repository that includes ES6 features.

More practice

If you’ve made it this far, congratulate yourself. You already know a lot about JavaScript. Let’s put some of what you’ve learned into practice.

Practice 3

Exercise 3 Combine your KNOWLEDGE of HTML and CSS with an introductory course in JavaScript. In this experiment, you will create a clock of your own design and have it interact with JavaScript. Before getting started, I recommend reading the tutorial on decoupling HTML, CSS, and JavaScript to understand the basic CSS class naming conventions when mixing JavaScript. I’ve also prepared a list of pens on CodePen that you can use as a reference for this exercise. For more examples, search for clock on CodePen.

• Flat Clock
• jQuery Wall Clock
• Fancy Clock
• Retro Clock
• Simple JavaScript Clock

You can do this experiment in two ways. You can design and create layouts with HTML and CSS, then add interactivity with JavaScript. Or you can write the javascript logic first and then go into the layout. In addition, you can use jQuery, but feel free to use pure JavaScript.

JavaScript framework

Now that you’ve mastered the basics of JavaScript, it’s time to learn about JavaScript frameworks. Frameworks are JavaScript libraries that help you construct and organize code. JavaScript frameworks provide developers with repeatable solutions to complex front-end problems, such as state management, routing, and performance optimization. They are commonly used to build Web applications.

I won’t go through every JavaScript framework, but here’s a quick preview of a few :Angular, React + Flux, Ember, Aurelia, Vue, and Meteor. You don’t have to learn every framework. Pick one and study hard. Don’t chase frameworks; instead, understand the underlying programming philosophy and principles on which frameworks are based.

Architectural patterns

Before looking at frameworks, it is important to understand some of the architectural patterns that frameworks tend to use :MVC(Model — View — Controller), MVVM(Model — View — ViewModel) V, and vMVP(Model — View — Presenter). These patterns are designed to create a clear separation of concerns between application layers.

Separation of concerns is a design principle that focuses on splitting applications into domain-specific layers. For example, you can use JavaScript objects (often called models) to store state rather than leaving HTML to keep application state.

To learn more about these patterns, read the MVC for Chrome Developers first. After that, read and understand MVC and MVP(for JavaScript and trunk developers). In that article, don’t worry about not being able to understand it, just understand some of the concepts of MVC and MVP.

Addy Osman also wrote a JavaScript developer’s guide to understanding MVVM. To understand the origins of MVC and why, read Martin Fowler’s article on GUI architecture. Finally, read the JavaScript MV* Patterns section to learn about JavaScript design Patterns. Learning JavaScript Design Patterns is a great free online book.

Design patterns

JavaScript frameworks are not going to reinvent the wheel. Most of them rely on design patterns. You can think of design patterns as generic templates for solving common problems in software development.

While understanding JavaScript design patterns is not a prerequisite for learning frameworks, I recommend looking at the following design patterns when you have the time.

• Decorator mode
• The factory pattern
• The singleton pattern
• Reveal patterns
• Observer model

Understanding and being able to implement some of these design patterns will not only make you a better engineer, but will also help you understand some of the underlying functionality of the framework.

AngularJS

AngularJS is a JavaScript MVC framework and sometimes an MVVM framework. It is maintained by Google and took the JavaScript community by storm when it was first released in 2010.

Angular is a declarative framework. One of the most helpful articles that helped me understand how to make the transition from imperative to declarative JavaScript programming was how AngularJS is different from jQuery on StackOverflow.

If you want to learn more about Angular, check out the Angular documentation. They also provide a tutorial called Angular Cat to get you started right away. Tim Jacobi provides a more complete Angular study guide in the Github repository. Also, check out this definitive best practices style guide by John Papa.

React + Flux

Angular solves many of the problems developers face when building complex front-end systems. Another popular tool is React, which is a library for building user interfaces. You can think of it as V in MVC. Because React is just a library, it usually uses an architecture called Flux.

Facebook designed React and Flux to address some of the shortcomings of MVC and its scale issues. Check out their famous hack demo: Rethinking Facebook’s Web application development. It goes beyond Flux, which is where it originated.

To get started with React and Flux, learn React first. A good primer is the React documentation. After that, take a look at the React.js Introduction For People Who Know Just Enough jQuery To Get By To help you transition from the mindset of jQuery.

Once you have a basic understanding of React, start learning about Flux. A good starting point is the official Flux documentation. After that, check out Awesome React, a curated list of links to help you take your learning a step further.

Exercises and Frameworks

Now that you have some basic knowledge of JavaScript frameworks and architectural patterns, it’s time to put them into practice. In both exercises, the focus is on applying the architectural concepts you have learned. In particular, keep your code DRY, clear separation of concerns, and adhere to the principle of single responsibility.

Exercise 4

Exercise 5 is shredding and refactoring a Todo MVC application using framework-independent JavaScript. The purpose of this exercise is to show you how MVC can work without mixing framework-specific syntax.

First, look at the final results on TodoMVC. The first step is to create a new project locally and start by creating the three components of MVC. Since this is a complex experiment, refer to the full source code in the Github repository. If you can’t copy the project exactly or don’t have the time, that’s ok. Download the REPO code and try using the different MVC components until you understand the relationship between them.

Practice 5

Exercise 5 is a good exercise for applying MVC, and understanding MVC is an important step in learning about JavaScript frameworks. Exercise 5 is to build an Etsy clone with Angular following the Scotch. IO tutorial.

Build an Etsy clone with Angular. Stamplay will teach you how to build a Web application using Angular, how to build interfaces using apis, and how to construct large projects. After completing this tutorial, you should be able to answer the following questions.

• What is a Web application?
• How does MVC/MVVM apply to Angular?
• What is an API and what does it do
• How do YOU organize and construct a large code base
• What are the benefits of breaking up the UI into instruction components?

If you want to try building more Angular Web applications, try building a real-time status update application using AngularJS & Firebase.

Keep up with current events

Like other parts of the front end, JavaScript is moving fast and it’s important to keep an eye on it.

Below is a list of websites, blogs and forums that are both fun and informative to read.

• Smashing Magazine
• JavaScript Weekly
• Reddit JavaScript
• JavaScript Jabber

Learn by Example

As always, the best way to learn is by example.

The style guide

The JavaScript style guide is a set of coding specifications designed to help keep your code readable and maintainable.

• AirBnB JavaScript Styleguide
• Principles of Writing Consistent, Idiomatic JavaScript
• Node Styleguide
• MDN Coding Style

The code base

I can’t stress enough how helpful it is to read good code and know how to search Github’s relevant repository when getting new content.

• Lodash
• Underscore
• Babel
• Ghost
• NodeBB
• KeystoneJS

conclusion

By the end of this tutorial, you should have a firm grasp of the fundamentals of JavaScript and how to apply them to the web. Keep in mind that this guide provides you with an overall road map. If you are proficient in the front end, it is important to take the time to apply these concepts to your project. The more projects you work on and the more passionate you are about them, the more you will learn.

Your likes are my motivation to keep sharing good things.

Communication (welcome to join the group, the group will give red envelopes on weekdays, interactive discussion of technology)

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

I am Xiaozhi, the author of the public account “Big Move the world”, and a lover of front-end technology. I will often share what I have learned to see, in the way of progress, mutual encouragement!

Pay attention to the public number, background welfare, you can see the welfare, you know.

Every time I sort out my articles, I usually go to bed at 2 o ‘clock, about 4 times a week, which is very bitter. I hope to get support and give some encouragement