做web前端的小伙伴註意了,未來這些發展方向可以試試!

来源:https://www.cnblogs.com/TT485480/archive/2020/06/29/13206953.html

本文將以UI設計師轉型做web前端作為案例,詳細解讀學web前端該學習哪些專業知識!當然也適用於所有想轉型web前端的親們! 如何學習web前端知識轉型? 不少UI設計師想要學習web前端知識,一方面是喜歡那些華麗的網頁特效,另一方面則是想成為全棧式UI設計師。 1、HTML/CSS學習 第一階段, ...


本文將以UI設計師轉型做web前端作為案例,詳細解讀學web前端該學習哪些專業知識!當然也適用於所有想轉型web前端的親們!

如何學習web前端知識轉型?

不少UI設計師想要學習web前端知識,一方面是喜歡那些華麗的網頁特效,另一方面則是想成為全棧式UI設計師。

1、HTML/CSS學習

第一階段,你要從最基礎的HTML/CSS 開始,簡單地說,HTML 就是一堆非常簡單的標簽,而 CSS 則是把你畫畫的流程用英語按一定的格式寫出來。然後你需要理解常用 HTML 標簽的意思,學會各種 CSS 的屬性,還有 CSS 的盒模型、優先順序、選擇器……

2、JavaScript學習

第二階段,你要是想在網頁上實現交互效果,比如輪播圖、點擊按鈕後播放動畫等等,那麼就必須學會JavaScript . JavaScript 是一門完整、強大、熱門的編程語言,瀏覽器的各種交互效果都由它來做到的。

你先要瞭解一些基礎的 JavaScript 概念(變數、函數、基本類型)後,然後學習 jQuery(JavaScript代碼庫的一種),並且通過 jQuery繼續使用CSS的選擇器。

轉職成為前端重構

專精 HTML/CSS 的前端從業人員也就是前端重構。掌握基本 HTML/CSS 的UI設計師就可以發展到這個方向。

你知道如何寫頁面,也知道怎麼做的更好,並且更加理解 Web 世界,做出更“系統化”的設計。

關於CSS 的知識,你需要理解文檔流、浮動流等各種定位的方式與原理,理解 CSS 的繼承復用思想、理解瀏覽器的差異、相容等。

關於HTML 的知識,你需要學習語義化、可訪問性與結構的合理,以及“結構與樣式的分離”等。

你會愛上CSS 3 的酷炫屬性,可以做出響應式網頁設計,用 transiton 和 animation 做補間動畫與關鍵幀動畫,用 transform 做縮放、旋轉、3D變換,還有圓角、漸變、陰影、彈性盒……

掌握了以上的這些,你完全可以利用你的設計功底和web前端知識,做出微信的H5頁面、一些有趣的網頁,或者個人的網站。

轉職成為前端工程師/全棧式UI設計師

如果你還想做出更厲害的交互效果,越來越喜歡編程,那麼達內培訓專家建議你成為一個前端工程師/全棧式UI設計師。

這時,你必須學會以軟體工程師的角度思考。你需要踏踏實實學習編程語言,深入理解作用域、對象、類、封裝、繼承、面向對象編程、事件偵聽、事件冒泡等一大堆編程概念,需要瞭解瀏覽器,學習 DOM、BOM、CSSOM 的 API,甚至還有學習一些網路原理,包括功能變數名稱、URL、DNS、HTTP 請求……

想要搞定編程沒那麼簡單,但是只要肯花功夫就可以做到,那時你收穫到的將是一個新的世界。到了這一階段,你可以做出很多優秀的網站了,購買功能變數名稱,配置伺服器,然後將你的作品掛到網路上吧;或者你可以做一些JavaScript的小游戲,練練編程能力。

我目前是在職前端開發,如果你現在也想學習前端開發技術,在入門學習前端的過程當中有遇見任何關於學習方法,學習路線,學習效率等方面的問題,你都可以申請加入我的前端學習交流裙:前面:603 中間:985 最後:993。裡面聚集了一些正在自學前端的初學者裙文件裡面也有我做前端技術這段時間整理的一些前端學習手冊,前端面試題, 前端開發工具,PDF文檔書籍教程,需要的話都可以自行來獲取下載。


您的分享是我們最大的動力!

