{"id":18854757,"url":"https://github.com/viorelmocanu/layoutcomplex","last_synced_at":"2025-04-14T10:42:13.406Z","repository":{"id":42570602,"uuid":"376593227","full_name":"ViorelMocanu/LayoutComplex","owner":"ViorelMocanu","description":"Un proiect în care construim un layout complex în HTML și CSS. Proiect pornit de aici: https://www.youtube.com/playlist?list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM","archived":false,"fork":false,"pushed_at":"2023-10-05T14:11:46.000Z","size":3157,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T23:51:10.353Z","etag":null,"topics":["css","css3","html","layout","mobile-first","pagespeed-insights","pwa","responsive","responsive-images","responsive-web-design","ro","romana","romania","romanian","semantic-web","valid"],"latest_commit_sha":null,"homepage":"https://viorelmocanu.github.io/LayoutComplex/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ViorelMocanu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ViorelMocanu","patreon":"ViorelMocanu","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.buymeacoffee.com/viorel"]}},"created_at":"2021-06-13T16:43:25.000Z","updated_at":"2024-10-07T13:46:58.000Z","dependencies_parsed_at":"2024-11-08T03:51:15.210Z","dependency_job_id":"78e09077-291a-4f67-b891-249149295a80","html_url":"https://github.com/ViorelMocanu/LayoutComplex","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViorelMocanu%2FLayoutComplex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViorelMocanu%2FLayoutComplex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViorelMocanu%2FLayoutComplex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViorelMocanu%2FLayoutComplex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ViorelMocanu","download_url":"https://codeload.github.com/ViorelMocanu/LayoutComplex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248867324,"owners_count":21174711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","layout","mobile-first","pagespeed-insights","pwa","responsive","responsive-images","responsive-web-design","ro","romana","romania","romanian","semantic-web","valid"],"created_at":"2024-11-08T03:50:58.520Z","updated_at":"2025-04-14T10:42:13.382Z","avatar_url":"https://github.com/ViorelMocanu.png","language":"HTML","funding_links":["https://github.com/sponsors/ViorelMocanu","https://patreon.com/ViorelMocanu","https://www.buymeacoffee.com/viorel","https://github.com/sponsors/ViorelMocanu/"],"categories":[],"sub_categories":[],"readme":"# Layout Complex de website în HTML și CSS\n\nUn proiect în care construim un layout complex în HTML și CSS. Deployat live prin GitHub Pages aici:\n\n## https://viorelmocanu.github.io/LayoutComplex/\n\nProiect 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.\n\nEpisoadele în care am construit acest layout de la zero ([playlist-ul complet e aici](https://www.youtube.com/playlist?list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM)):\n\n1. [🔴LIVE - Workshop 4 - Secrete de layout în CSS - mobile first responsive web design](https://www.youtube.com/watch?v=QyQjWqIOAc4\u0026list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM\u0026index=1)\n2. [🔴LIVE - Workshop 5 - Layout complex în CSS - mobile first responsive web design](https://www.youtube.com/watch?v=Pv7h2pCHkqM\u0026list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM\u0026index=2)\n3. [🔴LIVE - Workshop 6 - Module de front end în HTML și CSS - mobile first responsive web design](https://www.youtube.com/watch?v=2rLT5AjTtrg\u0026list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM\u0026index=3)\n4. [🔴LIVE - Workshop 7 - Finalizăm layout-ul Cărturești - mobile first responsive web design](https://www.youtube.com/watch?v=trvVimq_hpU\u0026list=PLfTqvIG4roBrP63BDGSXEKvf7iThHSKgM\u0026index=4)\n\nRezultatul e un boilerplate project cu scor 100 în Google PageSpeed Insights:\n\n![Layout Complex - Google Page Speed Insights](https://user-images.githubusercontent.com/166049/124643133-5d344000-de99-11eb-849c-852e077a62fa.jpg)\n\n## Structura de foldere și fișiere root\n\n```bash\n.\n├── .github                    # folder cu detalii despre sponsorizarea acestui proiect\n├── images                     # folder cu imagini statice pentru design-ul site-ului\n├── resources                  # folder cu fișiere statice (SVG, CSS, JS, typeface-uri, etc.)\n├── android-chrome-192x192.png # fișier folosit ca favicon static de 192px x 192px în Chrome și Android\n├── android-chrome-512x512.png # fișier folosit ca favicon static de 512px x 512px în Android\n├── apple-touch-icon.png       # fișier folosit ca favicon static în iOS și Safari\n├── browserconfig.xml          # fișier cu configurări pentru browsere de la Microsoft (IE, Edge)\n├── favicon-16x16.png          # fișier folosit ca favicon static de 16px x 16px\n├── favicon-32x32.png          # fișier folosit ca favicon static de 32px x 32px\n├── favicon-192-maskable.png   # fișier folosit ca favicon maskable pentru PWA-uri (în iOS și Android)\n├── favicon-192.png            # fișier folosit ca favicon static de 192px x 192px\n├── favicon-512.png            # fișier folosit ca favicon static de 512px x 512px\n├── favicon.ico                # fișier legacy folosit ca favicon static\n├── favicon.svg                # fișier modern folosit ca favicon static (care include media queries)\n├── index.html                 # fișierul principal al proiectului - pagina HTML statică\n├── LICENSE                    # fișier cu licența folosită de proiect\n├── mstile-150x150.png         # fișier folosit ca favicon static de 150px x 150px pentru Windows\n├── my.webmanifest             # fișier cu configurări pentru PWA și favicons\n├── og-inage.jpg               # fișier folosit ca Open Graph Image când se dă share acestui proiect\n├── README.md                  # fișier cu detalii despre proiect\n├── safari-pinned-tab.svg      # fișier folosit ca favicon static pentru pinned tabs în Safari\n├── service-worker.js          # fișier JavaScript care descrie acțiunile de service worker ale PWA-ului\n└── smaller-favicon.png        # fișier folosit ca favicon static de dimensiuni mici\n```\n\n## Concluzii\n\nDacă 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).\n\nMulțumesc!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviorelmocanu%2Flayoutcomplex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviorelmocanu%2Flayoutcomplex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviorelmocanu%2Flayoutcomplex/lists"}