Desmos Clone: A Hands-On HTML and CSS Project

This repo is a personal challenge to build a stripped-down version of the Desmos website (without the graphing calculator interface). It's all about diving deep into HTML and CSS to recreate the look and feel of a popular web app. I'm using this project to level up my skills in building clean, responsive, and visually appealing websites.

While this project focuses on HTML and CSS, it also serves as a precursor to integrating more complex JavaScript functionalities for interactive graphing capabilities. This repository is intended as a living document, evolving as the developer's skills progress. It is open to feedback and contributions, fostering a collaborative learning environment.

Tip

View it live here!

Key features and goals:

• Accurate replication of Desmos' user interface elements
• Mastery of HTML and CSS for layout, styling, and responsiveness
• Adherence to best practices for code organization and readability
• Exploration of advanced CSS techniques (flexbox, grid, pseudo-classes, pseudo-elements)
• Foundation for future integration of JavaScript for interactive graphing

I'm focusing on nailing the design first, using HTML structure and CSS styling to mimic Desmos' iconic look. Once the foundation is solid, I plan to add JavaScript for dynamic features.

Important

This project is a work in progress, and I'm open to feedback and suggestions. It's a great way to learn and grow as a developer. This project is not affiliated with Desmos Studio PBC and is solely for educational and practice purposes.

Personal Documentation

Revamped Pages

1. Landing page
2. Careers page

Changes I Made

Landing page

• Positioned the navbar dropdown to the center with respect to the dropdown logo.
• Positioned the drodpown content to be aligned with the left side of their respective menus.
• Didn't add the background images for their featured apps containers (graphing calc, geometry, global art contest).
• Added hover effects for the galleries (2023 global math art contest & example 3d graphs).
• Used a colored desmos logo instead due to personal preference.

Careers page

• None

Notes

As of August 1 2024...

1. The website is completely static. It is built only on HTML and CSS.
2. At this time, I have yet learned how to use JS with HTML and CSS, so no dynamic features yet (e.g. a login page overlay).
3. The website is not responsive, looking forward to learning responsive web design though.
4. Feel free to use this for your own learning experience (or criticize it to hell 🤗).

© 2024 Samuel Theodore Gunawan. All rights reserved.