Day 29 - Day 30: Learning Cursor Prompting & Recreating My First Landing Page

✍🏻 Log Date: 7 June 2025

For the past 2 days, I focused on two things:
(1) downloading and setting up Cursor, and learning best practices for prompting effectively, and
(2) recreating the Tech Book Club landing page from my last post to sharpen my layout-building skills and improve speed.

📚 What I Studied:
Prompting Best Practices in Cursor:
Credits to Volo Build's video

1. Prompt Structure (3 parts)

   • Clear instructions (e.g., Add search feature that performs search based on the product title and description)
   • Implementation tips (e.g., Create new component SearchBar and add it to the existing NavBar component. Also, create a new search endpoint in the @server.ts file.)
   • Edge case handling (e.g., When no results are found, display "No Results" instead of product list)

2. Specify Tech Stack

   • Prompt example: Create a weather tracking app using React (Vite), TypeScript, ShadCN, and Tailwind

3. Use Numbered Feature Lists

   • To be more specific with my instructions.

4. Provide Working Examples

   • Sample working code to guide implementation

5. Use @Docs and @Web Tags

   • To fetch documentation or web references directly inside Cursor

6. Proactive Prompting

   • Is this the most efficient approach?
   • Are there any potential security issues?
   • Are there edge cases we’re not handling yet?

7. Generate Documentation for the created software

   • Prompt example: Add explanation of this code to our README file

8. Refactor & Simplify

   • Prompt example: Please refactor the code in [file/function] to split it into [list of files/functions]

9. Use the word 'Radical' when stuck

   • Prompt example: This still isn't working. Let's try a radically different approach.

10. Learn to Code (most important for me)

    • Prompt example: I am learning how to code. Can you explain how the frontend connects to the backend in simple terms?

11. Design Before Code

    • Use Cursor to analyze and improve approach before jumping into code.
    • I want to build [feature]. How would you approach this technically?
    • How would you architect this? What considerations are important?

🛠️ What I Coded (Highlights):

Tech Book Club Landing Page (Attempt 2)

Screenshots:

Live Demo: https://edwardcjianken.github.io/tech-book-club-landing-page/

GitHub Repo: https://github.com/edwardcjianken/tech-book-club-landing-page/tree/main/attempt-2

This time, I completed it in about 4 hours+, compared to over 12 hours in my first attempt.

Key Improvements Made:

1. Better CSS Organization & Container System

   • Used as full-width background wrapper
   • Added a .container div inside to center content with max-width: 1200px
   • Avoided hardcoding margins like padding: 10%

2. Created Utility Classes

   • Grouped reusable styles into utility classes like .section, .container, .btn, etc.

3. Set Base Styles

   • Applied global base styles to elements (e.g. all

     ,

     ) to avoid repeating CSS

4. Improved Class Naming

   • Simplified and made class names more consistent and readable

5. Used Positioning for Decorative Icons

   • Practiced using position: absolute and relative to place icons outside the document flow

💡 Reflection:
I’ve decided to start using Cursor strictly as a question-asking tool to speed up my learning. Instead of copying and pasting code into ChatGPT manually, Cursor allows me to ask questions directly within my codebase. It reads my files and provides answers based on context. For now, I won’t let it make code changes on my behalf — just guide me with answers and explanations.

Rebuilding an existing layout instead of starting from scratch helped reinforce key concepts and made the learning feel more hands-on. Repetition strengthens muscle memory when working with real-world layouts.

Next, I’m planning to explore CSS preprocessors like SASS, SCSS, and LESS. I'm curious how they can improve efficiency in managing larger, more complex stylesheets. Onward! 🚀