วิธีเรียนรู้ CSS
เคยสงสัยไหมว่า favorite websites ของคุณ design มาอย่างไร? ด้านหลังทุก website design มี blueprint สำหรับ design และ CSS code ที่นำ blueprint สู่ความเป็นจริง
Cascading Style Sheets (CSS) เป็น programming language ที่ developers ใช้ define aesthetics สำหรับ website HTML language ให้ตั้งโครงสร้าง site CSS ให้กำหนดลักษณะการปรากฏของ features บน site
HTML และ CSS ทำงานร่วมกัน ตอนเห็น title ใช้ font ใหม่บน website HTML define title CSS ตั้ง font ให้ title พิจารณา paragraph text HTML define text CSS styles เปลี่ยนสี text
คู่มือนี้เดินทางผ่าน best way to learn CSS online ให้ clear steps เริ่ม journey เรียน CSS อย่างรวดเร็วและมีประสิทธิภาพ
CSS ใช้ทำอะไร?
CSS define ว่า element บน web page ควรปรากฏอย่างไร CSS = Cascading Style Sheets Styles ใช้ได้กับ HTML document หรือ separate stylesheet
ด้วย CSS developers เขียน style rules บอก website ว่า HTML element เฉพาะควรปรากฏอย่างไร เช่น rule หนึ่ง define height และ width สำหรับ image อีก rule ตั้ง text size
CSS language เสนอ properties จำนวนมาก ใช้ apply styles กับ elements ต่างๆ บน web page properties เกี่ยวกับขนาด element, สี, borders, ตำแหน่งบน web page และอื่นๆ ตัวอย่าง rules ที่อาจพบ:
- font-size ตั้งขนาด text บน web page
- color ตั้งสี text บน web page
- height ตั้งความสูงของ element บน web page
แต่ละ CSS property มี value บอก browser ว่า element ควรปรากฏอย่างไร เช่น CSS บอก browser ทำให้ text ทั้งหมดเป็นสีน้ำเงิน
ตอนเรียนรู้พื้นฐาน CSS properties แล้ว สามารถใช้ fundamentals สร้าง intricate และ complex designs ได้
ทำไมควรเรียน CSS?
อย่างหนึ่ง: เรียน coding ใน CSS ให้ความสามารถสร้าง website designs ของตัวเอง รู้ CSS สร้าง portfolio ได้โดยไม่พึ่ง stock templates สร้างสิ่งที่ unique ตัวเอง
ยังไม่ได้พูด career benefits ของการเรียน CSS ไม่มี employer ขาดคนที่ code CSS ได้
เพราะ CSS developers ต้องการสูง salaries สูง Glassdoor รายงาน average salary สำหรับ web designer = $52,691 (ขณะเขียน)
เรียน CSS ใช้เวลานานแค่ไหน?
ก่อนเรียน CSS แนะนำใช้เวลาสัปดาห์ๆ practice HTML ไม่ค่อยนาน master ได้ และมี solid footing ใน programming world HTML ช่วย feel basic syntax ที่ handy เวลาเรียน CSS
เข้าใจ HTML และสร้าง static websites ได้แล้ว พร้อมเริ่มเรียน CSS คล้ายภาษาด้านบน เรียน functional basics CSS ใช้เวลา < 1 เดือน แต่ CSS ใช้เวลานานกว่า master แนะนำ practice 2-4 ชั่วโมง/วัน
ยากไหมที่จะเรียน CSS?
CSS เป็น programming language เรียนง่ายระดับ basic CSS technology ถูก design ให้ accessible ให้ทุกคนสร้าง styled web pages บน internet
Syntax มากใน CSS จะ familiar มากตอนเรียน basic concepts ของ HTML
เช่น เปลี่ยน attributes เหมือน height และ width สำหรับ specific image ใน HTML file แต่ถ้าต้องการ apply ทุก pictures บน page? นี่คือที่มาของ CSS
จำไว้: CSS interact กับ HTML elements เหมือน attributes ภายใน element tags ใน HTML file แต่สามารถ touch multiple elements พร้อมกันผ่าน blocks of code ใน CSS เรียกว่า rules ถ้า comfortable styling fonts, colors, images ใน HTML จะไม่มีปัญหากับ CSS จะง่ายขึ้นอีกตอนเข้าใจแล้ว
เรียน CSS ฟรีอย่างไร?
จนตอนนี้พูดถึง background ของ CSS และ benefits ของการรู้ code CSS แต่ต้องตอบคำถาม: เรียน code CSS ยังไง?
มี resources ออนไลน์พันๆ ช่วยสอน code CSS อาจ tricky หาจุดเริ่มต้น มา walk through main steps เริ่ม journey เรียน CSS รวดเร็ว
Step 1: Master the Basics
เพื่อเรียน CSS ต้องเริ่ม master basics แรก แม้ tempted ที่จะ research elaborate website designs โดยไม่มี grasp fundamentals จะ struggle เข้าใจ advanced concepts ตอนมาถึงในโค้ด
ขั้นตอนแรก: invest time research และ practice basics จะเกี่ยวกับ syntax (general rules เขียน CSS code), selectors, box model, และมากกว่านั้น
ช่วยให้เริ่มต้น รายการ main topics ที่ต้องรู้:
CSS Syntax และ Selectors
First thing: รู้ syntax สำหรับ CSS general rules ที่ govern ทุก styles เขียน CSS language ตอนเริ่มต้น ต้องรู้ where และ how to write CSS rules
ต่อมา explore CSS classes และ selectors Selectors ใช้ direct code ว่า elements ไหนบน web page ควร styled ด้วย rules ที่เขียน Topics ที่ควร cover:
- How to write a CSS style rule
- Inline, external, และ internal CSS
- Tags, classes, และ IDs
- The basics of selectors
- Chaining selectors และ nested elements
- Using multiple selectors
- CSS specificity
The Box Model
เหมือนที่กล่าว HTML define structure ของ web page แต่ HTML ใช้ default values สร้าง structure หากต้องการ customize elements ต้องใช้ CSS box model
Box model = set of properties define ส่วนไหนของ element ใช้พื้นที่บน web page Box model define borders, outlines, spaces ภายในและภายนอก element
Main components ของ box model ที่ต้องเรียน:
Element Display
HTML render elements จากซ้ายไปขวา และบนลงล่าง แต่อาจต้องการ elements positioned อย่างเฉพาะเจาะจง เช่น box ปรากฏ bottom left-hand corner ของ web page
นี่คือที่มาของ element display Principles ของ element display สั่ง browser ให้รู้ว่า display element เฉพาะบน web page ที่ไหน Topics ที่ควรเรียน:
Colors และ Fonts
Colors และ fonts เป็น 2 วิธีทำ website aesthetically pleasing ถือว่า essentials ในหลาย website style guides
CSS เสนอ properties จำนวนมากควบคุมสีของ elements บน web page และการปรากฏของ text Topics ที่ควรเรียน:
- Background และ foreground color
- Hexadecimal, RGB, และ HSL colors
- CSS opacity
- CSS typography
- Font families, font styles, และ font weights
- Letter spacing, line height, และ text alignment
- Using external fonts
Grids
Grids ให้ developers position elements ง่ายและมีประสิทธิภาพบน web page Grid CSS layout ใช้ columns และ rows ให้ developers design web page โดยไม่ใช้ floats และ positioning
Main topics สำหรับ master CSS grids:
- CSS grid structure
- Grid columns และ rows
- Creating columns และ rows
- Grid gaps และ grid lines
- Grid items และ area
อาจอยากเรียน flexbox ด้วย flexbox = technology อื่น position elements บน web page
Best Way to Learn CSS Online
ตอนรู้ว่าต้องเรียนอะไรบ้าง อาจถาม: เรียน topics นี้ที่ไหนได้? CSS เป็น tool สำคัญใน web development มี resources พันๆ ให้ใช้
Resources ที่จะใช้ขึ้นอยู่กับ learning style ก่อนหา resources ถามตัวเอง: เรียนดีที่สุดยังไง? ชอบ tutorials? หรือ online courses?
อาจลองหลาย formats ดู what works best แล้ว focus ที่ resources ที่ใช้ learning format ที่ comfortable
สำหรับ beginners ส่วนใหญ่ interactive tutorials และ courses ดีที่สุด เพราะให้ build something while learning สำคัญใน CSS เพราะ language เกี่ยวกับ visuals และ styles
Online CSS Courses
Learn CSS by Codecademy
- Cost: Free
- Audience: Beginners
490,000+ คน enrolled เรียน CSS ใน 20-hour course เรียน selectors, box model, colors, typography, และมากกว่านั้น
Intro to HTML/CSS by Khan Academy
- Cost: Free
- Audience: Beginners
Free course นี้เป็น excellent introduction to HTML และ CSS เริ่มจาก structure ของ web page แล้ว cover topics เช่น using CSS to style a page และ CSS text properties ตอนท้าย discuss page layout และ advanced CSS selectors
Intro to HTML and CSS by Udacity
Self-paced course เหมาะสำหรับใครอยากเรียน basics ของ HTML และ CSS cover topics: structure of HTML document, CSS syntax, selectors, และ how to use browser developer tools
Online CSS Books
HTML and CSS: Design and Build Websites by Jon Duckett
Complete introduction สร้าง websites ด้วย HTML และ CSS เรียน basics ของ technologies และการทำงานร่วมกัน Book มาพร้อม vast array of examples และ graphics ช่วย visualize topics
Learning Web Design by Jennifer Niederst Robbins
Start at square one Good read สำหรับใครใหม่ใน web development เริ่มสร้าง basic HTML pages แล้ว discuss how to use CSS สำหรับ colors, text formatting, layout ตอนท้าย cover relevant web development topics เช่น JavaScript คืออะไร และใช้ใน sites ยังไง
CSS: The Definitive Guide by Eric Meyer และ Estelle Weyl
Book นี้คือสิ่งที่บอกบน cover: full guide to CSS ต่างจากหลายๆ เล่ม focus solely on CSS เรียน CSS colors, values, selectors, box layout, และมากกว่านั้น
Online CSS Resources
Learn to Style HTML Using CSS by Mozilla
Mozilla (creators of Mozilla Web Browser) มี complete tutorial เพิ่ม CSS ไปยัง webpages Tutorial ครอบคลุม basic CSS syntax, building blocks of CSS, how to style text, และ page layout
CodePen
CodePen = online learning playground สำหรับ web development Tool ทำให้ experiment creative web designs ง่าย หา thousands of styles เขียนโดย beginner และ expert developers ให้ view เป็น inspiration
Career Karma CSS Tutorials
Career Karma มี dozens of online tutorials on CSS แต่ละ tutorial มาพร้อม code snippets ช่วย master topic พร้อม explanations ของ code snippets Library ครอบคลุมจาก selectors ถึง inline styles
Free web development courses นี้เรียนรู้ skills สำหรับเริ่มทำงานกับ HTML และ CSS แต่อย่าจำกัดตัวเองกับ list นี้ เรียน HTML และ CSS และ front-end web development จากหลายที่อื่นได้ พบ thousands of resources ออนไลน์
เรียน CSS ออนไลน์ด้วย Tutorials
มี publications หลายที่ให้ CSS tutorials ดี W3Schools และ Mozilla Developer Network useful เวลาเรียน concepts ของ programming languages Resources ให้ standard tutorials ออนไลน์พร้อม exercises ของแต่ละ concept
Resources ก่อนหน้า fit ตอนต้องการ study concepts และเข้าใจว่าจำเป็นสำหรับ coding ทำไม ตอนได้ understanding แล้ว time to put mind to work ดูว่าเรียนรู้เท่าไหร่ Resources มากมายช่วยตอน on-the-go เช่น Grasshopper, SoloLearn, Codecademy มี great applications download และใช้ขณะเรียนต่อ
เพิ่มเติม websites เช่น freeCodeCamp, The Odin Project, และ Khan Academy ให้ full free courses focus สอน CSS พร้อม projects ช่วย learn while studying concepts
Follow tutorials = great way เรียน HTML เรียน development โดย doing HTML แทน just reading about it Hands-on learning crucial ใน front-end web development เพราะ degree of creativity
สร้าง Project
Projects = great way ใช้ theory ที่เรียนรู้ into practice ทำงานบนสิ่งที่ fully interested นั่นถูกต้อง ตอนเลือก project จะไม่ต้อง build สิ่งที่ tutorial บอกอีกต่อไป
ทำงาน project ของตัวเองให้ creative liberty ด้วย CSS เป็น highly visual language project ใดๆ ปรับแต่งเป็นของตัวเองได้ง่าย เลือก fonts, font colors, customize site ได้เท่าที่ต้องการ
What should I build? คำถามทั่วไปของ beginners จริงๆ ไม่มีคำตอบที่ถูก – build อะไรก็ได้!
ตอนเริ่มต้น แนะนำ start small แล้ว work up สู่ elaborate designs ทำให้ project ที่เลือกน่าสนใจ หาก project น่าสนใจและติด จะหา motivation ให้เสร็จงานได้ง่าย
ช่วยตัดสินใจ build อะไร ไอเดีย:
- Social networking site
- Restaurant management system
- Quiz game
- Online shopping website
- Web design portfolio
- Web blog
- Website สำหรับร้านเบเกอรี่หรือผักท้องถิ่น
อย่าให้ list นี้จำกัด options ถ้ามี idea อื่น ไป build เลย!
ทดลอง New Styles
มี features มากมายใน CSS ให้ explore! ผลคือแม้ design website แล้ว ยังมี ways มาก refine skills
Good way practice skills: build same site ด้วย different styles ลองดู website ดูยังไงกับ font sizes ต่างๆ ทดลอง colors ต่างๆ สำหรับ paragraphs บางส่วน ดูเกิดอะไรขึ้นตอนเปลี่ยนขนาด image
การเปลี่ยนแปลงเหล่านี้ refine sense of good design พร้อมกัน experiment new CSS concepts และ properties
Beauty ของ CSS อยู่ที่ creativity Social networking site หนึ่งจะไม่เหมือนอีกหนึ่ง เพราะมี ways มากเกินไป customize site การที่ site ปรากฏยังไง up to you – you're the creative director ตอน code CSS!
Master Browser Support
Browsers ไม่ได้เห็น style sheet เหมือนกันเสมอไป น่าเสียดาย เพราะ browsers เปลี่ยนแปลงมากตลอดปีบางตัว unable to keep up with changes Old versions of Internet Explorer อาจไม่เห็น site เหมือน latest Chrome
ควรเริ่ม research ว่าสร้าง sites ที่ work across multiple browsers ยังไง All best websites functional ไม่ว่าจะใช้ browser ไหน (within reason) เป็น great skill รู้เขียน CSS code ที่ปรากฏดีใน browsers หลายตัว
Master browser support ดู resources:
Join a Developer Community
ตอนเรียน code อาจ tempted "code in isolation" หมายถึงใช้เวลา code แต่ไม่ share work กับคนอื่น Common mistake ของ newbies
มีร้อยพันคนรู้ code CSS Web programmers มัก join developer communities รวม programmers จาก beginners ถึง experts
Communities = great place พบ new developers chat ให้ place ขอ feedback และ help ตอนต้องการ Communities ดีสำหรับ CSS developers:
- Dev.to: Community software developers ช่วยกัน มี dedicated channels สำหรับ CSS developers และ web design chat กับคนอื่นเรียน CSS
- Stack Overflow: Community developers ถามและตอบคำถาม
- GitHub: Community share code และ collaborate projects กับคนอื่น
มีหลาย ways contribute ให้ communities ช่วย existing user ด้วยคำถาม หรือ post คำถามเองเริ่ม discussion หรือแค่ comment บน thread ที่น่าสนใจ อะไรที่ทำจะสร้าง better sense of community!
Practice Your Skills
เหมือน programming language ใดๆ เรียน code CSS = skill Best way improve = practice มากที่สุด เวลาที่ใช้คิด CSS มากเท่าไหร่ insights จะมากเท่านั้น
มี ways เยอะมาก practice CSS ไม่มี excuse ไม่ทำ ไอเดียช่วยเริ่มต้น:
- Use Codepen หา style ที่ชอบ ลองทำให้ดีขึ้น
- Take challenge on Codecademy Follow tutorial บน site เช่น Codecademy แล้วทำ improvements เอง
- Help people in community หา thread บน Dev.to หรือ Stack Overflow ที่น่าสนใจ ลองช่วย community members
Or ทำ projects มากขึ้น! นั่นก็ great way practice skills
Wrapping Up
Path เรียน CSS ของคุณจะมี ups and downs ใน long run รู้ code CSS เปิดโอกาสหลากหลาย
เรียน CSS ช่วยให้กลายเป็น web designer หรือ web developer ดีหากคิดว่า career move อยู่ใน future
ตอนเริ่มเรียน CSS ควร focus fundamentals: syntax, selectors, box model, positioning, basic topics อื่นๆ พร้อมแล้ว advance ไป advanced styles สร้าง intricate designs
CSS = immensely useful skill แม้ยากตอนเริ่ม จะ master skill เหมือน developers ทุกคนที่รู้ CSS แค่ hard work และ practice
