Front-end strategy-from passer-by to hero and hero to Hero

Front-end strategy-from passer-by to hero and hero to Hero

I remember that I was a beginner and met many articles. In the vast sea of knowledge, I was helpless and did not know where to start. Do not do what you want. This article will help you navigate to the ocean of front-end learning, mainly including some resources and insights I have prepared during my previous learning process. I plan to divide the entire article into two parts: the first part review the basic knowledge of HTML and CSS, and the second part summarizes JavaScript, front-end framework and design pattern.

HTML and CSS Basics

In the front-end field, everything is inseparable from HTML and CSS. HTML and CSS basically control everything you see. HTML is used to define content while CSS is responsible for style and layout.

First, start with HTML and CSS. Here we recommend the MDN official guide. MDN elaborated on important HTML and CSS content in detail. In addition, each chapter is a separate page and provides a Demo displayed in CodePen and JSFiddle.

After reading these basic tutorials, you can take a look at the tMake a Website series courses provided by CodeAcademy. This course can be completed in just a few hours. If you want more exercises, you can look at CSS Diner. This is a small game of CSS challenges.

Finally, let's take a look at how to use Google Fonts. Refer to the Basics of Google Font API produced by CSSTricks.

If Google Fonts is not used in China, you can refer to FontAwesome. If you want to use a Chinese font, you are advised to refer to FontSpider. Please search by yourself on Github.

Typography-typographical layout is also an important part of building the interface. If you have time, we recommend you read the Professional Web Typography book written by Donny Truong, it will teach you basically everything about typography. When learning this, don't worry too much about forgetting it. You can't remember it. You should focus on recording this and understanding how HTML and CSS work.

Practicing HTML and CSS Basics

Here you should have understood the basic use of HTML and CSS. We will learn how to use it below. This part has designed two small experiments for you to build websites and interfaces by yourself. I describe them as experiments, so don't be afraid of failure.

In the first experiment, we used CodePen, an online HTML and CSS test platform. It also provides the Real-Time preview function. Now let's take a look at the prototype of the interface we have made. Let's go to Dribbble. It's all about design creativity.
I see this series: 1, 2, 3, 4, and 5 .. I chose a mobile-first design because it is simpler than the desktop design, but you can also find one by yourself.

After you select the design, you can start on CodePen. You can also check the Pen: pens on CodePen designed by others and Click Preview. In addition, don't forget StackOverflow, which is your friend. If the last thing you implement is far from the design, don't be discouraged and keep trying to improve.

Experiment 2

It is estimated that you are a little confident after the experiment. In Experiment 2, we will first learn from the classic websites of some large companies. Many websites may use some CSS frameworks or confuse their CSS class names, which makes reading the source code more troublesome. In this case, I listed several source codes with better readability:

• Dropbox for Business: Try replicating their hero section

• AirBnB: Try replicating their footer

• PayPal: Try replicating their navigation bar

• Invision: Try replicating their signup section at the bottom of the page

• Stripe: Try replicating their payments section

Again, the purpose of Experiment 2 is not to let you reconstruct the entire page, but to know how to split components and how people do it. If you do not have a design background, you may have to explore your potential. A good front-end developer must be able to identify good designs and then reproduce them perfectly.

You can choose online programming: CodePen or local development. If you choose to do it locally, you can use this template project. I recommend using an editor like Atom or Sublime. In addition, you should take a good look at the console and developer tools that come with Firefox or Chrome.

HTML and CSS Best Practices

Now that you can use HTML and CSS to do some simple things, let's take a look at the so-called best practices. The best practice is actually a collection of conventions and specifications summarized in daily development, allowing you to develop and build higher quality code faster.

Semantic Markup: Semantic tag
One of the most important aspects of HTML and CSS best practices is how to write tags with semantic readability. Good semantics means that you use appropriate HTML tags and CSS class names to convey the structure meaning you want to express.
For exampleH1The tag tells us that the package contains some important title information. Another example is the * footer * tag, which will tell you straight away that it contains some footer information. We recommend that you read What Makes For A Semantic Class Name of a Look Into Proper HTML5 Semantics and CSSTricks.

CSS Naming Conventions

