DEV Community: Edward Chia

Day 33 - Day 34: First JavaScript Component

Edward Chia — Thu, 12 Jun 2025 02:19:34 +0000

✍🏻 Log Date: 11 June 2025
For the past two days, I applied the JavaScript fundamentals I've been learning to real-world mini challenges from frontendmentor.io. I focused on building two commonly used UI components: a rating interface and an FAQ accordion

Both are useful, reusable, and perfect for sharpening my JS basics while building visible, working features early on.

🛠️ What I Coded (Highlights):

Interactive Rating Component (Attempt 1 & 2)

Live Demo: https://edwardcjianken.github.io/interactive-rating-component//
GitHub Repo: https://github.com/edwardcjianken/interactive-rating-component/tree/main/docs

Combined :hover and ::before pseudo-elements on radio buttons for a dynamic highlight effect.

Button with mouse hovered:

Button when clicked:

Used JavaScript for basic form validation: when no rating is selected, the radio buttons blink twice with an orange border.

Captured user input and reused it on the thank-you screen to print dynamically - "You selected <user input> out of 5"

FAQ Accordion Component (Attempt 1 & 2)

Live Demo: https://edwardcjianken.github.io/faq-accordian-component/
GitHub Repo: https://github.com/edwardcjianken/faq-accordian-component/tree/main/docs

Accordion logic felt tricky at first, but I eventually understood how toggling content visibility can be done with max-height and overflow: hidden.

Used .closest() to move up the DOM tree and .querySelector() to target nested elements — super handy for clean, modular scripting.

  const accItem = plusBtn.closest(".faq__acc-item");
  const accAnswer = accItem.querySelector(".faq__acc-answer");
  const minusBtn = accItem.querySelector(".faq__minus-icon");

In my second attempt, I improved UX by toggling plus/minus icons based on whether the panel is expanded or collapsed.

💡 Reflection:
It felt great seeing small pieces of JavaScript come to life in these UI components. These small wins are encouraging and make me excited to gradually increase project complexity. Onward! 🚀

Day 31 - Day 32: Landing Page with Different Layout

Edward Chia — Mon, 09 Jun 2025 15:04:28 +0000

✍🏻 Log Date: 9 June 2025
For the past two days, I focused on recreating a more advanced landing page layout — experimenting with overlapping elements and visual transitions.

🛠️ What I Coded (Highlights):

Landing Page for Suite (a hypothetical product) (Attempt 1 & 2)

Live Demo: https://edwardcjianken.github.io/suite-landing-page/
GitHub Repo: https://github.com/edwardcjianken/suite-landing-page

I did two separate attempts for this layout to reinforce how to handle more complex designs. The layout features a 3-column hero section, with certain elements from the first column intentionally overflowing into the second — a style I haven’t tried before.

✨ Things I Learned:

1. Gradient Button with Smooth Transition
Learned how to simulate a smooth gradient transition using the ::before pseudo-element underneath the button. Since CSS can’t transition between background-image values (e.g., gradients), I had to apply a transparent background on the button itself and animate the pseudo-element underneath it.

Button without mouse hover:

Button with mouse hovered:

2. Overflowing Image Beyond Container
Positioned an image (of a person) so that the head appears above the container boundary. Surprisingly, this was simple — it just required a negative margin-top.

3. Understanding flex-basis and min-width
Got more comfortable with using flex-basis to control column widths in a flex container.

💡 Reflection:
Practicing this layout helped solidify how layout mechanics like flex-basis, min-width, and pseudo-elements interact under the hood.
Next, I will start to use incorporate some JavaScript to add more interactivity to the designs. Onward! 🚀

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

Edward Chia — Sun, 08 Jun 2025 05:10:47 +0000

