Preparation (Part 1) – Content Prep

Sakura, Syaoran, Kero
© 1996, 2016 CLAMP/Kodansha.

Welcome to the first part of my new work-in-progress tutorial series, Let’s Build Projects (LBP). I have mentioned about this series not too long ago and the plans that I have on how I’m going to approach this portion. We will be covering a lot of new techniques and approaches that not very many hobbyist web designers/developers are keen of, and maybe in the future that these new introductions to these new tools and techniques may inspire them to use these for their future projects (and yours, too!).

As mentioned in the previous post, I will be building a shrine dedicated to my most favorite manga/anime couple of all time, Sakura Kinomoto and Syaoran Li from the manga/anime series Card Captor Sakura. The site’s name is Cherry Blossom, Little Wolf (CBLW). More information on the tools that I will be using to build this site is also mentioned in the previous post. We will begin now with the early process of shrine building. (My way, anyway.)

So, what are we waiting for? Let’s start!


Before we begin, there will be some requirements and prerequisites that you should be aware of if you decide to follow along and build your site using these techniques also. There are plenty of tutorials all over the internet that covers the most basics of website building if you are brand-new to website building in general.

I will be using a lot of web development terms, which is why this prerequisite is important. I normally add footnotes on my blog posts, but for the sake of this LBP, I won’t be adding any sidenotes.

The following prerequisites are required. Some are recommended also.

  • Solid knowledge of HTML and CSS, preferably some understanding of HTML5 and CSS3.
  • (Recommended) Basic knowledge of the command line/console. If you are kind of old school like me when it comes to PCs back in the ’80s and early ’90s, you’ll know what I mean. (familiarity with MS-DOS anyone?)
  • Solid knowledge of graphic design and manipulation, whether you are using Adobe Photoshop, Canva, GIMP, or any graphics program of your choice.
  • Because we are using a static site generator to build this site, you also need to have some understanding of Markdown. I’ve already completed my first tutorial of Markdown not too long ago, so please do check it out.
  • Solid grammar, spelling, and punctuation for your content. You do not want to put up a website with text that the general user would be having a hard time understanding. This, of course, includes proper names.
  • (Recommended) Familiarity with CSS frameworks, such as Bootstrap. If you’re familiar with Materialize CSS, that’s even better!
  • (Recommended) Some familiarity with Git/GitHub.

And now, on to the preparation process!

#1 – Gather all the sources!

Some designers/developers prefer building their visuals first before they deal with the content, but as for me, it’s a whole lot easier to gather and prepare all the content I need for the site. Based on my intended content out of these sources, ideas for the visual presentations will come flowing. That will be taken care of in a later process.

So far, here are my sources (the ones I currently own) to build the CBLW shrine:

  • Card Captor Sakura manga series – My sisters and I collected all 12 volumes of the manga series in the last decade. Because my middle sister took all the 12 volumes to her new house with her hubby, I decided to purchase the Kindle versions of the reprinted CCS manga omnibus and probably just take screenshots of the manga pages instead of scanning them directly.
  • CCS Cheerio! TV Illustrations collection – I own all three volumes of the Cheerio! art books. Unfortunately, they’re stored somewhere in our backyard toolshed and I can’t find them anymore. I’ll have to dig deeper when I have the time.
  • CCS: The Clow Card Chapter Artbook – Same as my Cheerio! books, stored in the toolshed.
  • CCS: Complete 2 Artbook – … and so is this book. This isn’t so much so I can scan the images here, but more of gathering information (in Japanese) regarding the TV series synopsis and other goodies. Again, it’d be a good refresher for me and my Japanese.
  • CCS Movie 1 & 2 – If needed, for the screenshots. I doubt that I would be needing any screenshots, since I don’t really plan on having a “gallery” section. I’m more of the literary art, so to speak, but they’re still good references.
  • CCS 20th Anniversary Artbook – I don’t have it yet, but I will eventually, once it arrives at my doorstep. If I fail to find those previous art books, this one will make up for them.
  • Google Search – No, I’m not using this to find and steal fanart, but I’m on a search for any existing CCS-related shrines and fansites in there, just in case I may have any oversight on the current sources that I have, and of course, for future linking.

#2 – Brainstorm your content

I began brainstorming already when I opened a GitHub repository of this site. I still have yet to fine-tune the “extras” portion for the shrine. I do plan on writing commentary and essays regarding the subject, but I also plan on adding some extra (or maybe interactive?) stuff when possible. That portion will be a challenge. The brainstorming part will be regularly updated on the of the repository instead of writing all about the content here.

Besides, this is a surprise, and surprises aren’t meant to be revealed until it’s ready.

#3 – Compose what you know about the subject

This should be the easy part. I already got the sources that I own, so I write the facts about the series and the subject in particular, such as profiles, likes/dislikes, their personalities and attitudes, their relationships, and so on and so forth.

#4 – Compose all the “extras” that you feel is ready to go

Websites are never finished. We always kept updating and updating with new content anyway. I would launch up the ones I’ve already have. Those I still don’t have, I would leave it out for the time being or make a few notes that says Coming Soon! in them.

#5 – Compose the introduction message

This has always been the hard part for me: writing an introduction message on the first page of the site. Why? Because this will be the hook and the call in action part of a shrine. You want to have your viewers hooked with your shrine and the subject in question, and you want to be sure that they return to your shrine again and again, especially when you update with the new stuff.

#6 – Deal with the “non-related” stuff later

Links to other sites, link buttons, and all that other extra not-quite-related stuff last. Long story on this one.

And that’s it for the content prep!

We are still in the preparation process of this LBP, so stay tuned for Part 2 of the Preparation stage! Thank you for visiting!