Webdesign tanfolyam: HTML + CSS alapoktól a felső szintig

2020.03.08.

Ez a 13 leckéből álló 7 órás ingyenes webdesign tanfolyam bemutatja a webdesigner szakma alapját, a HTML + CSS kódolást. Nem igényel különösebb ismereket, egy kis informatikai érzék és minimális angol tudás azonban nem árt hozzá.

Webdesign tanfolyam videó

Webdesign tanfolyam tematika

• HTML tagek: először is végigmegyünk az alapvető HTML tag-eken, külön figyelmet fordítva az űrlapokra.
• Táblázatok: a táblázatok felépítését ebben az anyagban tárgyaljuk.
• CSS, favicon, font, background: elkezdünk ismerkedni a CSS-sel, megtanuljuk az alapvető font és background formázásokat, megtanulunk favicon-t behúzni és a webfontok használatával is megismerkedünk.
• Box model: a webes layout építéshez elengedhetetlen a box model alapos ismerete, melyet ebben a részben tárgyalunk ki, és elkezdjük használni az öröklődést is a CSS-ben.
• Float layout, clearfix: a klasszikus float layout működésével foglalkozunk, illetve kitérünk a clearfix hekkre.
• Position: relative, absolute, fixed, sticky: almenük, dropdown menük, feltapadó menük, mindent a position property-ről.
• Flexbox layout: átlépjük a float layout korlátait és megtanulunk layout-ot építeni a flexbox segítségével.
• CSS grid layout: a webes layout építés legújabb eszköze.
• Bootstrap 4.4.1: a legnépszerűbb HTML + CSS keretrendszer 4.4.1-es verzióját is górcső alá vesszük.
• Media query: a töréspontok ismerete elkerülhetetlen a reszponzív weboldalak készítéséhez. A media query-k használatán felül készítünk egy jó kis mobileszközös navigációt is.
• CSS animation: mozgassuk meg a tartalmat!
• Icon fonts: vektoros ikonok használata a weben.
• Image sprite + table styling: egy régi technikát is megtanulunk amivel csökkenthetjük weboldalunk betöltési sebességét, illetve táblázatot formázunk CSS pseudo szelektorokkal.

Forrásanyagok, weboldalak, programok

• A forráskódokat innen tudod letölteni.
• A tanfolyamhoz tartozó eredeti, angol nyelvű dokumentációkat megtalálod a W3Schools weboldalán.
• A feladatokhoz felhasznált képek a pexels.com oldalról származnak.
• A HTML + CSS kód szerkesztéséhez a Notepad++ programot innen tudod letölteni.
• A HTML forráskód validálást ide kattintva tudod elvégezni, a CSS validálás pedig itt érhető el.
• CSS gradient generátorok: cssgradient.io, colorzilla.com, cssmatic.com
• Flexbox generátorok: the-echoplex.net, flexbox.help, flexbox.buildwithreact.com
• CSS grid layout generátorok: cssgrid-generator.netlify.com, grid.layoutit.com, griddy.io
• Icon font generátorok: fontello.com, icomoon.io