Skip to content

blancberger/cf9-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌐 CF9 Web — Web Development Projects

Εκπαιδευτικά projects HTML5, CSS3, Bootstrap & Tailwind CSS που δημιουργήθηκαν στο πλαίσιο του Coding Factory — Οικονομικό Πανεπιστήμιο Αθηνών (AUEB).


📖 Περιγραφή

Το repository περιέχει πρακτικά παραδείγματα και ασκήσεις‑challenges που καλύπτουν τις βασικές τεχνολογίες front‑end web development. Ο κώδικας είναι οργανωμένος σε 6 κεφάλαια (chapters) που ακολουθούν τη ροή του μαθήματος, καθώς και σε ένα φάκελο challenges με πιο σύνθετες ασκήσεις ανά κεφάλαιο.


🛠️ Τεχνολογίες

Τεχνολογία Έκδοση / CDN
HTML5
CSS3 (Vanilla)
Bootstrap 5.3.x (CDN)
Bootstrap Icons 1.13.x (CDN)
Tailwind CSS v4 (CDN — @tailwindcss/browser@4)
Font Awesome 7.x (CDN)
Google Fonts Διάφορα (π.χ. custom fonts)

📂 Δομή Repository

cf9web/
├── ch1/                        # Κεφάλαιο 1 – Εισαγωγή στην HTML5
├── ch2/                        # Κεφάλαιο 2 – CSS3 Styling
│   └── css/                    # Εξωτερικά CSS αρχεία
├── ch3-layout/                 # Κεφάλαιο 3 – CSS Layouts
│   └── css/                    # Εξωτερικά CSS αρχεία
├── ch4-responsive/             # Κεφάλαιο 4 – Responsive Design
│   ├── css/                    # Εξωτερικά CSS αρχεία
│   └── app-gov-gr/             # 🏛️ Mini‑project: Gov.gr App Mockup
├── ch5-bootstrap/              # Κεφάλαιο 5 – Bootstrap 5
│   └── Corfu-Bootstrap/        # 🏝️ Mini‑project: Corfu Guide
├── ch6-tailwind/               # Κεφάλαιο 6 – Tailwind CSS
├── challenges/                 # Ασκήσεις & Challenges
│   ├── chapter1/               #   HTML challenges
│   ├── chapter2/               #   CSS challenges
│   ├── chapter3/               #   Layout challenges
│   └── chapter4/               #   Responsive challenges
├── img/                        # Κοινές εικόνες (logos, photos)
└── README.md

📚 Κεφάλαια

Κεφάλαιο 1 — HTML5 Basics (ch1/)

Εισαγωγή στα βασικά στοιχεία της HTML5:

  • Δομή σελίδας, headings & παράγραφοι
  • Λίστες (ordered / unordered / nested)
  • Πίνακες (tables) με colspan & rowspan
  • Σύνδεσμοι (anchors) & εικόνες
  • Φόρμες (text, email, radio, checkbox, select, textarea, fieldset)
  • Ενσωμάτωση πολυμέσων (video / audio)

Κεφάλαιο 2 — CSS3 Styling (ch2/)

Βασικά και ενδιάμεσα θέματα CSS:

  • Σύνδεση εξωτερικών CSS αρχείων & κλάσεις
  • Selectors, specificity & cascade
  • Google Fonts integration
  • Styling φορμών, πινάκων & λιστών
  • Εικόνες & background images
  • CSS Transitions & hover effects
  • Overflow handling & viewport units (vh)
  • CSS mockup (σχεδιασμός σελίδας Coding Factory)
  • Navigation list menu

Κεφάλαιο 3 — CSS Layouts (ch3-layout/)

Τεχνικές τοποθέτησης & layout:

  • Float — Βασικό float layout & float around image
  • Box Model — Margin, padding, border
  • Flexbox — Alignment, menu, wrapping, order, sizing, grow/shrink
  • CSS Grid — Grid template, grid areas, grid sizing, flexbox‑grid alignment
  • Positioning — Relative, absolute, fixed, sticky
  • Dropdown menus με CSS

Κεφάλαιο 4 — Responsive Design (ch4-responsive/)

Responsive τεχνικές με CSS Media Queries:

  • Βασικά responsive παραδείγματα με breakpoints
  • Σύνθετο responsive mockup με header, nav, hero image, footer
  • Hamburger menu toggle (JavaScript)
  • Font Awesome icons integration

🏛️ Mini‑project: Gov.gr App Mockup (app-gov-gr/)

Responsive κλώνος σελίδας κυβερνητικής εφαρμογής "Δήλωση Καθαρισμού Οικοπέδων" — πλήρες layout με header, main content, form links & footer.

Κεφάλαιο 5 — Bootstrap 5 (ch5-bootstrap/)

Ανάπτυξη με Bootstrap 5:

  • Bootstrap setup & βασική χρήση
  • Grid system & responsive columns
  • Typography & spacing utilities
  • Tables (responsive, striped, hover)
  • Login form layouts
  • Responsive Navbar (collapsible, dark theme, icons)

🏝️ Mini‑project: Corfu Guide (Corfu-Bootstrap/)

Πολυσέλιδο website τουριστικού οδηγού για την Κέρκυρα — responsive navbar με dropdowns, hero section, image cards, footer με social icons. Χρήση Bootstrap 5 + Bootstrap Icons.

Κεφάλαιο 6 — Tailwind CSS v4 (ch6-tailwind/)

Ανάπτυξη με Tailwind CSS:

  • Εγκατάσταση & βασική χρήση (CDN browser build)
  • Utility‑first typography & spacing
  • Responsive design με Tailwind breakpoints
  • Flex & Grid layouts
  • Containers & columns
  • Display utilities (show/hide)
  • Styled tables & circular images
  • Login form
  • Responsive Navbar (JavaScript toggle, hover effects)

🎯 Challenges

Ασκήσεις-challenges ανά κεφάλαιο με αυξανόμενη δυσκολία:

Challenge Περιγραφή
Chapter 1 Βιογραφικό (Resume) σε HTML, Registration form, Tables
Chapter 2 Styled Login form, Bio page CSS styling
Chapter 3 Gov.gr TaxisNet Login page clone (CSS Flexbox layout)
Chapter 4 Gov.gr "Ακαθάριστα Οικόπεδα" responsive landing page

🚀 Πώς να τα τρέξετε

Τα αρχεία είναι στατικά HTML/CSS — δεν απαιτείται build process ή server.

  1. Clone το repository:
    git clone https://github.com/blancberger/cf9-web.git
  2. Ανοίξτε οποιοδήποτε .html αρχείο απευθείας στον browser σας, ή χρησιμοποιήστε ένα Live Server extension (π.χ. VS Code Live Server).

Σημείωση: Τα παραδείγματα Bootstrap & Tailwind φορτώνουν τα CSS frameworks μέσω CDN, οπότε απαιτείται σύνδεση στο internet.


📸 Highlights

  • ✅ HTML5 σημασιολογικά (semantic) elements
  • ✅ CSS3 Flexbox & Grid layouts
  • ✅ Πλήρως responsive σελίδες
  • ✅ Bootstrap 5 components (navbar, cards, forms, tables)
  • ✅ Tailwind CSS v4 utility‑first approach
  • ✅ Real‑world mockups (Gov.gr, Corfu Guide)
  • ✅ Accessible forms με label, fieldset, aria attributes

📄 Άδεια Χρήσης

Εκπαιδευτικό υλικό — Coding Factory @ AUEB.


Made with ❤️ at Coding Factory — Athens University of Economics and Business

About

Coding Factory 9 - web development repository

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors