FujoCoded LLC – A better web, together
LightNews LightNews
banner
fujocoded.bsky.social
FujoCoded LLC – A better web, together
@fujocoded.bsky.social
630 followers 2 following 490 posts
Empowering fujin and other online subcultures to shape their web through software, education, and community collaboration.

Support us @
📈Patreon: https://www.patreon.com/fujocoded
🛍️Store: https://store.fujocoded.com/
Posts Replies Media Videos
fujocoded.bsky.social
With YOUR support we can pay key roles AND have space to grow volunteers!

Help us get fandom working together for a better fandom...web ✨

-💰Project Manager [PAID part-time] (forms.gle/tRwvwFHcBjAp...)
-🙏BobaBoard Volunteer Coordinator (forms.gle/SmFv19hmamKV...)
-🙏FujoGuide Beta Wrangler (DMs 👀)
A screenshot of the "collaborate with us" section of the FujoCoded update. It's long and won't fit, so you can find read it in full on the update itself.
December 24, 2025 at 12:18 AM
fujocoded.bsky.social
BUT! The [Wallpapers Dream Team ✨🖼️✨] is also.... the [Website Goodies All-Stars ✨🛠️✨]!

Ever wanted to cookie-theme your website 🥠 but didn't have the raw—or is it cooked?—materials? Never fear ✨

Art by (again)
- @ymkse.bsky.social
- @chyenhyen.bsky.social
- @fluffyburns.bsky.social
December 2, 2025 at 11:59 PM
fujocoded.bsky.social
[Wallpapers Dream Team ✨🖼️✨]

Hailing all the way from our OG 🥠 Real Cookies™ 🥠 drop, the amazing artists that lent their flair to our site can now do the same for YOUR screens too! 📱

🎨 Meet (and admire the work of):

- @ymkse.bsky.social
- @chyenhyen.bsky.social
- @fluffyburns.bsky.social
A compilation of various wallpapers for the project, on various devices and screen sizes. They include: * Boba-tan fleeing with cookies in hand against a background of fortune cookies * A huge pile of fortune cookies and fortune scrolls against a repeated pattern of Boba-tan and small fortune cookies. * A red "Fandom Cookies" banner with fortune cookies on either side of the text, one of which Boba-tan is sitting on. The stamp above it says "Raccoon Express, Fujin Kitchen" and below the text it says "Kinda Vanilla", "Chocolate Doves", and "Lemony Prompts" * A repeated pattern of the Raccoon Express stamp in various sizes * Boba-tan holding a fortune cookie to her mouth in front of repeated banners alternating between fortune cookies, the words "fandom cookies", and the flavour list. A credits page. Art credits as follows: Raccoon Creature and Cookie Eater - Hyena Cookie-xplosion, Cookie Run(away), Boba Prophet, and art direction - ymkse Cookie Get! - Fluffyburns Programming credits as follows: General Coding - Ms Boba and Riazaia CSS & Design - CatBathingSun Extra credits as follows: Alt Text - Elendraug, Big Naturals, Jaffa6 Extra Hands (and Brains) - enigmalea, Yuu, Secret Final Boss General Support - Our FujoVerse™ Friends
December 2, 2025 at 11:36 PM
fujocoded.bsky.social
Of course, for you all to shower our pack with love, someone had to help us, well...pack it 🎁

We haven't showcased it as much, but this pack comes with a set of wallpapers and website goodies commissioned from amazing fandom artists.

