In February, I published an article titled “What I Will Learn in 2023.” And one of the skills I wrote down was web development.

So, this article is very long overdue. But in May, I decided to do something about this.

I’m going to code now.

But, it’s been a while since I’ve coded. And I wasn’t sure if I’ll stay motivated. So for my first project, I set some “rules” / goals:

• Use semantic HTML, CSS, and SCSS
• Build something fun!

Now, to make this fun, I decided to fully embrace one of my passions.

And so, I build a blog about anime.

LMAO 😂

Jokes aside, I really, really enjoyed this project. It was so fun to dig up the anime I’ve watched and list out my bucket list. And of course - to list out my top 5.

If you love anime or are interested, feel free to check it out here: https://guo-anime.netlify.app/

In this article, I want to share some highlights & learnings. Hopefully, this can help you if you want to start coding!

What I built

“Anime” is a simple blog article that shares everything anime-related about me.

How I built this

Caveat: I have taken a web programming course before. So I’m not completely new to front-end development.

If you’ve never coded before, these videos are a great start to understand the basics:

• HTML in 100 Seconds
• CSS in 100 Seconds
• SCSS in 100 Seconds

Now, I don’t want to bore you with the details. So here are the high-level steps I took to build this site:

1. Wrote out the article in Notion
2. Exported all the images and then compressed them with TinyJPG
3. Remembered what Mike Mai said about web accessibility
4. Wrote the entire semantic HTML first (ZERO styling)
5. Installed Live Sass Compiler & Live Server on VSCode
6. Styled the page using SCSS (compiles into CSS)
7. Imported the folder onto GitHub
8. Tried to use GitHub Page but failed because apparently, GitHub Pages can’t precompile SASS on its own
9. Opened up a Netlify account and linked it up to my GitHub repo
10. It works! 😭

Learnings

Let’s talk about the learnings. There are quite a few.

Web Accessibility

In 2020, 98.1% of the top 1 million homepages had at least one accessibility guideline failure.

Also, 15% of the world’s population lives with some form of disability (visual, motor, hearing, cognitive).

So, 15% - over 1 billion people - can’t fully interact with these websites.

Think about that.

So, I want to build accessible sites/applications. And I learned so much from this project by looking up online resources (links shown later).

To make this more concrete, here are some key accessibility considerations in code:

• Text & background color contrast ratio is above 4.5:1 (both dark & light mode)
• Skip the link so people can tab to the main content
• All sections have a header / or else add an aria attribute
• No divs (cause it does not mean anything to a screen reader)
• Clear heading & landmark structure

Image file size matters

With this article, I had a lot of images. Thus, here’s what I did:

1. Resize all the images to what I imagine the actual size will be
2. Compress them down

In reality, the anime images in the card format are all 600 x 600 px. I should have made them smaller. But I did set the width & height for them in HTML.

Don’t just copy

This was crucial, especially when I was writing SCSS.

Reminder: It has been over a year since I’ve written SCSS / CSS. So, at the time, I was extremely rusty (and still am).

Thus, I decided to study websites by inspecting their code. At first, I was like

Wow, I don’t think I’ve ever seen this code snippet before! Let me add this to my site and see what happens!

But then, the more I copied and pasted, I realized

Wait a minute. I have absolutely no clue what these mean.

Seriously what does “:where” / “@layer” / padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2) mean???

So, I stopped copying.

I deleted all my copied code. And I styled the page with what I knew beforehand (basic CSS) and the new things that made sense to me.

Then, I scheduled a call with my mentor - Mike - to go over my SCSS and edit the code.

Because I stopped copying, now I fully understand my code.

Just build something you love

Note: there are two parts to this:

1. Build
2. something you love

Build

Now, I believe that tutorials help to some extent. But, the quickest way someone can learn is to build. It’s to get your hands dirty.

Trust me - you learn so much from just one project.

For example, here is a list of things I learned or reviewed:

HTML

aside, article, target=”_blank”, skip link, landmarks, ul, ol

SCSS

@layer, clamp, margin-block, margin-block-start, @media (prefers-color-scheme: dark), &:, ::before, ::after, grid-template-columns, margin-inline, dark mode, and a lot more

GitHub

• How to upload my project
• How to setup GitHub Pages
• It can’t pre-process SCSS RIP (thanks Chat GPT)
• When I change the SCSS, I need to upload the new SCSS + CSS files onto GitHub, or else the site won’t change because CSS styles the HTML.

Netlify

• How to connect my GitHub to Netlify (super easy)
• How amazing & quick Netlify is

Something you love

This is so important.

Building an article about anime has been on my list for so long. And it’s DAMN COOL to see it come to life.

It’s what drove me to finish and share it with the world.

It feels different when you build something you genuinely love/are passionate in

I had way too much fun building this site. And I would highly recommend you to

Just build what gets you excited 🔥

Chat GPT is very helpful

For this site, I did not ask it to help me write code.

Instead, I used it more to explain concepts to me. And it was very helpful.

Helpful Resources

Here is a list of helpful docs/resources:

Accessibility

• WebAIM's WCAG 2 Checklist
• Web Accessibility (Google)

Front-end dev

• CSS-Tricks
• Mozilla Docs

Examples

• Great Typography with Modern CSS
• Typography Manual

What’s next?

Right now, I have a few projects in my backlog.

They may not be the “flashiest” things to build.

But I'm SO EXCITED to build them.

As a designer, it has always been my dream to build whatever I design.

And now, I'm one tiny step closer to that. More dev logs will be published!

And that’s a wrap!

Thank you for being awesome and reading this far! :)

If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!

‍