Search
課程特價中
你需要的唯一網頁開發課程 – 學習前端與後端知識，成為網頁全端工程師。內容包含HTML, CSS, JavaScript, React, Node.js, Express, SQL, MongoDB, Mongoose, AND MORE!
https://softnshare.com/html5-css3-z/
รักออกแบบ รักเขียนโค้ด ชอบแต่งหน้าเว็บ ต้องนี่… “Front-End Developer” 🎨 👨💻
.
หนึ่งในอาชีพสายเดฟที่มาแรงไม่แพ้กัน !! แล้วถ้าอยากทำอาชีพนี้จะต้องมีสกิลอะไรบ้าง ? ซึ่งวันนี้แอดได้รวบรวม 10 สกิลสำคัญที่ต้องมีก่อนจะเป็น Front-End Developer มาให้เพื่อน ๆ หรือน้อง ๆ ที่กำลังอยากเริ่มต้นในสายอาชีพนี้ จะมีอะไรบ้าง หากพร้อมแล้วไปดูกันเลยจ้า~~
.
มาเริ่มกันเลย !! 🔥
.
🌟 1) HTML & CSS
ทักษะพื้นฐานที่สำคัญมาก ๆ สำหรับ Front-End Dev เพราะเป็นโครงสร้างของหน้าเว็บ เปรียบเสมือนกระดูกสันหลัง ไม่ว่าจะเป็นการกำหนดรูปแบบอักษร โครงสร้าง การจัดเลย์เอาท์ และอื่น ๆ ซึ่งเราควรเรียนรู้โครงสร้าง วิธีการเขียน และ กฎที่จำเป็นของ HTML และ CSS ก่อนที่จะไปเรียนรู้ส่วนอื่น ๆ ต่อไป ทั้งสองสามารถเรียนรู้ได้ง่าย แต่อาจจะต้องใช้เวลาเพื่อให้มีความเชี่ยวชาญนั่นเอง
.
.
🌟 2) Javascript
ในเมื่อมี HTML และ CSS ที่เป็นเหมือนกระดูกสันหลังของเว็บแล้วนั้น การจะทำให้เว็บมีลูกเล่น มีชีวิตชีวา มีการประมวลผลข้อมูล สิ่งสำคัญที่ต้องมีนั่นคือ JavaScript เพราะมันเป็นเหมือนมันสมองของเว็บไซต์ เพื่อให้เว็บสามารถทำฟังก์ชันต่าง ๆ เพื่อให้เว็บมีการโต้ตอบกับผู้ใช้อย่างมีประสิทธิภาพ และในปัจจุบันก็มี Framework สำหรับ JavaScript มากมาย เช่น React.js, Angular.js, Vue.js และอีกมากมาย ที่ช่วยให้เราสร้างหน้าเว็บได้ง่ายมากยิ่งขึ้น
.
.
🌟 3) ECMA ES6
เป็นมาตรฐานหรือข้อกำหนดในภาษา Scripting ซึ่ง JavaScript ก็จัดเป็นอีกหนึ่งในภาษา Scripting นั่นเอง ซึ่งมีการพัฒนาเปลี่ยนฟีเจอร์ และ Syntax ใหม่ ๆ เพื่อรองรับการเขียนแอปที่มีความซับซ้อนมากขึ้น ซึ่งในปัจจุบันพัฒนามาจนถึง ES6 แล้ว ซึ่ง Front-End Dev จะต้องเรียนรู้โครงสร้างและวิธีการเขียน JavaScript แบบมาตรฐาน ES6 เพราะเป็นสิ่งสำคัญที่ช่วยให้การพัฒนาเว็บมีมาตรฐานมากยิ่งขึ้นนั่นเอง
.
.
🌟 4) DOM / Virtual DOM
DOM (Document Object Model) เป็นวิธีการเก็บ Document ในรูปแบบ Object แบบ Tree Structure และจะใช้ JavaScript เพื่อไปเข้าถึงหรือจัดการ HTML ในแต่ละส่วน แต่เมื่อมีโครงสร้างใหญ่ขึ้นทำให้อาจจะจัดการได้ยาก ส่วน Virtual DOM ก็ถูกพัฒนาขึ้นมาเพื่อเป็นตัวแทนของ DOM จัดการสิ่งต่าง ๆ ได้อย่างรวดเร็ว และไม่ส่งผลกระทบกับ Real DOM นั่นเอง ซึ่ง Front-End Dev จะต้องมีความรู้เกี่ยวกับ DOM / Virtual DOM เพื่อเข้าใจส่วนประกอบ โครงสร้าง องค์ประกอบ และวิธีการแสดงผลของหน้าเว็บอย่างละเอียด เพื่อเพิ่มประสิทธิภาพในการพัฒนาหน้าเว็บนั่นเอง
.
.
🌟 5) Browser Developer Tools
เป็นเครื่องมือต่าง ๆ ที่อยู่บนเบราว์เซอร์ที่จะช่วยให้นักพัฒนาสามารถใช้ประโยชน์เพื่อสร้างและปรับปรุงหน้าเว็บให้มีประสิทธิภาพ นักพัฒนาจะต้องเรียนรู้วิธีการใช้งานเครื่องมือต่าง ๆ เพื่อช่วยให้การทำงานรวดเร็วและง่ายมากขึ้น อย่างเช่น Chrome DevTools จาก Google ที่มีเครื่องมือต่าง ๆ ช่วยในการทดสอบ แสดงผลหน้าเว็บ ดูผลลัพธ์ของ CSS และสามารถแก้ไขเบื้องต้นได้ ซึ่งมันสามารถใช้เป็นแนวทางในการพัฒนาเว็บได้นั่นเอง
.
.
🌟 6) Frameworks และ Libraries
ในปัจจุบันก็มีเครื่องมือต่าง ๆ มากมายที่ช่วยให้การพัฒนาเว็บง่าย สะดวก และประหยัดเวลามากขึ้น และเว็บไซต์ส่วนใหญ่ก็ได้ใช้ Frameworks และ Libraries เพื่อพัฒนาเว็บมีประสิทธิภาพสูงสุด อย่างเช่น React, Angular, Vue ที่เป็น Framework ยอดนิยมมากที่สุดในปัจจุบัน ทั้งสามต่างก็มีข้อดีและข้อจำกัดกันคนละแบบ ขึ้นอยู่กับว่าเรานำไปใช้กับงานแบบใด เลือกอันที่เหมาะกับตัวเอง แล้วไปเริ่มเรียนรู้กันเลย !!
.
.
🌟 7) Version Control
ไม่ว่าจะเป็นเดฟในตำแหน่งใด ก็จะต้องทำงานกับเพื่อนร่วมทีมอย่างแน่นอน การจะทำงานเป็นทีมได้ง่ายและสะดวกมากขึ้น เราก็ต้องรู้จักกับ Version Control เมื่อตอนเราเดฟก็จะต้องมีไฟล์ Source Code ต่าง ๆ มากมายทั้งของเราและเพื่อนร่วมทีม ซึ่งเจ้า Version Control ก็จะเข้ามาช่วยเราในการจัดการ ควบคุม จัดเก็บ Source Code ต่าง ๆ ไว้บน Server ซึ่งในปัจจุบันมีให้เลือกใช้ได้อย่างหลากหลายมาก ไม่ว่าจะเป็น Git, GitHub, GitLab และอื่น ๆ อีกมากมาย
.
.
🌟 8) Test และ Debug
เมื่อเราเดฟแล้วสิ่งสำคัญที่ขาดไม่ได้คือการทดสอบ ซึ่งในที่นี้เราไม่ต้องรู้ Process การทดสอบแบบละเอียดก็ได้ เพราะในบางบริษัทก็จะมีตำแหน่ง Tester แยกอยู่แล้ว ในการทดสอบฝั่งเดฟจะเป็นแบบ Unit Test เพื่อทดสอบว่าแต่ละฟังก์ชันว่าทำงานได้ตามเป้าหมายหรือไม่ เราอาจจะทำการทดสอบเอง หรืออาจจะใช้เครื่องมือเพื่อช่วยให้การทดสอบง่ายขึ้นได้เช่นกัน
.
.
🌟 9) SEO
หัวใจสำคัญสำหรับการทำเว็บ หรือการให้หน้าเว็บติดอันดับ SEO ซึ่งเราจะต้องเรียนรู้สถาปัตยกรรมเว็บไซต์ เพื่อปรับปรุงหน้าเว็บให้ติดอันดับ SEO อยู่เสมอ ไม่ว่าจะเป็นในเรื่องของข้อมูล ความปลอดภัย ประสิทธิภาพ การเข้าถึง และอื่น ๆ อีกมากมาย Front-End Dev ห้ามมองข้ามเด็ดขาด !!
.
.
🌟 10) Performance Analysis
สิ่งสำคัญในการทำเว็บอีกหนึ่งอย่างนั่นคือประสิทธิภาพ ! จะมีหน้าเว็บสวย อลัง ขนาดไหน แต่ถ้ามันทำงานได้ช้า กว่าจะกดปุ่มอะไรแต่ละทีต้องนั่งรอ มันไม่ทันใจวัยรุ่นเอาซะเลย ถ้าเราเป็นผู้ใช้เว็บลองคิดดูว่ามันน่าหัวเสียขนาดไหน เราต้องทำความเข้าใจการควบคุมประสิทธิภาพและการประมวลผลของหน้าเว็บ ฟังก์ชันไหนที่ไม่จำเป็นก็ให้กำจัดออกไป ใส่มาก็ไม่ได้ใช้งาน หรือบางอันก็ลืมลบทำให้เว็บช้าลงไปอีก ซึ่งในปัจจุบันก็มีเครื่องมือต่าง ๆ ที่ช่วยจัดการประสิทธิภาพบนหน้าเว็บให้เลือกใช้อย่างหลากหลาย เลือกสักหนึ่งเครื่องมือ แล้วไปเรียนรู้วิธีการใช้งานเพื่อมาช่วยเพิ่มประสิทธิภาพให้กับเว็บ
.
และทั้งหมดนี้ก็เป็น Hard Skills ที่คนอยากเป็น Front-End Developer ต้องมี และยังต้องมี Soft Skills อื่น ๆ ไม่ว่าจะเป็นทักษะการสื่อสาร การทำงานเป็นทีม การวางแผนงาน เพื่อช่วยให้การทำงานนั้นมีประสิทธิภาพ ซึ่งสกิลเหล่านี้ไม่ว่าจะทำอาชีพไหนก็ต้องมี 😊
.
และพี่ ๆ คนไหนที่กำลังทำอาชีพนี้ แล้วอยากแนะนำหรือบอกอะไรเพิ่มเติม สามารถมาคอมเมนต์พูดคุยกันได้เลยน้า 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#frontend #frontenddeveloper #BorntoDev
Angular (以前稱Angular 2) 允許你使用 TypeScript / JavaScript 的能力開發很棒的 Web 應用程式。是否使用 Angular 知識來建構 Web 應用程式也可以編譯成在任何 iOS 或 Android 設備上運行的原生手機應用程式？
Ionic 框架允許你這樣做！使用你現有的 Angular 、HTML、JS和 CSS 知識，並建構你的原生手機應用程式！
https://softnshare.com/ionic-2-the-practical-guide-to-building-ios-android-apps/
現在學習知識的渠道越來越多，無論對於零基礎或是有經驗的工程師，想要持續成長應該看書還是看影片來的更有效率呢？
主要會和你分享我過去從新手到資深的過程中，如何持續保持進步及學習的經驗
也許這個經驗可以幫助到你，也歡迎留言和我分享你的看法
相信彼此分享不同的學習見解，能讓對於想要更精進自己程式開發功力的人有很大的幫助
===章節===
00:00 哪一個有效律?
00:36 寫程式如同寫作
05:14 書是最便宜的資源
10:14 折扣碼操作示範
===蝦皮購書折扣碼===
折扣碼：FLAGNIC36
時間：2021-03-29 ~ 2021-06-29
折扣碼：FLAGNIC79
時間：2021-06-30 ~ 2021-09-30
折扣碼： FLAGNIC11
時間：2021-10-01~ 2021-12-31
===前陣子在看的推薦書單===
（零基礎）
- 白話演算法！培養程式設計的邏輯思考
- Python 刷提鍛鍊班
（中高階）
- 設計模式之禪(第2版)
- 無瑕的程式碼－整潔的軟體設計與架構篇
- 單元測試的藝術
- 演算法之美：隱藏在資料結構背後的原理(C++版)
- Kent Beck的實作模式
（Ruby）
- Writing Efficient Ruby Code
（成長思考）
- 圖解．實戰 麥肯錫式的思考框架：讓大腦置入邏輯，就能讓90%的困難都有解！
- 師父：那些我在課堂外學會的本事
- 高勝算決策：如何在面對決定時，降低失誤，每次出手成功率都比對手高?
- 窮查理的普通常識
- 懶人圖解簡報術：把複雜知識變成一看就秒懂的圖解懶人包
- 寫作，是最好的自我投資
喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#寫程式 #前端 #後端
## 影片觀看說明
由於問題較多，大家的問題也可能是你的問題，建議可以先閱讀下方的「問題總匯」區，找到時間碼 Time code 之後跳轉到自己想聽的部分，會比較有效率哦
本影片 Q&A 留言是抓取
【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一次蒐集 Q&A)】https://youtu.be/BGaDN9wxbKE
## 影片中提到的專案
簡單用 React 撰寫的留言爬取篩選功能，可以自己抓去玩
https://github.com/niclin/youtube-comment-filter
## 問題總匯
00:00 開場
01:26 QA-1 - 林天寸
一直很喜歡妳的頻道，不單單是因為工程師，當然也有部分原因是自己也是走工程師這條路的。
前一年2020年開始，其實是我剛轉職工程師的第一年，在滿多地方都遇到不小的問題，在troubleshooting上面也是有許多瓶頸的。
後來除了白天上班，下班看書跟休息，偶然間看到你的影片[工程師如何自我進修]，才開始慢慢用計畫的方式取代橫衝猛幹。
不得不說，規劃時間真的是比起技術性的功力還更有成效。因為它讓你適時的放鬆跟加強，然後在工作上面才更有長進，雖然很幹話，但我2020的下半年是這樣做的。
目前在準備考取網路管理的證照CCNA，計畫是走network這一塊，還有很多要磨練的。希望也能多看你產出跟network的影片，這是私心話啦，哈哈。
02:57 QA-2 - 仔仔
1.學程式會建議從前端或是後端哪個開始學會比較好?
2.一開始投履歷如何判斷一家公司是可以成長的，而不是進去3，5年後還是那個跟剛進去程度相差不遠的自己差不多
3.跟程式相關的產業有很多(像是製造業到博弈)，可以請Nic分析一下各產業的狀況嗎?以及進去各產業前須要具備哪些程式語言或能力?
4.投履歷時看到一些公司列出所需程式語言和工具一大堆，是不是代表你沒完全具備就不要投履歷了，還是可以請Nic給個意見哪些部分還是可以投看看
5.都說工程師又宅又不會說話，為什麼Nic可以交到女朋友?
10:40 QA-3 - ANDREW NG KAR EARN
如果当写编程语言遇到瓶颈，有什么方法可以有效地避免自己陷入钻牛角尖的情况？
11:46 QA-4 - JS Lin
如果NIC現在選擇能馬上精通一項語言會是哪個？會想用來做什麼PJ？
13:13 QA-5 - Rick0
成為 team leader 後無法直接在技術上有更深入的研究和突破，這樣的變化是否值得?
是否會擔心這樣在技術上跟不上其他人，甚至被下屬看輕呢?
14:39 QA-6 - Henry蔡
因為最近是寒假期間，
我開始考慮下學期的修課，
想請教nic大大，
應該在有什麼樣的基礎上，
開始學design patterns？
我目前是碩士生，
大學非資工本科，
學過Python，
也跟過一些網路影片實作過Flask+PostgreSQL，
大學學過資料結構演算法，
但不到得心應手的程度...
16:07 QA-7 - 黃柏瑋
如何同時Handle好好幾件事
我怎麼覺得上班，然後下班假日寫寫side project後就沒啥時間了🤔🤔🤔
17:24 QA-8 - 乾太
我想問一下這年頭轉行斜槓 VTuber 還有沒有搞頭A？
18:10 QA-9 - uuu06222
之前開始關注你有知道你有面試過人的經驗, 想問一下站在面試官的角度...
面試官會不會比較注重作品需要呈現那些東西, 或是有沒有什麼禁忌是不能碰的嗎?
20:07 QA-10 - Joery Lin
想請教您對於對於給你很多成長和照顧的公司，倘若您有一個更好的機會，無論薪水或未知挑戰都大於現在公司。
您將如何做選擇，或許現在公司會給你加薪留下你。
因為自己曾放棄了許多機會
21:37 QA-11 - YangTing Zheng
Q1: 想問通常一個產品開發的週期都多長呢？負責維運和開發的工作內容是否會差很多？
Q2: 想請您簡單介紹一下資工系學生的出路/工作內容？(如PM.SA.DBA.PG.RD.MIS…或是還有其他的？）
24:16 QA-12 - RTB
Hello World
24:18 QA-13 - Barry
目前是公司MIS 很想轉職成後端工程師，但在面試上面都都時常失敗
常常在問技術關卡時就被問倒了，總覺得 要準備的東西非常的龐大
毫無準備的頭緒，總覺得一直寫side project也不是辦法
26:49 QA-14 - 因地制夷
想請教Nic 有在做投資嗎? ex 股票 想聽一些投資心得
27:13 QA-15 - 比歐
想請教 Nic 大，
在之後的工程師生涯中之後有甚麼規劃或想法嗎?
例如:開發產品創業，或是開班授課、轉做顧問之類的。
28:14 QA-16 - yongming jia
请问新手如何学编程，学完去做什么？怎么自己创业？谢谢🙏
29:33 QA-17 - Minghao Chang
是否能請您推薦用來開發的筆電？（正好最近要汰換電腦），想從今年開始養成寫side project的習慣，謝謝。
30:31 QA-18 - Guan Jun Chen
想知道像Nic這麼厲害的工程師，年薪大概落在哪裡
30:46 QA-19 - Sheng Jiang
想請問Nic，如果非資工背景但是對寫程式有熱情，想轉職當軟體工程師，會建議如何起步?
補充：像是什麼樣的人適合自學，什麼樣的人適合去補習，或者補習跟自學的情況各有哪些優劣?
謝謝Nic
## 結尾
31:49 感想
喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#QA #工程師 #在地上滾的工程師 #前端 #後端 #轉職
這次想和你聊聊，關於技術深度和廣度的想法，因應每個人的際遇與選擇不同，最終也會長出截然不同的技能樹，但最重要的是，如何一步一步檢視自己的當前是否在自己所設立的目標方向上
希望透過這支影片和你分享我的看法，也歡迎留言和我分享你的近況和想法囉
喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘
━━━━━━━━━━━━━━━━
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
🌟 任何問題或合作邀約信箱: niclin0226@gmail.com
#前端 #後端 #工程師 #software #engineer
Easy theming and composition for CSS Modules. Contribute to javivelasco/react-css-themr development by creating an account on GitHub. ... <看更多>
react css 在 [React學習筆記] 兩種套用CSS方法 - 1010Code 的推薦與評價
React 有兩種方法將CSS 套用，一種是外部新增一個CSS 檔再引入，另一個作法是在標籤內撰寫inline sttyle，下列範例我將子元件 Person.js 使用外部CSS ... ... <看更多>