A responsive article site built to learn and demonstrate HTML, CSS, and Bootstrap fundamentals. This project showcases clean semantic markup, mobile-first design principles, and implementation of Bootstrap components. Developed through an iterative process, each version introduced new technical concepts—from basic text styling and typography to complex grid layouts and responsive navigation. Based on TechCrunch's content structure, the site features custom typography using Poppins and Open Sans with a cohesive dark theme color system.
Coding Basics Article Webpage
#089E00
#FFE135
Roles
UI Designer, Frontend Developer
Programs
Sublime, Bootstrap, HTML/CSS, GitHub
Timeline
September 2025 - October 2025
#4796E3
#121212
#FFFFFF
-
Built iteratively throughout the course, with each version adding new technical skills
Started with basic HTML structure and text styling
Progressively added custom fonts (Poppins for headings, Open Sans for body text)
Implemented Bootstrap's grid system for responsive layouts
Integrated navigation components with hamburger menu functionality for mobile
Developed cohesive dark theme color system for visual hierarchy
-
Built with semantic HTML5 and custom CSS
Implemented Bootstrap framework for responsive grid and components
Coded in Sublime Text Editor for clean, organized markup
Mobile-first responsive design with collapsible navigation
Custom styling for typography, colors, and interactive elements
Deployed on GitHub Pages for public accessibility
-
Fully responsive layout optimized for mobile and desktop
Bootstrap navbar with hamburger menu for mobile
Multi-column article layout with sidebar
Custom hover states and interactive elements
Semantic HTML structure for accessibility
Consistent typography system and color hierarchy
Related articles grid and trending sidebar
Outcome - A functional, responsive article site that demonstrates foundational frontend development skills. The project showcases understanding of HTML/CSS fundamentals, Bootstrap framework implementation, and responsive design principles—all essential skills for building modern web applications.
Live Demo - https://gianna7803.github.io/coding-basics/