The next important thing is how to set a proper class name for your CSS. Good naming conventions, such as semantic tags, can better convey meaning and greatly increase code readability and maintainability.

In general, my advice is to follow your intuition to determine naming conventions. As time goes on, you will feel comfortable. If you want to see how large companies, such as Medium, practice naming rules such as BEM, read Medium's CSS is actually pretty f *** ing good, here you will learn how to maintain your effective CSS naming habits in a fast iteration.

CSS Reset

Different browsers have some inconsistencies between small style points such as margin and line-height. Therefore, you must learn to reset your CSS environment. MeyerWeb is a common resetting method.

Cross Browser Support

Cross-browser support means that your code should support most modern browsers, some common CSS attributes, suchTransitionVendor prefixes is required to run in different browsers. You can learn more in CSS Vendor Prefixes. This means that you need to spend more time testing between different browsers.

Turning on the history of CSS, CSS has gone through a long and rugged road since 1990s. The entire UI system is becoming increasingly complex, and people will choose to use some pre-processors or post-processors to manage this complexity. The extension of the CSS pre-processor or CSS language provides variables, Mixins, and inherit from these features without sound. The two most important CSS pre-processors are Sass and Less. In 2016, Sass was widely used. The famous responsive framework BootStrap migrated from Less to Sass. In addition, Scss is also mentioned when many people talk about SASS.

The CSS post-processor processes handwritten CSS files or pre-compiled CSS files. Taking the famous PostCSS as an example, it has a plug-in that can help you automatically add some rendering prefixes.
After you have been familiar with CSS preprocessing and post-processor, you will promote them to your daily partner. However, it is far from enough. features such as variables and Mixins cannot be abused. It should still be used in a proper place.

Grid Systems and Responsiveness

The grid system is the CSS architecture used to arrange elements horizontally or vertically.

The famous grid frameworks include Bootstrap, Skeleton, and Foundation. They provide style sheets for row and column management in the layout. These frameworks are easy to use, but we also need to understand the working principle of the Grid. We recommend that you refer to Understanding CSS Grid Systems and Don't Overthink Grids.

Another goal of the grid system is to make your website responsive. The response means that your website can dynamically adjust the size and layout of your website based on the screen size. Most of the time, this responsive feature is based on CSS media queries, that is, different CSS style rules are selected based on different screen sizes.

In addition, because we are making a so-called mobile-first revolution, we recommend that you take a look at An Introduction to Mobile-First Media Queries.

Practicing HTML and CSS Best Practices

Congratulations to daoyou, the Foundation has been successfully built. You have learned some best practices about HTML and CSS. Now we have learned how to use it. The two experiments here mainly help you develop neat code and ensure long-term readability and maintainability.

Experiment 3
In experiment 3, you need to select a project you have previously created and use the best practices mentioned in the article to refactor them to ensure that your code is easier to read and more concise. Mastering how to effectively refactor code is an important skill for front-end developers. Of course, writing high-quality code is not a one-stop process, but a long-term iteration process. CSS ubuntures: Refactor Your CSS is a good learning start point.

Before you decide to refactor the code, you must first ask yourself the following points:

• Is your class name definition ambiguous? Can you understand the meaning of your class name six months later.

• Is your HTML and CSS semantic-oriented? Can you see your code architecture and relationships at a glance?

• Whether the same color code is used repeatedly for N times. Do not forget to use Sass variable.

• Can your code run normally in Safari and Chrome?

• Can I use a grid framework like Skeleton to replace your layout?

• Do you often use it! Important
  ?

Experiment 4
The last experiment is a hodgedge of all the knowledge mentioned above. However, you need to know that many of the best practices mentioned above are difficult to understand in a draft or small project, and they can only be revealed in large projects.
Therefore, in the last project, I suggest you create a website for editing your work. As a front-end developer, your personal website is your own e-business card. Here, we will show you how your work and project are accumulated. It is also a place to trace your development process and development history.

You can refer To Adham Dannaway's article My (Simple) Workflow To Design And Develop A Portfolio Website To start from scratch.
Stay current
When HTML and CSS are already a piece of cake, you even enter the hall of front-end developers, a constant change.

[There is a front-end learning exchange QQ group: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited .]