Front-End Web Development

Webes megjelenítési technikák
A tantárgyleírás hatályossága
Hatályosság kezdete:
Hatályosság vége:
Subject name (Hungarian, English)
Webes megjelenítési technikák
Front-End Web Development
Subject code BMEGEMIBVP2
Subject type
Course types and hours (weekly/semester)
Course type lecture tutorial laboratory
hours (weekly) 0 2 0
type (linked/independent)
Assessment type félévközi érdemjegy
Credits 3
Subject coordinator
Responsible department
Faculty
Subject website
Teaching language
Primary curriculum type
Direct prerequisites – Strong prerequisite none
Direct prerequisites – Weak prerequisite none
Direct prerequisites – Parallel prerequisite none
Direct prerequisites – Milestone prerequisite none
Direct prerequisites – Exclusion none

Objectives

A tantárgy fő célja, hogy a hallgatók megismerkedjenek a kliensoldali webfejlesztés alapvető eszközeivel (pl. Git, Bootstrap, Developer Tools, VSCode stb), módszereivel (pl. drótváz és prototípus készítés, weboldal elemzés stb) és technológiáival (pl. HTML és CSS leíró nyelvek, JavaScript programozási nyelv stb), továbbá képesek legyenek színvonalas weboldalak saját kezű elkészítésére, elemzésére és verziókövetésére.

Learning outcomes

Ez a tantárgy a KKK rendeletben meghatározott, következő kompetenciák fejlesztését szolgálja:

Knowledge
Érti a Git (lokális verziókövetés) és a GitHub (távoli verziókövetés) verziókövetés működését. Tisztában van a Markdown (dokumentációs célokra használt nyelv) leíró nyelv használatával. Átlátja a HTML (a weboldalak struktúrájáért felelős nyelv) leíró nyelv működését. Ismeri a CSS (a weboldalak stílusáért felelős nyelv) leíró nyelv működését. Tájékozott a CSS keretrendszerek (pl. Bootstrap) működését illetően . Érti a JavaScript kliens oldali programozási nyelv használatát. Tisztában van a Drótváz készítés módszereivel és eszközeivel. Átlátja a prototípuskészítés folyamatát, módszereit és eszközeit. Ismeri a böngészők fejlesztői eszköztárát és annak lehetőségeit. Tájékozott a kliens-oldali webfejlesztés alapvető technológiáit illetően. általános számítógépkezelési ismeretek 226 228 230
Skills
Alkalmazza a Git (lokális verziókövetés) és a GitHub (távoli verziókövetés) verziókövetést. Elkészíti a Markdown (dokumentációs célokra használt nyelv) leíró nyelv segítségével létrehozható dokumentumokat. Képes a HTML (a weboldalak struktúrájáért felelős nyelv) leíró nyelv használatára. CSS (a weboldalak stílusáért felelős nyelv) leíró nyelv segítségével CSS forráskódokat fejleszt. Felhasználja a CSS keretrendszereket (pl. Bootstrap) a fejleszés során. Alkalmazza a JavaScript kliens oldali programozási nyelvet a fejlesztési munka során. Elkészíti fejlesztési munkát megelőző Drótváz modelleket. Képes a prototípuskészítés folyamatát, módszereit és eszközeit alkalmazni. A böngészők fejlesztői eszköztárának segítségével feltárja a működésből eredő hibákat. Kiválasztja a kliens-oldali webfejlesztés fejlesztéshez illeszkedő technológiáit. egy tetszőleges programozási nyelv használata 234 246 241
Attitudes
Törekszik az ismeretek bővítése során az oktatóval és hallgató társaival való együttműködésre. Folyamatos és elmélyült ismeretszerzéssel bővíti tudását. Nyitott az információtechnológiai és prezentációs eszközök használatára. Törekszik a különféle megjelenítési feladatokhoz szükséges eszközrendszer megismerésére és rutinszerű használatára. Törekszik a pontos és hibamentes feladatmegoldásra. 255 256 258
Autonomy and responsibility
Önállóan végzi a feladatok és problémák végig gondolását és adott források alapján történő megoldását. Nyitottan elfogadja a megalapozott kritikai észrevételeket. Támogatja a rendszerelvű megközelítést a gondolkodásában. Együttműködik az önálló ismeretszerzési feladatokban és saját tempóban bűvíti tudását. Egyes helyzetekben – csapat részeként – együttműködik hallgatótársaival a feladatok megoldásában. 259 261 262

Oktatási módszertan

A félév során számítógépes gyakorlati foglalkozásokon ismerkedünk meg a webfejlesztés kliens-oldali ágával. A félév végén egy általános projektkonzultációs alkalom után a hallgatók bemutatják a félév során létrehozott alkotásaikat, amelyre félévközi jegyet kapnak. A félévben ZH írás nem történik, viszont a gyakorlatokon csak azok vehetnek részt, akik a gyakorlatot megelőző tananyagokkal tisztában vannak. Ennek oka, hogy legyen lehetőségünk a teljes tananyag bejárására, és ne folyamatos ismétlésekkel raboljuk a közös fejlődésre szánt időkeretet.

Tanulástámogató anyagok

Tankönyvek
Ben Frain: Responsive Web Design with HTML5 and CSS (2020) ISBN: 1839211563; David Flanagan : JavaScript – The Definitive Guide (2020) ISBN: 9781491952023
Jegyzetek
Eloquent JavaScript 3rd edition (2018) (https://eloquentjavascript.net/)
Online források
https://www.w3schools.com/; https://docs.github.com/en/get-started/quickstart/hello-world; https://www.markdownguide.org/; https://getbootstrap.com/; https://developer.chrome.com/docs/devtools/

Recommended preliminary knowledge for completing the subject

Knowledge type competencies
(azon előzetes ismeretek összessége, amelyek megléte nem kötelező, de a tantárgy eredményes teljesítését nagyban elősegíti)
nincs
Skill type competencies
(azon előzetes képességek és készségek összessége, amelyek megléte nem kötelező, de a tantárgy eredményes teljesítését nagyban elősegíti)
nincs
General rules
A teljesítményértékelés során a hallgatóknak a félév alatt elsajátított technikák segítségével létre kell hozniuk önállóan egy weboldalt, amely a saját portfóliómunkáik bemutatására szolgál. Számos követelményt támasztunk a létrehozandó weboldalakkal kapcsolatban, amelyek mindegyikének meg kell felelni. Ezek között a weboldal tervezésével, verziókövetésével és dokumentálásával kapcsolatos tételek is szerepelnek. A projektmunkát a félév végén kell bemutatni (a bemutató megelőző héten egy opcionális konzultációs alkalomra kerül sor).
Assessment methods
In-term assessments
1. —
A teljesítményértékelés során a hallgatóknak a félév alatt elsajátított technikák segítségével létre kell hozniuk önállóan egy weboldalt, amely a saját portfóliómunkáik bemutatására szolgál.rnA weboldallal szemben támasztott követelmények a következők (ezeket a félév során részletesen megbeszéljük): HTML validátoron hibamentesség. HTML szemantikus szabályok betartása. CSS validátoron hibamentesség, CSS szabályok megfelelő, komplex alkalmazása. CSS hover, illetve egyéb animációs effektus használata. JavaScript interaktivitás megvalósítása. Legalább egy form validáció JavaScript segítségével. Kapcsolati form létrehozása és tesztelése (a Formspree rendszer segítségével). Megfelelő drótváz és prototípus elkészítése. Megfelelő verziókövetés megvalósítása. Megfelelő szoftverdokumentáció létrehozása. Bootstrap használata kerülendő a féléves projektmunkában, mert a vanilla HTML-CSS-JS alap készségekre vagyunk kíváncsiak az értékeléskor.
Weight of in-term assessments
Type Weight
100 %
Exam-period assessments

No detailed assessments provided.

Weight of exam elements

No weights provided.

Grade calculation
Type ECTS Performance (%)
jeles (5) Excellent [A] 95 % felett
jeles (5) Very Good [B] 85 % - 95 %
jó (4) Good [C] 70 % - 85 %
közepes (3) Satisfactory [D] 55 % - 70 %
elégséges (2) Pass [E] 40 % - 55 %
elégtelen (1) Fail [F] 40 % alatt
Attendance requirements
  • tutorial: 70%
Rules for retake and resubmission
  • Részteljesítmény első javítás: 1
Short description

Not provided.

Detailed description

Not provided.

Recommended courses

Not provided.

Workload to complete the subject
Description hours / term
részvétel a kontakt tanórákon 28
felkészülés a gyakorlatokra 14
részteljesítmény értékelés feladatainak kidolgozása 30
további, a teljesítéshez szükséges munkaidő ráfordítás 18
összegző értékelések 0
vizsgára készülés 0
labor 0
összesen 90
Validity of subject requirements
Requirements valid from:
2023. 01. 27.
Requirements valid until:
2027. 07. 15.
Curriculum placement

No curriculum placements recorded for this subject version.