FujoCoded LLC – A better web, together
LightNews LightNews
banner
fujocoded.bsky.social
FujoCoded LLC – A better web, together
@fujocoded.bsky.social
610 followers 2 following 420 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
Let us know if anything goes wrong 🙏 as you've likely seen, it getting this working was AN ADVENTURE
November 20, 2025 at 12:31 AM
Reposted by FujoCoded LLC – A better web, together
elendraug.bsky.social
You can do it!!! I helped work on this and I think this learn-along is going to help me, too
November 20, 2025 at 12:27 AM
Reposted by FujoCoded LLC – A better web, together
acearohanda.bsky.social
i keep putting off making my own website bc i get overwhelmed so easily but i have bought this pack in hopes~
November 19, 2025 at 11:31 PM
fujocoded.bsky.social
We hope this help 🙏✨ if you end up needing more support, please do reach out directly!

We have a few extra things planned to help specifically with this. It'll take some time to build up to them, but it's nice to a) learn from people who need them in practice b) build with someone in mind :)
November 19, 2025 at 11:41 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
a young boy is standing on a chair in front of a classroom full of children .
Alt: a young boy is standing on a chair cheering in front of a classroom full of children .
media.tenor.com
November 19, 2025 at 3:57 AM
fujocoded.bsky.social
[[Shipping intensifies]]

bsky.app/profile/fujo...
fujocoded.bsky.social FujoCoded LLC – A better web, together @fujocoded.bsky.social · 1d
It's time to (soft) ship! 🚢🚢

Only one thing left to soft ship our digital pack, and that's... shipping it! If you got it back in April, you'll soon receive your hot-off-the-presses HTML/CSS/JS learn-along preview!

And if you haven't bought it yet..... now is the time! Price goes up in 24hrs!! 👇
todo list for week 4 (todo): everything related to packing up the pack. The reviewers and readme work is done, now it's missing the shipping. 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. 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 19, 2025 at 1:45 AM
fujocoded.bsky.social
And now, onwards to the full launch on Black Friday!

With the pack done, it's time to spruce up our store page, wrap up the wallpapers, put in the website goodies, and get all the ready for our launch party 🎉👯🎊

You can help us by buying 🛍️☝️ & boosting 🔄👇

bsky.app/profile/fujo...
fujocoded.bsky.social FujoCoded LLC – A better web, together @fujocoded.bsky.social · 1d
It's time to (soft) ship! 🚢🚢

Only one thing left to soft ship our digital pack, and that's... shipping it! If you got it back in April, you'll soon receive your hot-off-the-presses HTML/CSS/JS learn-along preview!

And if you haven't bought it yet..... now is the time! Price goes up in 24hrs!! 👇
todo list for week 4 (todo): everything related to packing up the pack. The reviewers and readme work is done, now it's missing the shipping. 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. 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 18, 2025 at 10:58 PM
fujocoded.bsky.social
Thank you to those who have cheered us on, shared our posts, and purchased a pack already! Your support means everything to us. 🩵

Thank you to those who donated their time, energy, and knowledge to this project. 💜

This pack is a product of so much love and effort, and we hope you all enjoy it! 💖
November 18, 2025 at 10:55 PM
fujocoded.bsky.social
If you love coding and fandom, or are coding-curious, this pack was built from decades of experiences & hand-tailored to be beginner-friendly. It tackles what we see *real* people struggle with!

We KNOW coding can be daunting. We BELIEVE it doesn't have to be!

store.fujocoded.com/products/oth...
Fandom Cookies — Digital Items Pack (Preorder Item) | The FujoCoded Store
What's this? A special, exclusive surprise for the brave cookie collector!? This pack contains (at least) 3 digital items: Cootie Cookie Catcher Fortune Generator HTML/CSS/JavaScript learn-along Assor...
store.fujocoded.com
November 18, 2025 at 10:55 PM
fujocoded.bsky.social
We've sung our pack's praises for weeks, and can't wait to see you all sing them instead—like those who already read it 👀

Inside you'll find:

- A full on HTML/CSS/JS course
- Wallpapers & website goodies
- ...free shipping coupon!

All for just $5 (for now) 👇

store.fujocoded.com/products/oth...
original_1763505820002_0361wmbi6 - 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 18, 2025 at 10:55 PM