✍🏻 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

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)
Specify Tech Stack
- Prompt example: Create a weather tracking app using React (Vite), TypeScript, ShadCN, and Tailwind
Use Numbered Feature Lists
- To be more specific with my instructions.
Provide Working Examples
- Sample working code to guide implementation
Use @Docs and @Web Tags
- To fetch documentation or web references directly inside Cursor
Proactive Prompting
- Is this the most efficient approach?
- Are there any potential security issues?
- Are there edge cases we’re not handling yet?
Generate Documentation for the created software
- Prompt example: Add explanation of this code to our README file
Refactor & Simplify
- Prompt example: Please refactor the code in [file/function] to split it into [list of files/functions]
Use the word 'Radical' when stuck
- Prompt example: This still isn't working. Let's try a radically different approach.
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?
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:

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%
Created Utility Classes
- Grouped reusable styles into utility classes like .section, .container, .btn, etc.
Set Base Styles
- Applied global base styles to elements (e.g. all
  ,
  
  ) to avoid repeating CSS
Improved Class Naming
- Simplified and made class names more consistent and readable
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! 🚀

Day 26 - 28: Building my first landing page

Edward Chia — Thu, 05 Jun 2025 18:09:41 +0000

✍🏻 Log Date: 5 June 2025

For the past 3 days, I focused entirely on real-world project simulations by building reusable UI component and a full landing page. I referenced design challenges from Frontend Mentor, which helped sharpen my skills with hands-on layout building and responsiveness.

📚 What I Studied:
(Skipped — no new studying this cycle as i focused on building.)

🛠️ What I Coded (Highlights):

Order Summary Component

Live Demo: Link
GitHub Repo: Link

Chose this component because it’s highly practical — useful for nearly any future eCommerce-related project.
Practiced modular structuring and styling, following BEM naming convention.

Landing Page for Tech Book Club
This was my first full landing page build, complete with a Hero section, 2 Feature sections, Testimonial section, etc.

Live Demo: Link
GitHub Repo: Link

Took over 12 hours to complete. Laying out every element and handling media queries (desktop, tablet, mobile) felt tedious — but it gave me deep, practical exposure to responsive design.

I realized that using tools like React or Tailwind CSS later on could streamline this process significantly. Despite the time investment, it laid a strong foundation for future landing page projects.

✨ Things I Learned from the Landing Page Build:

Gradient Text Effects
- Used background-clip, -webkit-background-clip, and -webkit-text-fill-color to create text with a gradient fill.
Grid Background with Gradient Overlay
- Built a custom 3-layer background:
- Horizontal lines
- Vertical lines
- A gradient overlay for depth and style
Emphasis with Pseudo-elements
- Applied a circle pattern image using ::before pseudo-element to highlight key words visually.

💡 Reflection:
I still feel slow when positioning elements and writing responsive CSS, but I remind myself that this is part of the learning curve. I'm sure it will become easier the more I build. Next!

Day 24 - 25: Learning Python Libraries (NumPy, Pandas, Matplotlib)

Edward Chia — Mon, 02 Jun 2025 19:23:17 +0000

✍🏻Log Date: 2 June 2025

For the past 2 days, I've been continuing with my Full Stack Development with AI course at NUS. The current module shifts into Python libraries — foundational tools that will support the AI-focused parts of the curriculum coming later.

📚 What I Studied:

Got familiar with Jupyter Notebook as an interactive coding environment.
Explored NumPy for working with n-dimensional arrays and basic data analysis techniques:
- np.array(), np.mean(), np.std(), np.percentile()
Learned Pandas basics:
- Data structures like Series and DataFrames
- Read, cleaned, modified, and wrote CSV files
- Used accessors like df.iloc[-10:], df.index.size, df.shape[0], and methods like df.fillna()
Got a first look at Matplotlib for visualizing data:
- Created line plots and scatter plots
- Customized basic chart characteristics (labels, titles, colors)

🛠️ What I Coded (Highlights):
Practiced data analysis using NumPy

GitHub Repo: Link

Simulated analysis of a customer dataset (~1000 data points) to extract business insights.
Identified and flagged statistical outliers based on spending thresholds using NumPy.
Grouped data into defined spending tiers (e.g. low, mid, high) using binning techniques.
Projected potential revenue uplift from a simulated marketing campaign using filtered data.

Applied Pandas to manipulate and explore datasets

GitHub Repo: Link

Explored the structure of a user dataset (rows, columns, column names, and data types) using pandas.
Analyzed the distribution of user occupations and counted unique job titles.
Reviewed descriptive statistics of the dataset, including mean and least common ages.
Added a new salary column to the DataFrame.
Computed salary for each user by multiplying their age by 100.

Basic Data Visualization using Matplotlib

GitHub Repo: Link

💡 Reflection:
Learning how to derive insights from data has been quite satisfying. Even with a simple dataset, visualizing spending trends and segmenting users helped me better understand how data analysts think. It's still early, but this gave me a small taste of what it’s like to apply Python in real business contexts.

Day 19 - 23 of Coding: Basics of Python

Edward Chia — Mon, 02 Jun 2025 18:43:56 +0000

✍🏻 Log date: 31 May 2025

Over the past few days, I caught up on some modules from my National University of Singapore course (Full Stack Development with AI). I'm excited to dive into full-stack development end-to-end, but I know there’s still a long journey ahead—the course wraps up in mid-September this year.

📚 What I Studied:
The recent module covered the basics of Python programming. Topics included:

Installing Python and running .py files using Bash
Naming conventions with snake_case
Control flow with for and while loops
Data structures like lists, tuples, dictionaries, and sets

🛠️ What I Coded (Highlights):
Compound Interest and Future Value Calculator

GitHub Repo: Link

Nth Digit Finder (Using While Loop):

GitHub Repo: Link

Triangle Generator (Using For Loop):

GitHub Repo: Link

💡 Reflection:
The exercises helped me better understand how to break down problems and translate logic into code. Looking forward to applying these concepts in bigger projects as the course progresses!

Day 18 of Coding: Practicing BEM and scalable CSS design

Edward Chia — Tue, 27 May 2025 12:17:09 +0000

Over the last couple of days, I revisited two of my earlier HTML & CSS practice projects — this time with a focus on scalability, semantic structure, and maintainable CSS using the BEM (Block Element Modifier) naming convention.

🛠️ What I Coded:
Stats Preview Card Component -- Attempt 2:

Live Demo: Link
GitHub Repo: Link

Refactored layout and media queries for better responsiveness.
Set new breakpoint at max-width: 1000px and added another at max-width: 515px for tighter control on smaller screens.
Focused on centralized global styles using :root for consistent spacing, typography, and colors.

Social Links Profile -- Attempt 2:

Live Demo: Link
GitHub Repo: Link

Practiced custom transition effects for hover states.
Switched entirely to BEM (Block Element Modifier) naming convention for scalability and structure.

🎓 What I Learned:
Based on my research online, I learned that:

BEM improves clarity in larger projects by providing predictable structure and naming.
CSS becomes easier to debug and refactor when layout and styling are modularized.
BEM can get tricky when components have deep nesting or multiple structural layers. I reminded myself that BEM doesn’t need to replicate every level of HTML nesting. Instead, think of BEM as a way to create reusable, modular blocks.

For example:

For instance, in this example, the "card" block contains elements like "card_title" and "carddescription". However, when a section is more complex or meaningful on its own—like the statistics section—I separated it into its own block called "stats-container" with its own elements such as "stat", "statvalue", and "stat_label". This keeps the code organized, modular, and easier to maintain.

💡 Reflections:
Going through the same components for a second time made me realize how much structure matters.

My earlier attempts were functional, but not scalable. Applying BEM and global tokens forced me to think like a system designer — not just someone writing CSS line by line.

Day 16 - 17 of Coding: Designing stats preview card

Edward Chia — Tue, 20 May 2025 14:04:06 +0000

For the past 2 days, I dove deeper into CSS fundamentals while working on another HTML & CSS practice project.

