Essentials of Cascading Style Sheets

Course Description

Sa course na ito, tatalakayin natin ang basics ng CSS at ang relationship nito sa HTML. Pag-uusapan sa course nito ang mga essential features ng CSS na kakailanganin mo sa pagbuo ng isang tipikal na Website. Kasama rito ang typography, colors, transforms, at mga simpleng transitions at animations. Pag-uusapan din ang layout gamit ang CSS, partikular na ang positioning at display types. Matatalakay din ang basics ng Flexbox at Grid layout.

Ang course na ito ay ibinase sa content na makikita sa Web Development course ng MDN Web Docs.

Prerequisites

Para sa lahat ang course na ito. Pero magiging mas madali ito para sa mga taong...

• marunong gumawa ng bagong files at folders
• marunong gumamit ng Web browser, gaya ng Firefox at Google Chrome
• marunong mag-copy, rename, at delete ng computer files

Before you start...

Para maging lalong effective ang course na ito, gawin ang mga sumusunod:

• Siguruhing may naka-install kang Web browser. Kung wala pa, puwede mong i-install ang kahit na alin sa mga ito:
  • Google Chrome
  • Firefox
  Kung balak mong gamitin ang default browser ng computer mo (Microsoft Edge sa Windows 10, Internet Explorer sa Windows 7, Safari sa macOS), siguraduhing updated ito. Note Hindi na nire-recommend na gamitin ang Internet Explorer sa kahit na anong version nito. Kung ito ang balak mong gamitin, pag-isipang mabuti kung puwede kang lumipat sa ibang browser.
• Tingnan kung may magagamit kang text editor. Sa Windows, puwede kang gumamit ng Notepad. Pero para sa mas magandang experience, puwede mong i-install ang kahit alin sa mga ito:
  • Visual Studio Code
  • Sublime Text

Lessons

1. Ang Cascading Style Sheets

   Bakit kailangan ang CSS? At paano ito gagamitin kasama ng HTML?

2. Mga Selector

   Bukod sa HTML tags, puwede tayong gumamit ng patterns, o selectors, para sabihin sa CSS kung sa aling HTML elements lang mag-a-apply ang styling natin.

3. Ang Cascade, Inheritance, at Specificity

   Mga nakakalitong concepts ng CSS, at kung paano sila gumagana.

4. Ang Box Model

   Mga spacing at sizes sa CSS

5. Typography

   Mga fonts at iba pang styling ng text

6. Layout: Inline, Block, at Inline-Block Display

   Mga display types na madalas gamitin sa Web design.

7. Layout: Flexbox

   Ang flexible boxes layout, kung paano ito gamitin, at kung kailan ito dapat gamitin

8. Layout: Grid

   Ang grid layout, kung paano ito gamitin, at kung kailan ito dapat gamitin

9. Layout: Paggamit Grid at Flexbox nang Sabay

   Hindi magkalabang layout techniques ang flexbox at grid. Sa katunayan, mas maganda pa nga kung gagamitin natin sila pareho. Tingnan kung paano.

10. Positioning: Relative, Absolute, Fixed, at Sticky

    Bukod sa display types, puwede rin nating gamitin ang position property ng CSS

11. Pseudo-elements at Pseudo-classes

    Puwede tayong magdagdag ng elements at states gamit lang ang CSS

12. Transitions

    Kapag nagpapalit ng value ang property ng isang element, puwede nating lagyan iyon ng transition.

13. Animations

    Gawing mas interesting ang Web pages mo gamit ang CSS animations.