https://github.com/codingwithjiro/chris-courses-website

This website showcases a multi-section responsive course platform landing page built from a given Figma design file.
https://github.com/codingwithjiro/chris-courses-website

2nd-month css figma git github html netlify project vscode

Last synced: 2 months ago
JSON representation

This website showcases a multi-section responsive course platform landing page built from a given Figma design file.

• Host: GitHub
• URL: https://github.com/codingwithjiro/chris-courses-website
• Owner: CodingWithJiro
• License: mit
• Created: 2025-06-25T06:50:49.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-25T07:02:28.000Z (12 months ago)
• Last Synced: 2025-06-25T08:19:54.052Z (12 months ago)
• Topics: 2nd-month, css, figma, git, github, html, netlify, project, vscode
• Language: CSS
• Homepage: https://chris-courses-jiro.netlify.app/
• Size: 4.28 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Chris Courses Learning Platform

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://code.visualstudio.com/)

[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)](https://git-scm.com/)

[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/)

[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://www.netlify.com/)

[![Figma](https://img.shields.io/badge/Figma-ffffff?style=for-the-badge&logo=figma&logoColor=F24E1E)](https://www.figma.com/)

![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)

![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)

![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)

![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)

[![Netlify Status](https://api.netlify.com/api/v1/badges/1dd03677-da05-45ea-a70e-6d4f60e45a48/deploy-status)](https://chris-courses-jiro.netlify.app/)

![Status](https://img.shields.io/badge/status-complete-brightgreen)

![Learning Path](https://img.shields.io/badge/learning%20path-month%202-blue)

![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.chris-courses-website&left_text=repo%20views)

## A Multi-Section Responsive Landing Page

| _Mobile Preview (375x812)_                       | _Desktop Preview (1440x960)_                        |

| ------------------------------------------------ | --------------------------------------------------- |

| ![Mobile](./img/site-preview-mobile_375x812.png) | ![Desktop](./img/site-preview-desktop_1440x960.png) |

A 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.

---

## Overview

This 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.

This 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.

---

## Features

- Responsive grid layout using Flexbox and CSS Grid

- Call-to-action buttons and links with hover states

- Dark theme with a strong visual hierarchy

- Pricing cards with most popular tag

- Metrics and statistics section using styled cards

- FAQ layout using semantic question-answer markup

- Testimonial block styled for clarity

- Mobile-first design and media queries

- CSS custom properties for maintainable theming

- Fully accessible structure with alt text and role attributes

---

## What I Learned

- How to code a fully responsive website from a Figma design link

- How to structure multi-section landing pages with semantic HTML

- Advanced CSS techniques including variables, utility classes, and custom themes

- Mobile-first responsive design strategies

- Creating clean, scalable code with maintainability in mind

- Mimicking professional UI/UX layouts without frameworks

- Best practices in accessibility and visual hierarchy

---

## Tech Used

- HTML5

- CSS3

- Figma

- Git

- GitHub

- Netlify

---

## How to Run

1. Clone the repository

2. Open `index.html` in your browser

---

## Live Demo

Or you can check out the **[live website here](https://chris-courses-jiro.netlify.app/)**

---

## Author

Created by **Elmar Chavez**

Month/Year: **May 2025**

Journey: **2nd** month of learning _frontend web development_.