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:
Now, to make this fun, I decided to fully embrace one of my passions.
And so, I build a blog about anime.
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!
“Anime” is a simple blog article that shares everything anime-related about me.
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:
Now, I don’t want to bore you with the details. So here are the high-level steps I took to build this site:
Let’s talk about the learnings. There are quite a few.
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:
With this article, I had a lot of images. Thus, here’s what I did:
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.
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.
Note: there are two parts to this:
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:
aside, article, target=”_blank”, skip link, landmarks, ul, ol
@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
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 🔥
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.
Here is a list of helpful docs/resources:
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!
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!