{"id":29544636,"url":"https://github.com/codingwithjiro/chris-courses-website","last_synced_at":"2026-04-09T23:11:54.916Z","repository":{"id":301112407,"uuid":"1008184785","full_name":"CodingWithJiro/chris-courses-website","owner":"CodingWithJiro","description":"This website showcases a multi-section responsive course platform landing page built from a given Figma design file.","archived":false,"fork":false,"pushed_at":"2025-06-25T07:02:28.000Z","size":4485,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T08:19:54.052Z","etag":null,"topics":["2nd-month","css","figma","git","github","html","netlify","project","vscode"],"latest_commit_sha":null,"homepage":"https://chris-courses-jiro.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodingWithJiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2025-06-25T06:50:49.000Z","updated_at":"2025-06-25T07:03:58.000Z","dependencies_parsed_at":"2025-06-25T08:30:00.664Z","dependency_job_id":null,"html_url":"https://github.com/CodingWithJiro/chris-courses-website","commit_stats":null,"previous_names":["codingwithjiro/chris-courses-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingWithJiro/chris-courses-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Fchris-courses-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Fchris-courses-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Fchris-courses-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Fchris-courses-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingWithJiro","download_url":"https://codeload.github.com/CodingWithJiro/chris-courses-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Fchris-courses-website/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265619548,"owners_count":23799449,"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":["2nd-month","css","figma","git","github","html","netlify","project","vscode"],"created_at":"2025-07-17T15:02:48.556Z","updated_at":"2026-04-09T23:11:54.909Z","avatar_url":"https://github.com/CodingWithJiro.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chris Courses Learning Platform\n\n![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)](https://code.visualstudio.com/)\n[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge\u0026logo=git\u0026logoColor=white)](https://git-scm.com/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/)\n[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white)](https://www.netlify.com/)\n[![Figma](https://img.shields.io/badge/Figma-ffffff?style=for-the-badge\u0026logo=figma\u0026logoColor=F24E1E)](https://www.figma.com/)\n![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)\n![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)\n![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)\n![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/1dd03677-da05-45ea-a70e-6d4f60e45a48/deploy-status)](https://chris-courses-jiro.netlify.app/)\n![Status](https://img.shields.io/badge/status-complete-brightgreen)\n![Learning Path](https://img.shields.io/badge/learning%20path-month%202-blue)\n![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.chris-courses-website\u0026left_text=repo%20views)\n\n## A Multi-Section Responsive Landing Page\n\n| _Mobile Preview (375x812)_                       | _Desktop Preview (1440x960)_                        |\n| ------------------------------------------------ | --------------------------------------------------- |\n| ![Mobile](./img/site-preview-mobile_375x812.png) | ![Desktop](./img/site-preview-desktop_1440x960.png) |\n\nA full landing page for an online course platform, built entirely with semantic HTML5 and custom CSS. This site mimics Tailwind UI-style layouts and practices real-world design structures.\n\n---\n\n## Overview\n\nThis is a fully responsive, multi-section landing page inspired by Tailwind UI. Built from a Figma design using semantic HTML and custom CSS, the layout simulates a real-world course platform with clean structure and accessibility in mind.\n\nThis project served as a hands-on exercise in building complex layouts from scratch, deepening my understanding of responsive design, mobile-first development, and professional UI/UX patterns all without using any frameworks.\n\n---\n\n## Features\n\n- Responsive grid layout using Flexbox and CSS Grid\n- Call-to-action buttons and links with hover states\n- Dark theme with a strong visual hierarchy\n- Pricing cards with most popular tag\n- Metrics and statistics section using styled cards\n- FAQ layout using semantic question-answer markup\n- Testimonial block styled for clarity\n- Mobile-first design and media queries\n- CSS custom properties for maintainable theming\n- Fully accessible structure with alt text and role attributes\n\n---\n\n## What I Learned\n\n- How to code a fully responsive website from a Figma design link\n- How to structure multi-section landing pages with semantic HTML\n- Advanced CSS techniques including variables, utility classes, and custom themes\n- Mobile-first responsive design strategies\n- Creating clean, scalable code with maintainability in mind\n- Mimicking professional UI/UX layouts without frameworks\n- Best practices in accessibility and visual hierarchy\n\n---\n\n## Tech Used\n\n- HTML5\n- CSS3\n- Figma\n- Git\n- GitHub\n- Netlify\n\n---\n\n## How to Run\n\n1. Clone the repository\n2. Open `index.html` in your browser\n\n---\n\n## Live Demo\n\nOr you can check out the **[live website here](https://chris-courses-jiro.netlify.app/)**\n\n---\n\n## Author\n\nCreated by **Elmar Chavez**\n\nMonth/Year: **May 2025**\n\nJourney: **2\u003csup\u003end\u003c/sup\u003e** month of learning _frontend web development_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Fchris-courses-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingwithjiro%2Fchris-courses-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Fchris-courses-website/lists"}