https://github.com/viorelmocanu/layoutcomplex
Un proiect în care construim un layout complex în HTML și CSS. Proiect pornit de aici: https://www.youtube.com/playlist?list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM
https://github.com/viorelmocanu/layoutcomplex
css css3 html layout mobile-first pagespeed-insights pwa responsive responsive-images responsive-web-design ro romana romania romanian semantic-web valid
Last synced: about 2 months ago
JSON representation
Un proiect în care construim un layout complex în HTML și CSS. Proiect pornit de aici: https://www.youtube.com/playlist?list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM
- Host: GitHub
- URL: https://github.com/viorelmocanu/layoutcomplex
- Owner: ViorelMocanu
- License: unlicense
- Created: 2021-06-13T16:43:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-05T14:11:46.000Z (over 1 year ago)
- Last Synced: 2025-03-27T23:51:10.353Z (2 months ago)
- Topics: css, css3, html, layout, mobile-first, pagespeed-insights, pwa, responsive, responsive-images, responsive-web-design, ro, romana, romania, romanian, semantic-web, valid
- Language: HTML
- Homepage: https://viorelmocanu.github.io/LayoutComplex/
- Size: 3.01 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Layout Complex de website în HTML și CSS
Un proiect în care construim un layout complex în HTML și CSS. Deployat live prin GitHub Pages aici:
## https://viorelmocanu.github.io/LayoutComplex/
Proiect pornit de pe [canalul meu de YouTube](https://www.youtube.com/ViorelMocanu) într-o serie de LIVE-uri în care am vrut să demonstrez cum facem un layout relativ complex, 100% mobile-first și responsive, în HTML și CSS și puțin JavaScript vanilla.
Episoadele în care am construit acest layout de la zero ([playlist-ul complet e aici](https://www.youtube.com/playlist?list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM)):
1. [🔴LIVE - Workshop 4 - Secrete de layout în CSS - mobile first responsive web design](https://www.youtube.com/watch?v=QyQjWqIOAc4&list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM&index=1)
2. [🔴LIVE - Workshop 5 - Layout complex în CSS - mobile first responsive web design](https://www.youtube.com/watch?v=Pv7h2pCHkqM&list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM&index=2)
3. [🔴LIVE - Workshop 6 - Module de front end în HTML și CSS - mobile first responsive web design](https://www.youtube.com/watch?v=2rLT5AjTtrg&list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM&index=3)
4. [🔴LIVE - Workshop 7 - Finalizăm layout-ul Cărturești - mobile first responsive web design](https://www.youtube.com/watch?v=trvVimq_hpU&list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM&index=4)Rezultatul e un boilerplate project cu scor 100 în Google PageSpeed Insights:

## Structura de foldere și fișiere root
```bash
.
├── .github # folder cu detalii despre sponsorizarea acestui proiect
├── images # folder cu imagini statice pentru design-ul site-ului
├── resources # folder cu fișiere statice (SVG, CSS, JS, typeface-uri, etc.)
├── android-chrome-192x192.png # fișier folosit ca favicon static de 192px x 192px în Chrome și Android
├── android-chrome-512x512.png # fișier folosit ca favicon static de 512px x 512px în Android
├── apple-touch-icon.png # fișier folosit ca favicon static în iOS și Safari
├── browserconfig.xml # fișier cu configurări pentru browsere de la Microsoft (IE, Edge)
├── favicon-16x16.png # fișier folosit ca favicon static de 16px x 16px
├── favicon-32x32.png # fișier folosit ca favicon static de 32px x 32px
├── favicon-192-maskable.png # fișier folosit ca favicon maskable pentru PWA-uri (în iOS și Android)
├── favicon-192.png # fișier folosit ca favicon static de 192px x 192px
├── favicon-512.png # fișier folosit ca favicon static de 512px x 512px
├── favicon.ico # fișier legacy folosit ca favicon static
├── favicon.svg # fișier modern folosit ca favicon static (care include media queries)
├── index.html # fișierul principal al proiectului - pagina HTML statică
├── LICENSE # fișier cu licența folosită de proiect
├── mstile-150x150.png # fișier folosit ca favicon static de 150px x 150px pentru Windows
├── my.webmanifest # fișier cu configurări pentru PWA și favicons
├── og-inage.jpg # fișier folosit ca Open Graph Image când se dă share acestui proiect
├── README.md # fișier cu detalii despre proiect
├── safari-pinned-tab.svg # fișier folosit ca favicon static pentru pinned tabs în Safari
├── service-worker.js # fișier JavaScript care descrie acțiunile de service worker ale PWA-ului
└── smaller-favicon.png # fișier folosit ca favicon static de dimensiuni mici
```## Concluzii
Dacă v-a ajutat proiectul, dați-mi [un subscribe pe YouTube](https://www.youtube.com/ViorelMocanu?sub_confirmation=1) și gândiți-vă la [o donație pe GitHub](https://github.com/sponsors/ViorelMocanu/) sau [pe BuyMeACoffee](https://www.buymeacoffee.com/viorel).
Mulțumesc!