It wasn’t just about writing code — I focused on applying best practices from design systems and debugging mistakes that forced me to rethink my approach.

🛠️ What I Coded:

Live Demo: Link
GitHub Repo: Link

*Design file from FrontendMentor. Design only, no sample code provided.

Initially tried applying a background image on an <img> element — which doesn’t work! Realized that background images should target <div>s or elements capable of rendering background layers.
Practiced defining global CSS variables inside :root for things like font sizes, spacing, and color tokens. It may be overkill for a small project like this one, but it’s solid prep for larger, component-driven layouts.
Used media queries and modular spacing to ensure the layout was responsive and adaptable.

🎓 What I Studied:

To improve my CSS design foundation, I watched The Easy Way to Design Top Tier Websites by Sajid and summarized key takeaways:

✅ Key Concepts: (I wasn't able to apply all of them, but I will try to keep these in mind with future designs for improvement.):

Functionality > Layout:
Start with the purpose of the page, not the number of sections or buttons. Focus on core functionality.
Design Minimalism:
Less is more. Fewer elements make a website more scannable — favor Z-pattern layouts.
Spacing Strategy:
Start with generous spacing and adjust down. Most beginners (like me) underestimate how much space UI needs.
Design System Building Blocks:
Set up consistent type scales, color schemes, spacing units, and basic components:

:root {
  /* Spacing */
  --margin-xs: 0.5rem;
  --margin-m: 1rem;
  --margin-l: 1.5rem;

  /* Colors */
  --gray10: hsl(0, 0%, 10%);
  --gray90: hsl(0, 0%, 90%);

  /* Typography */
  --ff: 'Inter', sans-serif;
  --h1: bold 4rem var(--ff);
  --p: 1rem var(--ff);
  --small: 0.75rem var(--ff);
}

:root {
  /* Spacing */
  --margin-xs: 0.5rem;
  --margin-m: 1rem;
  --margin-l: 1.5rem;

  /* Colors */
  --gray10: hsl(0, 0%, 10%);
  --gray90: hsl(0, 0%, 90%);

  /* Typography */
  --ff: 'Inter', sans-serif;
  --h1: bold 4rem var(--ff);
  --p: 1rem var(--ff);
  --small: 0.75rem var(--ff);
}

Hierarchy Through Contrast:
Use color, size, and shadow intentionally to guide attention. Not everything needs to "pop" — instead, de-emphasize the less important.
Avoid Centered Text:
Left-justified text improves readability.
Use Cards for Depth:
Soft box-shadows and spacing can give visual lift to otherwise bland sections like form elements or lists.

💡 Reflections:

CSS is definitely a rabbit hole, but each little iteration helps. The real win was learning how to design smarter, not harder — and code with scalability in mind.

On to the next design!

Day 15 of Coding: Designing recipe page & social links profile using HTML and CSS

Edward Chia — Sun, 18 May 2025 11:28:25 +0000

Today, I created a recipe webpage and social links profile from a Figma design file from Frontend Mentor.

It was my first time translating a design into code without referring to any source code. I also made sure to pay attention to semantic structure and responsive layout.

🛠️ What I Coded:

Live Demo: Link

GitHub Repo: Link

Built a responsive recipe webpage with clean layout and spacing.
Practiced margin and padding to visually separate sections properly.
Iterated from scratch for my second attempt (without referring back) to reinforce layout planning and semantic HTML skills.

Live Demo: Link

GitHub Repo: Link

Created a responsive social links profile with a clean layout and styled interactive buttons.
Practiced applying CSS transitions with different speeds for hover-in and hover-out effects.

📚 What I Learned:

Building from Figma to Code:
I challenged myself to translate a Figma design into a real webpage using only HTML and CSS. This was my first real attempt at turning static design assets into code, and it taught me a lot about structure, spacing, and visual consistency.
Semantic HTML:
I made sure to prioritize semantic markup — using tags like , , , and appropriately — because I want a strong foundation in writing accessible, meaningful HTML.
Responsive Design:
I applied media queries to make sure the page works well on smaller screens (under 576px). This helped me understand how to adapt layouts for different devices using simple but effective responsive techniques.
CSS Layout First, Styling Second:
I learned that it’s better (and less overwhelming) to focus on laying out the page structure first before worrying about fonts, colors, and inline spacing. This helped me group related styles and avoid repetitive CSS.
GitHub Pages Deployment:
I reused the process I learned from deploying React projects — this time for a static HTML page. I used the /docs folder for deployment so I could keep multiple attempts organized.

A key lesson: assets must be inside the /docs folder — relative paths to folders outside of it won’t work. Took some time and debugging to realize that!

💭 Reflections:
I was initially anxious — it took me a whole day for what seemed like a simple page. But I reminded myself:

This is just the start of my journey — each attempt is growth. If i want to improve fast, the only way is to iterate fast.

On my second try, I completed everything (including responsiveness) in about 2 hours, which I think is a good start for my learning journey. More practice is definitely needed. On to the next design!

Day 1 - 14 of Coding: Basics of HTML, CSS, JS & Git

Edward Chia — Sat, 17 May 2025 05:49:52 +0000

📚 What I Learned:

Refreshed Core Web Fundamentals: Revisited the basics of HTML, CSS, and JavaScript that I learned through FreeCodeCamp last year, focusing on clean markup, styling fundamentals, and scripting logic.
Version Control with Git: Learned essential Git commands such as git init, git add, git commit, git branch, and how to manage repositories with better workflow practices.
Introduction to React: Got started with React fundamentals — understanding JSX syntax, creating functional components, and getting familiar with common project file structures.
Deploying with GitHub Pages: Learned how to deploy React projects from a multi-project repository by running npm run build, placing the output into a docs folder, and configuring GitHub Pages to serve the site — gaining hands-on experience with static site hosting and deployment workflows.

🛠️ What I Coded (Highlights):

Practiced dynamically rendering arrays of objects in React components.
Built components that display different content based on the property values (props) passed in — gaining hands-on experience with conditional rendering and data-driven UI.

Why I’m Transitioning from Project Manager to Software Developer

Edward Chia — Sat, 17 May 2025 04:37:46 +0000

Hi everyone, Edward here 👋

Until recently, I was working as a software project manager. I have 8 years of total work experience, including 5 years in project management — leading teams, managing timelines, and delivering projects end-to-end. I enjoyed the challenge, but then something unexpected happened: the UK company I worked for shut down. Just like that, I was out of a job.

At first, I did what anyone might do — I started looking for another PM role. But the more I thought about it, the more something didn’t sit right.

I realized that while I had experience managing software projects, I didn’t actually know how to build software myself. I always relied on a team of developers to get things done. That might sound fine, but it made me feel stuck — like I couldn't create anything on my own. I had the ideas, I understood the process, but I lacked the technical ability to execute.

It hit me especially hard when I thought about business opportunities. People around me had specialized skills — design, social media, e-commerce, operations. My skill was “project management,” which is important, yes — but it often requires a team to apply. I wanted more self-sufficiency. I wanted to be able to build.

So I made a decision: I’m going to become a software developer.

Right now, I’m learning the basics — HTML, CSS, JavaScript — and I’ve just started with React. I was really inspired by a video on Youtube by Phillip Choi, where he talked about the importance of building real things that solve real problems, instead of just learning syntax.

I have a direction for my first project and a lot of motivation to keep going. But I’ll be honest — I’m scared too.

I have roughly 6 months of savings to give this career change everything I’ve got. I’m coding day and night, documenting everything I learn, and hoping to make something that shows both skill and potential. I will be documenting as much as I can here.

If you’ve made a similar transition — or you’re just ahead of me in this journey — I’d love to connect, learn, and maybe even be mentored. Any advice, encouragement, or feedback is more than welcome.

Thanks for reading — and here’s to the builders.

— Edward Chia