Devlog #1: Anime
Journey & learnings of building a anime article from scratch
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:
Now, I don’t want to bore you with the details. So here are the high-level steps I took to build this site:
Wrote out the article in Notion
Exported all the images and then compressed them with TinyJPG
Remembered what Mike Mai said about web accessibility
Wrote the entire semantic HTML first (ZERO styling)
Installed Live Sass Compiler & Live Server on VSCode
Styled the page using SCSS (compiles into CSS)
Imported the folder onto GitHub
Tried to use GitHub Page but failed because apparently, GitHub Pages can’t precompile SASS on its own
Opened up a Netlify account and linked it up to my GitHub repo
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:
Resize all the images to what I imagine the actual size will be
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:
Build
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
Front-end dev
Examples
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!