DEV Community: Joyce Leung

What I realized while learning Chrome DevTools

Joyce Leung — Tue, 18 Mar 2025 16:30:00 +0000

This past week, I started exploring Chrome DevTools through The Odin Project's Inspecting HTML and CSS module.

It was like opening up a new world for me, because I'm finally (and slowly) understanding what happens when you click "Inspect" on an element from a Chrome web page.

While familiarizing myself with the tool, I realized two recurring concepts:

One symbol, different meanings

Previously, I learned that the $ symbol represents a command prompt in Linux.

In DevTools, the same symbol is something you can type in as a command in the Console, e.g., $0, which will return the node selected in the DOM tree.

Shortcuts are helpful

Shortcuts; it appeared in the worlds of basic HTML, terminal commands, and now DevTools as well.

I tend to visualize shortcuts as a language's own set of shortened commands.

Each command, often made up of multiple individual elements, forms a cohesive unit with meaning when combined.

These commands help me communicate with another "speaker" in conversation, i.e., the computer.

For example, pressing CTRL + ALT + T together opens the terminal in Linux.

Meanwhile, if you have DevTools opened on your Chrome web page, you can press Esc to open the Console drawer.

It's pretty cool how various tech programs use similar "vocabulary", though these vocabulary terms and expressions can have vastly different meanings and functions in each program.

Why does my bulleted list look odd on the web browser?

Joyce Leung — Thu, 13 Mar 2025 20:13:42 +0000

When editing my recipe project, I noticed something looking rather odd.

In a center-aligned bulleted list, the bullets are far separated from the list items, all huddled towards the left.

Approach 1: Default List Format

<h2>Ingredients</h2>
    <ul>
        <li>1 large egg</li>
        <li>1 ripe avocado, pitted and peeled</li>
        <li>1 slice of bread</li>
        <li>1/4 tsp black pepper</li>
        <li>1 teaspoon lemon juice</li>
        <li>1 pinch of salt</li>
        <li>1 pinch of cayenne pepper powder</li>
    </ul>

My first thought was, is it because the browser needs to distribute each list item evenly across the page?

And at the same time, it needs to leave plenty of space between the text and each bullet point?

I later learned this happens because bullets are left-aligned by default, and the text is centered independently within a container.

I decided to play around with the formatting...

Approach 2: Removing the `ul` element

<h2>Ingredients</h2>
      <li>1 large egg</li>
      <li>1 ripe avocado, pitted and peeled</li>
      <li>1 slice of bread</li>
      <li>1/4 tsp black pepper</li>
      <li>1 teaspoon lemon juice</li>
      <li>1 pinch of salt</li>
      <li>1 pinch of cayenne pepper powder</li>

Without the ul element, the li elements are treated as regular block elements standing on their own.

But the browser will still interpret the li elements as list items, and add bullets to each item. And since there are no ul elements to apply the default styling onto the list items, the bullets are also center-aligned.

Now what happens if you take out both ul and the li elements?

Approach 3: Removing `ul` and `li` elements

<p>
   1 large egg
   <br>
   1 ripe avocado, pitted and peeled
   <br>
   1 slice of bread
   <br>
   1/4 tsp black pepper
   <br>
   1 teaspoon lemon juice
   <br>
   1 pinch of salt
   <br>
   1 pinch of cayenne pepper powder
</p>

Instead of list items, the text is structured as paragraph elements. The bullet points have disappeared, and although this type of formatting looks more bare bones, it has a cleaner appearance compared to the previous approach above.

I also added the br element to add a line break between each text item.

After trying all three approaches, I decided to go with the last one since it looks more tidy than the other two.

Next step: find out different ways to format a bulleted list, but in CSS!

4 lessons from learning webdev as a beginner

Joyce Leung — Tue, 11 Mar 2025 22:41:44 +0000

In February, I decided to take a plunge in web development.

With very little technical knowledge, I started The Odin Project's Foundations course not knowing anything about HTML and CSS, nor the difference between the Web and the Internet.

Fast forward now, I've learned a little bit about computer basics. I also built my first recipe web pages and published them on GitHub just last week!

Here are the standout lessons I've learned throughout the past few months:

1. Get used to being a language learner (many times!)

Learning terminal commands, as well as basic HTML and CSS was like learning a new language.

You learn the names and functions of different elements.

You also learn the syntax of a "sentence" or "paragraph"— how these elements can be structured to form a coherent part, where each part has their unique meaning and purpose.

The fields of coding and linguistics also seem to describe and visualize relationships in similar ways. For example:

Using terms like "ancestor", "descendant", "parent", and "child" to describe relationships between elements
Organizing elements into nesting structures (e.g., subdirectories inside the root directory vs. noun and verb phrases in a sentence) , with each element having different dependencies and hierarchy levels
A command doesn't always require an option and an argument, just like how an intransitive verb doesn't need to take on an object argument

2. Understand your current location and directions

The concept first came up when I was learning Linux terminal commands.

Many times, I tried to jump to a directory located multiple paths away, or search for a specific file or directory, only for the terminal to return an error because I was located in the incorrect directory.

Then I realized this concept also applies to Git.

It's good practice to understand where your files are located and their current statuses, so you don't accidentally push your unfinished files to a remote repository.

Similarly, developers may need to know where they're located when writing and debugging code, so they can better keep track of their progress and issues that come up along the way.

No matter if you're working on a single line of code, jumping between directories or Git branches, I realized it's important to understand clearly where you are and where you're going at the current time.

3. Naming is important

Going hand-in-hand with the concept of understanding your current location, naming items correctly can save time and make locating files easier.

One way I learned this is by making sure the file extension name matches the type of data or information in the file.

Space and capitalization also matter.

For example, typing the Linux terminal commands ls -s vs. ls -S can yield different results.

When looking at the names of a programming language or a digital program, I think about where they came from, why were they named that way, and the impact they bring for the mass audience or a specific group of audience.

A word like "Windows" now carries very different meanings and interpretations compared to decades ago.

Side note: why are there so many food words used in technological terms, like "flavors of Ubuntu", "Raspberry Pi", "Linux kernel"?

4. One problem, many solutions

Oftentimes, there are many different ways to create something or to perform a specific action.

For example, in Linux commands, you can create a text file using a text editor, or by using the touch command.

Currently, I'm on the CSS Cascade module from The Odin Project. I learned that there are different ways to style a button element by increasing its higher specificity value.

So far, I enjoy that there is often no simple 1:1 solution to building something. There can be different solutions, and each person may write their solutions differently.

As I'm slowly adopting this mindset, I also find myself coming up with more questions whenever I'm working through practice exercises:

Why did this solution work or not work?
What other ways can you solve this specific problem?
How can you make your solution "better" or more efficient?

Looking back to these months of learning, a part of me feels silly to be starting from ground zero when the tech field is developing so rapidly everyday.

But learning each language's syntax, how elements interact with each other, and thinking of different ways to make something work (or manually troubleshooting why something doesn't work) is still 100% the fun, and a critical skill to have in the age of AI.