前端練級攻略(第一部分)

時間 2019-11-07

標籤前端攻略第一部分简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。css

我記得我剛開始學習前端開發的時候。我看到了不少文章及資料，被學習的資料壓得喘不過氣來，甚至不知道從哪裏開始。html

本指南列出前端學習路線，並提供了平時收藏的一些有效的資源。前端

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！git

爲了使這本指南易於理解，我把它分紅了兩部分。第一部分介紹瞭如何使用 HTML 和 CSS開發接口。第2部分將介紹 Javascript、框架和設計模式。github

HTML 和 CSS 基礎

在前端開發中，一切都從 HTM 和 CSS 開始。HTML 和 CSS 控制你在 Web 頁面上看到的內容。HTML 表示內容，而 CSS 處理樣式和佈局。web

首先，閱讀 Mozilla Developer Network(MDN)的 HTML 和 CSS 教程。MDN 逐章解釋了 HTML和 CSS 重要概念。此外，每一個章節只有一頁長，交互演示連接到 CodePen 和 JSFiddle。chrome

在完成這些教程以後，看看 CodeAcademy 的 Make a Website 課程。本教程只須要幾個小時就能夠完成，對於使用 HTML 和 CSS 構建網站是一個很好的入門教程。若是wq 想了解更多， Building web forms 是 CodeAcademy 提供的另外一篇教程，該教程將指導你構建和樣式化 web 表單。bootstrap

要練習 CSS，能夠試試 CSS Diner。這是一個有趣的 CSS 挑戰遊戲。HTM L和CSS 的另外一個重要方面是佈局。LearnLayout 是一個交互式教程，向你展現如何使用 HTML 和 CSS 建立佈局。segmentfault

另外，瞭解如何使用 CSS Tricks 的 Google 字體的 API 基礎知識。排版是界面的基本構建塊。若是你有時間，我強烈建議你閱讀這本免費的在線書籍，Donny Truong 的 Professional Web Typography 它教你做爲前端開發人員須要瞭解的關於排版的一切。設計模式

經過這些資源，不要太擔憂記憶的問題。相反，重點是理解 HTML 和 CSS 如何協同工做。

練習 HTML 和 CSS 基礎

如今你已經對 HTML 和 CSS 有了基本的瞭解，讓咱們來找點樂趣。在本節中，有兩個實踐旨在爲你提供構建網站和界面的實踐。我用「實踐」這個詞是由於在實踐中，你從失敗中學到的東西和你從成功中學到的同樣多。

實踐 1

在咱們的第一個實踐中，咱們將使用 CodePen。CodePen 是一個前端平臺，你能夠在這裏編寫 HTML 和 CSS 代碼，而沒必要在本地存儲文件。它還提供了實時預覽，能夠在保存代碼時當即更新。

經過使用 CodePen，你能夠一石二鳥。一方面，你要練習 HTML 和 CSS。另外一方面，你建立一個基本的進度組合。咱們還將使用 Dribbble，這是一個充滿設計靈感的網站。

在 Dribbble 找到一個簡單到能夠在幾個小時內編寫代碼的設計。我選擇了一些設計讓你開始:1、2、3、4 和 5。我選擇了手機爲先的網頁設計，由於它們比桌面網頁設計要簡單。不過，也能夠自由選擇桌面設計。

在你決定了一個設計以後，繼續嘗試用 CodePen 編寫它。若是遇到困難，請記住StackOverflow 是你的朋友。另外一個有用的實踐是訪問像 Medium、AirBnB和 Dropbox 這樣的網站，使用 inspector 工具查看它們是如何實現不一樣的佈局和風格的。另外，看看 pens on CodePen。我挑選了一些好的例子:

Twitter小部件
Article News Card
Simple Flat Menu
若是你出來的與原設計不一樣，請不要氣餒。繼續練習不一樣的設計，你會發現每次都有進步。

若是你沒有設計背景，極可能你的設計眼光不夠成熟。具備良好設計眼光的前端開發人員將可以識別好的設計並完美地複製它們。幾周前，我寫了一篇關於如何培養你的設計眼光的文章。

實踐 2

但願第一個實踐讓你對編寫 HTML 和 CSS 有必定的信心。對於實踐 2，咱們將看一些網站，而後編寫一些組件。

一些網站使用 CSS框架或混淆它們的 CSS 類名，使你很難閱讀它們的源代碼。這就是爲何我選擇了幾個設計良好的網站，易於閱讀源代碼。

一樣，實踐2的重點不是從新建立整個頁面。選擇幾個關鍵組件，如導航欄或英雄部分進行編碼。我在網站列表旁邊提供了一個建議，可是請隨意選擇其餘組件。

HTML 和 CSS 最佳實踐

到目前爲止，你已經學習了 HTML 和 CSS 的基礎知識。下一步是學習最佳實踐。最佳實踐是一組提升代碼質量的非正式規則。

語義標記

HTML　和　CSS　的最佳實踐之一是編寫語義標記。好的　web　語義意味着使用適當的　HTML　標籤和有意義的 CSS 類名來表示結構的意義。

例如，h1 標籤告訴咱們它包裝的文本是一個重要的標題。另外一個例子是footer標籤，它告訴咱們元素屬於頁面底部。有關進一步，請閱讀 CSSTricks 的正確的 HTML5 語義和什麼是語義類名的構成要素。

CSS 命名規範

CS S的下一個重要的最佳實踐是正確的命名規範。良好的命名規範，如語義標籤，傳達了意義，並有助於使咱們的代碼可預測、可讀和可維護。你能夠在這篇 OOCSS、ACSS、BEM、SMACSS：它們是什麼?我應該用什麼? 中瞭解到不一樣的命名規範。

通常來講，我建議你嘗試一些簡單的命名規範，這些規範對你來講是直觀的。隨着時間的推移，你會發現最適合你的方法。要了解像 Medium 這樣的公司是如何利用像 BEM 這樣的命名約定的，請閱讀 Medium’s CSS is actually pretty f*ing good.。在這篇文章中，你還會了解到，提出一組有效的 CSS 約定是一個迭代過程。

CSS重置

從頁邊距到行高，每一個瀏覽器都有一些小的樣式不一致。所以，須要重置 CSS。MeyerWeb 是一個受歡迎的重置。若是你想深刻了解，能夠閱讀 Create Your Simple Reset.css File。

跨瀏覽器支持

跨瀏覽器支持意味着你的代碼支持最新的瀏覽器。像 transition 這樣的 CSS 屬性須要廠商前綴才能在不一樣的瀏覽器中正常工做。在本文中，我能夠閱讀更多關於供應商前綴的信息，即 CSS供應商前綴。最重要的是，你應該跨多個瀏覽器(包括 Chrome、Firefox 和 Safari )測試你的網站。

CSS 預處理器與 CSS 後處理器

自20世紀90年代CSS引入以來，CSS走過了漫長的道路。因爲UI系統變得愈來愈複雜，人們提出了稱爲預處理器和後處理器的工具來管理複雜性。

CS S預處理程序是 CSS 語言擴展，它添加了一些額外的功能，好比變量、混合和繼承。兩個主要的CSS預處理程序是 Sass 和 Less。2016 年，Sass的使用範圍更加普遍。Bootstrap是一種流行的響應式 CSS 框架，它也正在從 Less 轉換到 Sass。並且，當大多數人談論 Sass時，他們其實是在談論 SCSS。