更多相關文章
  • 延遲函數delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) ​ const getData = status => new Promise((resolve, reject) => { ...
  • 前言 watch 是由用戶定義的數據監聽,當監聽的屬性發生改變就會觸發回調,這項配置在業務中是很常用。在面試時,也是必問知識點,一般會用作和 computed 進行比較。 那麼本文就來帶大家從源碼理解 watch 的工作流程,以及依賴收集和深度監聽的實現。在此之前,希望你能對響應式原理流程、依賴收集 ...
  • 標簽的分類 1. 雙標簽 又叫常規標簽 : 有開始標簽和結束標簽 eg: <div></div> <body></body> … 2. 單標簽 又叫空標簽 : 只有開始標簽 eg : <br> <img> <meta> … 標簽的說明 代碼只有要嵌套就會出現縮進, head 和body可以不縮進在 ...
  • 動態實現簡單的二級菜單 當滑鼠放到一級標簽上時,滑鼠會變成小手的形狀 展示二級菜單,源碼如下,複製即可直接使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" ...
  • dangerouslySetInnerHTML dangerouslySetInnerHTML 是 React 為瀏覽器 DOM 提供 innerHTML 的替換方案。通常來講,使用代碼直接設置 HTML 存在風險,因為很容易無意中使用戶暴露於跨站腳本(XSS)的攻擊。因此,你可以直接在 React ...
  • 先上預覽地址 http://106.12.212.110:8077/#/ 1.創建項目 使用vue init webpack temperaure 創建一個vue項目 然後安裝axios zrender 命令分別是 npm install axios -S npm install zrender安裝 ...
  • 在最近的一周,我維護的業務系統出現了很多壞毛病,一周七天crash掉了4次,每次都需要都是因為一點很小的問題,觸發了蝴蝶效應,導致整個系統全盤崩潰,於是產生除了敘述本篇的想法,當然這並不是為了掩蓋我在Coding上的一些細節處理和職責疏忽,只是為了從根本的細節上去分析這些問題。 (一、)為什麼會產生 ...
  • 需求:1、點擊新增一欄商品信息,表單驗證區分 2、輸入SKU編碼,帶出當前行的產品名稱,品牌及單位 解決: ...
一周排行
  • 圖文講解,一門教學級邏輯式編程語言,NMiniKanren,的運行原理。 ...
  • 多Sheet導入教程 說明 本教程主要說明如何使用Magicodes.IE.Excel完成多個Sheet數據的Excel導入。 要點 多個相同格式的Sheet數據導入 多個不同格式的Sheet數據導入 主要步驟 1. 多個相同格式的Sheet數據導入 1.1 創建導入Sheet的Dto 主要代碼如下 ...
  • 在KeyPress事件中寫入 private void txtBoxKeyPress(object sender, KeyPressEventArgs e) { if ((e.KeyChar >= 'a' && e.KeyChar <= 'z') || (e.KeyChar >= 'A' && e. ...
  • 在 Xunit 中使用依賴註入 Intro 之前寫過一篇 xunit 的依賴註入相關的文章,但是實際使用起來不是那麼方便 今天介紹一個基於xunit和微軟依賴註入框架的“真正”的依賴註入使用方式 ——— Xunit.DependencyInjection, 來自大師的作品,讓你在測試代碼里使用依賴註 ...
  • 官網 http://www.hzhcontrols.com/ 前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制項,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kww ...
  • 在項目的實際開發過程中,我們經常會遇到Tab頁面的開發 EciTab控制項有多種使用方式: 下麵介紹Frame容器方式: 下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式 採用Iframe的原因主要有兩個 1.開發簡單,每一個頁面都是簡單的畫面 2.性能考 ...
  • 引用的DLL MySql.Data.MySqlClient System.Data City實體 public class City { public int ID { get; set; } public string Name { get; set; } public string Countr ...
  • 案例故事: 即時通訊(IM)軟體有很多,比如企業微信,釘釘,飛書,Skype, 微軟的Lync等, 這些軟體現在都很牛,還能監控誰誰在不在電腦旁工作,誰誰誰提前下班溜了。。。 一次偶然的機會,有個妹子請教我,她每天都想準時18點下班, 她問我如何做到: 假裝企業微信線上,併在2個小時後(20點)準時 ...
  • 一.官方文檔 https://pypi.org/project/muggle-ocr/ 二模塊安裝 pip install muggle-ocr # 因模塊過新,阿裡/清華等第三方源可能尚未更新鏡像,因此手動指定使用境外源,為了提高依賴的安裝速度,可預先自行安裝依賴:tensorflow/numpy ...
  • 前言 ​ 關於 Python 這個欄目,咕了幾個月了,今天講講如何發送驗證碼並驗證。 ​ 因為部分原因,寫這篇文章的時候心情是不太好的,播放首歌吧。 代碼 導入 導入yagmail,random和time庫 import yagmail,random,time #導入 yagmail , rando ...