Learn CSS Thai
This project is a CSS documentation article created for Thai people who are beginning to learn CSS on their own. The content covers everything from basics to more complex techniques, with examples that can be modified and tested by yourself. It helps reduce language barriers and increases opportunities for website development skills for Thai people, providing a foundation for further study and advancement.
Created at:
March 3, 2025
Stack:
- - Typescript
- - Nextjs
- - Tailwindcss
- - Shadcn
- - Mdxjs
- - Figma
- - Git
- - Vscode
Live Demo:
View Site
About Project
Propose
The Learn CSS Thai project originated from the need to address the lack of modern, easy-to-understand CSS learning resources in Thai language with immediate examples for practice. I found that many students and beginners struggle to learn CSS from existing English documentation. Although I personally support self-learning in English because it opens up vast knowledge and techniques, my goal in creating this project is to help beginners learning CSS to easily access content when starting out, to understand various concepts before they begin searching for techniques or knowledge elsewhere. Nevertheless, I still emphasize and prioritize reading the documentation of that technology.
Objectives
- To help CSS beginners understand basic content before studying various techniques on their own
- To share the author's learning experiences as a guide for readers
Key Fetures
- Content in each topic has been arranged appropriately for learning progression
- Includes a Code Editor to experiment with different properties to learn their usage
- Contains comparative images to visualize differences
- Short article content for easy reader comprehension
- Supplementary content, techniques, and warnings interspersed throughout the main content
Expected Benefits
- Readers can build upon this for their own learning journey
- Readers can utilize examples from the articles
- Readers gain confidence when starting to learn CSS
Web Stack Overview
Learn CSS Thai is built with a modern tech stack, with a focus on fast rendering because it needs to display numerous examples such as Code Editor, Code Block, and Callout Information. Additionally, these displays are divided into Components that accept various Properties to allow customization as needed.
This website is developed with Next.js version 15, the latest version, which helps load components faster and manages SEO excellently. For content display, MDX was chosen for writing and rendering content, as MDX provides convenience in writing content without needing various Element Tags, while also allowing the addition of Interactive Components.
For the website design, I drew inspiration from the TailwindCSS website because it has a clean, simple look. For Layout management, I chose Jun Layout as I had tried it at a Workshop and became interested, so I experimented with it in this project. I also used Shadcn/ui to manage image galleries, various buttons, and for searching different topics.
Projects Screenshots
Challenges and Problem Solving
How to create a CodeEditor
Solved: Studied from open source projects that allow modifications including the use of various custom hooks for debouncing, dragging both panes, and formatting code in the editor.
Making the Code Editor run best performance
Solved: Had to customize library loading with Lazy Loading and using debounce for display result.
Managing large amounts of lesson data
Solved: Developed an efficient MDX file management system and data caching.
How to start writing documentation with MDX
Solved: Studied what MDX is, the differences between creating regular page content versus writing with MDX, then examined documentation websites of various open source projects before experimenting in my own project.
How to organize and arrange content effectively
Solved: Studied websites that teach CSS to see how they typically organize their content, then categorized topics into appropriate sections.
Lessons Learned
1. Creating a Documentation Website
- - In this project, I tried creating a CSS Document website that displays content using MDX for the first time. I learned that when creating this type of website, it's not necessary to write with regular HTML tags.
2. Learning Code from Various Open Source Projects
- - This project utilized Code Editor and MDX, which were very new to me. I studied working examples and customized them to suit my needs.
- - From reading other developers' open source code, I learned and saw the benefits of their thought processes in creating components or various custom hooks that could be applied to the Code Editor.
3. Lessons Learned from Writing Explanatory Content
- - This project was the first time I used my knowledge to write explanations for others to read, which served as a review for myself. I learned that there are still some topics I need to understand better and many things I don't yet know.
- - I practiced planning content for beginners, determining what should be studied first. I referenced various learning resources combined with my own thoughts from when I was first learning about what would be a good starting point.
4. Design and Styling
- - In this project, I used TailwindCSS as the CSS framework for styling, along with regular CSS, allowing for flexible customization. I learned that creating classes with TailwindCSS enables very quick styling that's also easy to modify.
- - For the Layout, I used Jun Layout, a package I had the opportunity to try during a TailwindCSS Layout Workshop at Skooldio. Using it saved me a significant amount of time in managing layouts.
- - In this project, I tried creating Animated SVG with Lottie, which allowed me to have SVGs that can move, making the website more interesting.
Future Developement Plans
- - Add error notifications when there are code errors
- - Add exercises for each chapter
- - Add fullscreen mode for the CodeEditor
- - Improve the Homepage design
- - Add a popular blogs category
- - Add English language support