{"id":16620778,"url":"https://github.com/alphalawless/responsiveness-training","last_synced_at":"2026-05-18T17:05:13.938Z","repository":{"id":106946530,"uuid":"361572256","full_name":"AlphaLawless/Responsiveness-Training","owner":"AlphaLawless","description":"Responsiveness training repository. By Mayk Brito 👨‍🏫","archived":false,"fork":false,"pushed_at":"2021-12-01T14:52:19.000Z","size":34,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T05:05:06.664Z","etag":null,"topics":["responsive","rocketseat","training"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlphaLawless.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-04-26T00:35:51.000Z","updated_at":"2021-12-01T14:52:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"de44a24c-5c01-4f08-97eb-fbecaed62355","html_url":"https://github.com/AlphaLawless/Responsiveness-Training","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlphaLawless/Responsiveness-Training","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlphaLawless%2FResponsiveness-Training","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlphaLawless%2FResponsiveness-Training/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlphaLawless%2FResponsiveness-Training/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlphaLawless%2FResponsiveness-Training/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlphaLawless","download_url":"https://codeload.github.com/AlphaLawless/Responsiveness-Training/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlphaLawless%2FResponsiveness-Training/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33184769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["responsive","rocketseat","training"],"created_at":"2024-10-12T02:45:10.756Z","updated_at":"2026-05-18T17:05:13.915Z","avatar_url":"https://github.com/AlphaLawless.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Languages\n \n * [en-US](#Responsiveness)\n * [pt-BR](#Responsividade)\n# 📱Responsiveness\n\nThis repository was made for I train responsinevess concepts, and study into practice responsiveness. All the material here was made with assistance, and with the materials available in the rocketseat-content repository [link](https://github.com/rocketseat-content/youtube-masterclass-responsividade).\n\n## CSS Units\n\nCSS unit of measure.\n\n **Fixed Layout:**\n * `px` - Pixels\n\n **Fluid Layout:**\n * `%` - Percentage Usage (0% - 100%)\n * `auto` - Automatic Balancing\n * `vh` - Viewport Height (Y) (0vh - 100vh)\n * `vw` - Viewport Width (X) (0vw - 100vw)\n\n **Fixed Text:**\n * 1px = 0.75pt\n * 16px = 12pt\n\n **Fluid Text:**\n * `em` - multiplied for father\n * `rem` - multiplied for root\n\n **OBS: These properties do not apply only to texts.**\n## CSS Media Queries\n\n```css\n@media (max-width: 320px) {\n  #form h3 {\n    font-size: 2rem;\n  }\n}\n```\n## HTML Media Attrib.\n\n```html\n  \u003clink rel=\"stylesheet\" href=\"responsive.css\" media=\"screen and (max-width: 768px)\"\u003e\n  \n  \u003clink rel=\"stylesheet\" href=\"print.css\" media=\"print\"\u003e\n```\n## Images\n\n`\u003cpicture\u003e` and `\u003csource\u003e`\n```html\n\u003cpicture class=\"image\" alt=\"Imagem\"\u003e\n  \u003csource media=\"(min-width: 768px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg\"\u003e\n  \u003csource media=\"(min-width: 320px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg\"\u003e\n  \u003csource media=\"(min-width: 10px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg\"\u003e\n\n  \u003cimg \n    src=\"https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg\" \n    alt=\"Imagem\" /\u003e\n\u003c/picture\u003e\n```\n * Always use the SVG format for creating responsive websites, as it supports changing the image with good resolution.\n# 📱Responsividade \n\nEsse repositório foi feito para eu treinar conceitos de responsivdade, e estudar mesmo na prática responsividade. Todo o matérial aqui foi feito com auxílio, e com os materiais disponíveis do repositório da rocketseat-content [link](https://github.com/rocketseat-content/youtube-masterclass-responsividade).\n\n## CSS Units\n\nUnidades de medida do CSS.\n\n **Layout Fixo:**\n * `px` - Pixels\n\n **Layout Fluido:** \n * `%` - Uso da Porcentagem (0% - 100%)\n * `auto` - Balanceamento Automático\n * `vh` - Viewport Height (Y) (0vh - 100vh)\n * `vw` - Viewport Width (X) (0vw - 100vw)\n\n **Textos Fixos:**\n * 1px = 0.75pt \n * 16px = 12pt\n\n **Textos Fluidos:**\n * `em` - multiplicado pelo pai\n * `rem` - multiplicado pelo root\n\n **OBS: Essas propriedades não se aplicam somente em textos.**\n\n## CSS Media Queries\n\n```css\n@media (max-width: 320px) {\n  #form h3 {\n    font-size: 2rem;\n  }\n}\n```\n## HTML Media Attrib.\n\n```html\n  \u003clink rel=\"stylesheet\" href=\"responsive.css\" media=\"screen and (max-width: 768px)\"\u003e\n  \n  \u003clink rel=\"stylesheet\" href=\"print.css\" media=\"print\"\u003e\n```\n## Imagens\n\n`\u003cpicture\u003e` e `\u003csource\u003e`\n```html\n\u003cpicture class=\"image\" alt=\"Imagem\"\u003e\n  \u003csource media=\"(min-width: 768px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg\"\u003e\n  \u003csource media=\"(min-width: 320px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg\"\u003e\n  \u003csource media=\"(min-width: 10px)\" \n    srcset=\"https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg\"\u003e\n\n  \u003cimg \n    src=\"https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg\" \n    alt=\"Imagem\" /\u003e\n\u003c/picture\u003e\n```\n * Utilize sempre o formato SVG para criação de sites responsivos, pois ele suporta a alteração da imagem com boa resolução.\n   \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphalawless%2Fresponsiveness-training","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falphalawless%2Fresponsiveness-training","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphalawless%2Fresponsiveness-training/lists"}