Let's start there then: time to meet 'em (then 'em all)! ⏰🙌👇
A screencap of the Fortune Cookie learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is set of wallpapers and cookie icons, plus a free shipping sign.
December 2, 2025 at 11:36 PM
fujocoded.bsky.social
But first, numbers:

Between the pre-order campaign and the April 1st giveaway, we've put our digital pack in the hands of OVER 120 OF YOU! 😮

This is—to put it the best way one can—"such woah." We're flattered and humbled by the reception of this experiment. ⸜(｡˃ ᵕ ˂ )⸝✨

TYSM!! 💖💕😭
A bar chart showing the number of items sold, with a grinning Boba-tan holding a glowing parcel aloft . There is a total of 125, with two peaks in April and a larger number of smaller peaks in November/December. The largest peaks are for 59 sales in April and 55 in november and the smaller peaks range from 1-5 sales.
December 2, 2025 at 11:36 PM
fujocoded.bsky.social
It's time: With the Official Weekend of Shopping™ behind us, let's send off our 🎉 Launch Event 🎉 our favorite way: by honoring those who brought you hours of entertainment, and—of course!—our Fandom Cookies Digital Pack.

(launch price until done honoring! 🤫)

store.fujocoded.com/products/oth...
A promo image saying "build your own fortune generator site with our learn-along, showcasing the logo of HTML/CSS/JS and "as seen on the web" $12.99 stamp A screencap of the Fortune Cookie learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is an image mimicking a webpage, with a yellow border, red columns on each side, and a cream background. Boba-tan, with a fortune cookie moustache, stands in the top middle. Below is a white text box with red border, saying "seek a fortune if you dare", and options for vanilla, chocolate, or lemon cookie flavors. White text with black outline reads: "Learn along as we build a fortune generator-- select a flavor, push a button, get a fortune!" Text below that outlines what is included: a centered single column layout; visual and practical interactions; pages, texts, and images where you want them, at any size, and more! Features are listed on the top right, with black text on a white text box outlined in black. Inside a black text field with white text, at the bottom right, there are more detailed features listed. These feature boxes highlight the approachable nature of the learn along, professional knowledge included, and customizable nature of the product.
December 2, 2025 at 11:36 PM
fujocoded.bsky.social
One last post missing to conclude this event! Get your special prices in-between now and when I (slowly 😘) get to finish it up.

And this GIVING TUESDAY, give to our Patreon, support the 🌐open fandom web 🌐, and get access to our special sale of yaoi paddles 👇

www.patreon.com/posts/cyberm...
A series of paddles scattered on the floor with writings like yaoi, yuri, or uke on top.
December 2, 2025 at 8:30 PM
fujocoded.bsky.social
Last 24(ish) hours! Buy our cookies pack and read all our fannish fortunes (and get a HTML/CSS/JS class, cool wallpapers, goodies for your websites, a free shipping code....)

store.fujocoded.com/products/oth...
Screenshot of a bluesky post readying "For folks who wish they could have read all the fortunes in our April 1st cookies, they're all inside our fortune generator pack! Nourishment for your body then, nourishment for your brain now 😌" and 2 fortunes inside "The comment you fear leaving may just be the one they've been yearning to read" and "Better one dead dove in the fanwork than two in the fridge"
November 30, 2025 at 7:24 PM
fujocoded.bsky.social
For folks who wish they could have read all the fortunes in our April 1st cookies, they're all inside our fortune generator pack! Nourishment for your body then, nourishment for your brain now 😌

store.fujocoded.com/products/oth...
prophet boba-tan says "The comment you fear leaving may just be the one they've been yearning to read" prophet boba-tan says "Better one dead dove in the fanwork than two in the fridge"
November 30, 2025 at 4:40 AM
fujocoded.bsky.social
Our DIGITAL PACK launched yesterday and is now on sale. And if you buy it (or bought it 😘), you'll automatically get 20% off a new chibi or hime FujoBoard as an extra thank you!

For a hime, that's more than the cost of the pack itself! 🧀❗🫶

Find both in store: store.fujocoded.com/products/oth...
FujoBoard ad
November 29, 2025 at 8:16 PM
fujocoded.bsky.social
Inside you'll ALSO find:

- 🖼️ Wallpapers crafted by fannish artists
- 🌐 Website decorations and backgrounds
- 🎡 A printable Cootie Catcher for that nostalgia factor

And... 🚢 A FREE SHIPPING CODE for our store (up to $30 value!)

store.fujocoded.com/products/oth...

But that's not all ⬇️
Come for the code... stay for the extras! Samples of what's inside the Extra Freebies for the Fandom Cookies Digital Pack: windows with code, windows with wallpapers featuring Boba-tan, and the paper fortune teller "cookie catcher" printable.
November 28, 2025 at 7:47 PM
fujocoded.bsky.social
At this point, the "Learn-Along" needs no intro! It's a:

1. 🛠️ Fully-functional interactive site that gives you your own fandom-based fortunes
2. 💬 Heavily commented code for beginners stepping up
3. 🎓 Way to learn modern HTML, CSS, and JavaScript while playing with real code!

But wait— 👀
An image highlighting the desirable features of the learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is an image mimicking two webpages, with yellow borders and cream backgrounds; excerpts from the learn along are within the windows in black text. White text with a black outline reads: "step by step, concept by concept, always in your language!" Black text with a white outline, and black arrows pointing to various parts of the learn along, reads: "Learn why, not just how. Explanations in plain english, with the technical terms you need! Level up at your pace with extra challenges!" The last line has an arrow pointing to text that reads "extra credit" and suggests adding a transform effect to a button being clicked, as a cool thing people can do to advance their coding knowledge. Modern code, practical interactivity, unique fandom flavor. Learn skills for all your
projects—workday or weekend! Get the common gotchas before they get you! Write code that reacts to your users. ...ditch the boring lessons,
embrace the world weird web!
November 28, 2025 at 7:47 PM
fujocoded.bsky.social
🎉 It's HERE & it's LIVE! 🎉

Our Fandom Cookies Digital Pack is now ready for immediate delivery 💨🛍️

For only $12.99 (LAUNCH SPECIAL), you can build your own fortune generator, decorate your devices, seek your fannish future...and get FREE SHIPPING.

Details👇🧵

store.fujocoded.com/products/oth...
A promo image saying "build your own fortune generator site with our learn-along, showcasing the logo of HTML/CSS/JS and "as seen on the web" $12.99 stamp A screencap of the Fortune Cookie learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is an image mimicking a webpage, with a yellow border, red columns on each side, and a cream background. Boba-tan, with a fortune cookie moustache, stands in the top middle. Below is a white text box with red border, saying "seek a fortune if you dare", and options for vanilla, chocolate, or lemon cookie flavors. White text with black outline reads: "Learn along as we build a fortune generator-- select a flavor, push a button, get a fortune!" Text below that outlines what is included: a centered single column layout; visual and practical interactions; pages, texts, and images where you want them, at any size, and more! Features are listed on the top right, with black text on a white text box outlined in black. Inside a black text field with white text, at the bottom right, there are more detailed features listed. These feature boxes highlight the approachable nature of the learn along, professional knowledge included, and customizable nature of the product.
November 28, 2025 at 7:47 PM
fujocoded.bsky.social
Well... now it's time to find out... almost 🥠👀

(I have no idea what will happen once the countdown goes out in 30m. Prayer circle I set up this store correctly 🕯️)

Last call if you want to find out with me: store.fujocoded.com/products/oth...
A screenshot from a digital launch website saying the digital pack we'll release in 30m
November 28, 2025 at 5:38 PM
fujocoded.bsky.social
...and it is out!!! (it has been for a while, but was busy with assembling the pack 😘)

There's a lot of subtle and less-subtle changes, but my favorite is that you can now clearly see the boundaries of our stickers.

Find it here 🎉
store.fujocoded.com
Before/after screenshots of the FujoCoded store. The left side shows the before, and the right side has the after, which now includes backgrounds and patterns behind the items and has improved spacing and alignment etc.
November 28, 2025 at 1:37 AM
fujocoded.bsky.social
Until Friday, you can preorder our learn-along for just $9.99! It's a great chance to treat yourself to some learning, and preload those new year resolution 😘

store.fujocoded.com/products/oth...

Find the Table of Contents in the images, and let us know if you have any question. Deep at work now 💪🙏
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 25, 2025 at 9:08 PM
fujocoded.bsky.social
🚢 Our learn along ship THIS FRIDAY!! 🚢

It's a fully-functional interactive site inspired by the cookies you all loved and tasted 🥠

But unlike the cookies, it is heavily commented and thoughtfully put together so you can learn modern HTML, CSS, and JavaScript as you play with it!

On sale NOW 👇🛍️
A promo image saying "build your own fortune generator site with our learn-along, showcasing the logo of HTML/CSS/JS and "as seen on the web" $9.99 stamp A screencap of the Fortune Cookie learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is an image mimicking a webpage, with a yellow border, red columns on each side, and a cream background. Boba-tan, with a fortune cookie moustache, stands in the top middle. Below is a white text box with red border, saying "seek a fortune if you dare", and options for vanilla, chocolate, or lemon cookie flavors. White text with black outline reads: "Learn along as we build a fortune generator-- select a flavor, push a button, get a fortune!" Text below that outlines what is included: a centered single column layout; visual and practical interactions; pages, texts, and images where you want them, at any size, and more! Features are listed on the top right, with black text on a white text box outlined in black. Inside a black text field with white text, at the bottom right, there are more detailed features listed. These feature boxes highlight the approachable nature of the learn along, professional knowledge included, and customizable nature of the product. An image highlighting the desirable features of the learn along. A white and grey circuit-board background, with a cream block in the center. Within the cream block is an image mimicking two webpages, with yellow borders and cream backgrounds; excerpts from the learn along are within the windows in black text. White text with a black outline reads: "step by step, concept by concept, always in your language!" Black text with a white outline, and black arrows pointing to various parts of the learn along, reads: "Learn why, not just how. Explanations in plain english, with the technical terms you need! Level up at your pace with extra challenges!" The last line has an arrow pointing to text that reads "extra credit" and suggests adding a transform effect to a button being clicked, as a cool thing people can do to advance their coding knowledge. Modern code, practical interactivity, unique fandom flavor. Learn skills for all your
projects—workday or weekend! Get the common gotchas before they get you! Write code that reacts to your users. ...ditch the boring lessons,
embrace the world weird web!
November 25, 2025 at 9:08 PM
fujocoded.bsky.social
Do you ever create an awesome HTML/CSS/JS course with TONS of thoughtfully-crafted content, then go "I know it's 6 DAYS to release, but what if I made it EVEN MORE awesome?" 🤡

Sometimes, one just has to. Just like *YOU* have to get it while it's ONLY $9.99 👇😘

store.fujocoded.com/products/oth...
todo list for final push: "Add last-minute extra that ties it all 
together and just must be there I swear" has been added.
November 22, 2025 at 10:41 PM
fujocoded.bsky.social
Onward with more polish (and content) as we continue to work up to the final launch NEXT (black) FRIDAY.

Check out the table of contents 👇 and get this $9.99 pack in our store!!

store.fujocoded.com/products/oth...
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 21, 2025 at 9:24 PM
fujocoded.bsky.social
And if you're curious about our progress on the store yesterday, well, let's just say any good polish up starts with a good refactoring...

But with some hyperf—I mean, dedication, extra progress was made offline. Not final, but a better showcase of our beautiful merch already!

[🖼️ before/after]
Fujocoded store, white bg, can't see stickers outlines Fujocoded store, purple cute bg, can see stickers outlines
November 21, 2025 at 9:24 PM
fujocoded.bsky.social
ONE week to go, and ONE last chance to pre-order our HTML/CSS/JavaScript learn-along at the bargain price of JUST $9.99!

Treat yourself to a thanksgiving weekend of learning 🦃 or just pre-plan a treat for your new year resolution 😘

Get it in store!!

store.fujocoded.com/products/oth...
A promo image saying "build your own fortune generator site with our learn-along, showcasing the logo of HTML/CSS/JS and "as seen on the web" $9.99 stamp
November 21, 2025 at 9:24 PM
fujocoded.bsky.social
Wallpapers and Website Freebies feature exclusive artwork we commissioned from amazing fandom artists—make the fandom economy go round for JUST $9.99!!

And if you're joining us now, check out the TOC of our HTML/CSS/JS learn-along, the shining 🌟 of this pack 👇

store.fujocoded.com/products/oth...
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 20, 2025 at 9:53 PM
fujocoded.bsky.social
Soft launch phase is now over! 🥳

With the HTML/CSS/JavaScript learn-along out for feedback, we'll focus on wrapping up the rest of our digital pack: wallpapers, website goodies, and an exclusive FREE SHIPPING* code for the rest of our store!

Only $9.99!! 😘

store.fujocoded.com/products/oth...
original_1763674701015_ckaj9x4oy
November 20, 2025 at 9:53 PM
fujocoded.bsky.social
Please also witness our learning guide 🪴🎓 if you thought "wow, they sure seem to be putting A LOT OF TIME into this pack", this 👇 is (also) why—it shows how much we care!

As said before, we know learning to code can be scary; we believe it doesn't have to be!

store.fujocoded.com/products/oth... 👈🛍️
Not sure where to start? While there's as many learning paths as there are readers, here's some advice to help you find your way to learn! In this file... About this Learn-along General Tips When in Doubt, Ask for Help 🫴💖 Finding your Learning Path 1. I want to fully understand the ins and outs! Our advice 2. I want to build something similar Our advice 3. I want to level up my CSS or JS skills Our advice 4. I want to learn specific techniques Our advice 5. Actually, I'm not sure what I want... Our advice Still stuck? Final Thoughts About this Learn-along This learn-along is made up of three heavily commented files that work together to create an interactive webpage. On this page, which features a responsive single-column layout, the user can click a button to get a randomly chosen fortune among 3 different sets. The main files are: learn-along.html — The structure learn-along.css — The styling learn-along.js — The interactivity The code you'll find inside is complete and fully working. You can learn by following along the comments to explore, experiment, and understand how everything connects. If you wish, you can jump around between sections and files, and tackle them in the order you prefer. Each file also contains multiple [[EXTRA CREDIT]] callouts, which are optional hands-on exercises or starting points for deeper exploration. In addition to using them to learn along, the files are structured to serve as a reference for building or styling your own sites. The table of contents at the top of each file is provided to quickly help you find the right section for what you seek to accomplish. Finding your Learning Path Prophet Boba-tan may know your fannish future, but this learning journey is yours to walk. So, what brings you here? I want to fully understand the ins and outs! I want to build something similar I want to level up my CSS or JS skills I want to learn specific techniques Actually, I'm not sure what I want... 1. I want to fully understand the ins and outs! If you're a linear learner who likes to dive deep and build their knowledge comment by comment, we recommend you follow the basic path: Start from HTML to understand how the page is structured Move on to CSS and see how the page is styled Dive into the JavaScript section and learn what happens when the button is clicked Since the CSS and JavaScript learning paths are independent, you can also choose to tackle them in a different order or jump across as your fancy strikes. For example, you might look at how to build a responsive single-column layout, experiment with JavaScript, then move back to finish the other CSS sections! Our advice Read each section thoroughly, fiddle with the code, and see how the page changes. Take breaks between sections and experiment with your own pages. Tackle those [[EXTRA CREDITS]] that jump out to you as you learn, but feel free to leave some to do later at your leisure. 2. I want to build something similar If you're looking to get your hands dirty (either by building your own generator site or your own CSS layouts), we recommend you: Get the lay of the land by skimming all 3 files and finding the sections related to your project Play around with the existing code in the relevant sections to understand how it works and what to "lift" Build your own site from scratch, using this learn-along as a reference Our advice
November 19, 2025 at 9:32 PM
fujocoded.bsky.social
IT'S OFFICIAL! As of a couple hours ago, our digital pack preview is in the inboxes of April buyers 🎉

If you're among them, we'd love and cherish your feedback 🙏💖 What was good? What was less so? Help us make it 👇 the BEST RESOURCE 🆒🎓

Only $5 until tomorrow!!

store.fujocoded.com/products/oth...
Fandom Fortune Generator — Prophet Boba-tan's Learn-along Note: For the best reading experience, use a markdown viewer or open README.html (inside _README_html/) in your browser. If reading this file in a plain text editor, you may see some unusual characters—this is normal for markdown files! Thank you for purchasing the Fandom Cookies Digital Pack! This folder contains an exclusive reward: a "random generator" website inspired by our April 1st 2025 "Fandom Cookies" event, featuring heavily commented code that will teach you many useful not-so-basics of HTML, CSS, and JavaScript! A screenshot of prophet boba-tan, inviting you to seek a fortune In this file... What you'll learn What you'll find In this folder In the code/ folder What you'll need Getting started Quick learning tips [⚠️ CONTENT WARNINGS ⚠️] Learn more with us... ...and connect! Brought to you by... Learn-along Art Extra What you'll learn In this learn-along, you'll explore all the nitty-gritty details of how we built this website, from creating single-column layouts using modern CSS to making pages that respond to user input, both with visual effects and interactive functionality. By the end, you won't just have a solid foundation of professional, modern web development knowledge, but a practical reference to return to whenever you need help building the website(s) of your dreams. What you'll find In this folder This folder includes a few (optional) files to help you through your learning journey: README.md — this file, with high level guidance LEARNING_GUIDE.md — in-depth guidance and suggestions on how to approach this tutorial CONTENT_WARNINGS.md — in-depth guidance on content warnings for each cookie flavor If you wish to read these files with proper formatting directly in your browser, you'll find a .html version of each inside the _README_html/ folder. In the code/ folder Inside the code/ folder, you'll find the main content of our learn-along: learn-along.html — sets up the HTML structure learn-along.css — styles the page with CSS learn-along.js — selects and displays a random fortune with JavaScript reset.css — A CSS reset for consistent styling across browsers images/ — Our adorable Prophet Boba-tan art ...and some extra files to aid you in your learning mission journey: _with_short_comments/: this folder contains a version of the HTML/CSS/JS files with shortened comments, which only include the table of contents and the more technical explanations. Check it out for a "bird's-eye view"! _with_syntax_highlight/: this folder contains one HTML page for each file in the learn-along, and renders its code with proper syntax highlighting. If you don't have a code editor with this feature, it's a great tool to make the code easier to read—especially on the go!
November 19, 2025 at 9:19 PM