Lightnews — Scholar-powered news

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

It's -2 days!!! 💖💖🛍️🙏

Get yours at our special price if you haven't yet!

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

November 26, 2025 at 7:32 PM

The Fujoshi Guide to Web Development

@fujoweb.dev

Check this pack out before it increases in price 👇 no hot fictional men (this time), but a ton of fun fandom-based fortunes to carry you to your webdev dreams 💖

FujoCoded LLC – A better web, together @fujocoded.bsky.social · 1d

🚢 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 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 11:31 PM

Reposted by The Fujoshi Guide to Web Development

Ms Boba (rebuilding community era)

@essentialrandom.bsky.social

Was going to stream work on the store for Friday's launch but my cat bit me as I fought to remove a waffle from her mouth, so it's off to get antibiotics instead!

Anyway, buy our HTML/CSS/JS learn-along pack so I don't feel bad about missing a day of promo 😘👇💖

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

November 24, 2025 at 10:37 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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...

November 21, 2025 at 9:24 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

For the curious, join us in a couple hours to chat about the pack as we fix up our store👇time to bug bash!

- stream.place/essentialran...
- www.twitch.tv/essentialran...

(*re: free shipping code, 100% free for USA, looking at options for international. We'll have store savings for everyone, dw 😉)

@essentialrandom.bsky.social's livestream on stream.place

Digital Pack (soft) Release Showcase — Let's Pack it Up!

stream.place

November 20, 2025 at 9:53 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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...

November 20, 2025 at 9:53 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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...

November 20, 2025 at 9:53 PM

The Fujoshi Guide to Web Development

@fujoweb.dev

catching up with discord messages before opening the store admin panel to go up the price 👀

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

November 20, 2025 at 8:01 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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

Reposted by The Fujoshi Guide to Web Development

Elendraug

@elendraug.bsky.social

I helped work on this!!! Please check it out if you've always wanted to make your own website (especially a prompt generator, but there's a lot of good starting points in here in general!)

FujoCoded LLC – A better web, together @fujocoded.bsky.social · 7d

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...

November 20, 2025 at 12:28 AM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@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

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

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.

November 18, 2025 at 10:55 PM

The Fujoshi Guide to Web Development

@fujoweb.dev

LIVE NOW!!! 🚨

Ms Boba (rebuilding community era) @essentialrandom.bsky.social · 9d

Come pack up the preview of the Learn-Along in our Digital Pack! with us

I'll showcase the learn-along, then we'll write a script to (among others) add an HTML version of our markdown files, auto-generate our table of contents, update the last updated date, and beyond!

Twitch link in thread 👇

November 18, 2025 at 12:08 AM

Reposted by The Fujoshi Guide to Web Development

Ms Boba (rebuilding community era)

@essentialrandom.bsky.social

See you later on stream to chat about (and witness) our digital pack while we... well... "pack it"!

- www.twitch.tv/essentialran...
- stream.place/essentialran...

FujoCoded LLC – A better web, together @fujocoded.bsky.social · 9d

It's TOMORROW!

With our learn-along back from reviewers, we're officially "just packing up". Next step, delivering the learn-along to the inboxes of those who bought it in April 🏃‍➡️📬

Buy it here for $5 before the price goes up: store.fujocoded.com/products/oth...

Final table of content below! 👇

todo list for week 3 (todo): everything related to packing up the pack. The reviewers and readme work is done, now it's missing the packing.

November 17, 2025 at 8:57 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

Here's our final table of content! For our (hopefully) last update, we've tweaked the CSS lessons to feature FOUR PARTS.

Not only this makes the later sections less overwhelming, but it allowed us to add extra content on accessibility issues 👀

Buy it here: store.fujocoded.com/products/oth...

PART 3: Pseudo-classes, Transforms, and Advanced Selectors - 09. Styling HTML elements by attribute - 10. Make radio buttons match our accent color - 11. Sizing elements to match the nearby text - 12. Aligning radio buttons with their labels - 13. Growing a flex child to fill the available space - 14. Styling the selected option with CSS pseudo-classes... - 14.a ...and turning its radio button 3D with filters and box-shadow - 15. Styling adjacent elements with the sibling selector - 16. Applying special styles on mouse hover - 16.a Embiggening or shrinking elements with the scale() transform * PART 4: Interactions, Effects & Responsive Media Queries - 17. Combining selectors for more specific targeting - 17.a A cascade of fallback values with CSS variables - 17.b Using your mouse pointer to hint at interactivity - 18. Effects galore: scale 'em, rotate 'em, and change their color! - 18.a Temporarily changing custom properties on hover - 19. Styling elements on interaction with the :active pseudo-class - 20. Accessible keyboard navigation with :focus-visible - 20.a Using "outline" to draw floating borders - 21. Media queries to the rescue: styling for different screen sizes - 22. ...and styling for different abilities *

November 17, 2025 at 8:37 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

It's TOMORROW!

With our learn-along back from reviewers, we're officially "just packing up". Next step, delivering the learn-along to the inboxes of those who bought it in April 🏃‍➡️📬

Buy it here for $5 before the price goes up: store.fujocoded.com/products/oth...

Final table of content below! 👇

November 17, 2025 at 8:37 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

...you still have some time to buy our HTML/CSS/JavaScript digital pack at the literal-steal-we-swear price of $5, before it increases after our imminent soft launch.

Check out the table(s) of content for our "random generator" learning pack👇🖼️ and buy it here👇🔗💖

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

November 14, 2025 at 10:39 PM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

An upgrade we'll release later uses a form with a submit event + preventDefault instead of button + click, and splits strings on "\n" + createElement + appendChild instead of innerHTML with <br> tags. This type of progression leaves people space to grow at their pace, while still learning "real" JS.

November 16, 2025 at 12:42 AM

Reposted by The Fujoshi Guide to Web Development

FujoCoded LLC – A better web, together

@fujocoded.bsky.social

Thank you! There was a lot of thought put into balancing "this is how you'd do it for real" with "this is a broadly useful technique" with "this does not require a lot of more advanced knowledge to get started with".

November 16, 2025 at 12:31 AM

Reposted by The Fujoshi Guide to Web Development

Elendraug

@elendraug.bsky.social

@fujoweb.dev has just the thing 👀 learn.fujoweb.dev/quickstarts/...

Terminal: Introduction

A very quick introduction to the terminal: what it is, what it does, and how to open one.

learn.fujoweb.dev

November 15, 2025 at 4:23 AM

Reposted by The Fujoshi Guide to Web Development

Ms Boba (rebuilding community era)

@essentialrandom.bsky.social

The new split (paired with reordering individual rules to build a better progression and narrative) really helps create those very important natural breathing—and sometimes skipping!—points.

You can't keep flexbox from being a meaty chunk to digest, but you can set a nice table (of contents)

The start of the guide to display flex:

### 04. Single-column layouts pt.2: arranging and aligning content ###
*
Now that our column is positioned as it should, it's time to style its
content. In this section, we'll learn how to use "flexbox" (also known as
"display: flex") to arrange and align the elements inside a container—in
this case, our <main> column itself.

November 10, 2025 at 9:53 PM

Reposted by The Fujoshi Guide to Web Development

Ms Boba (rebuilding community era)

@essentialrandom.bsky.social

For example, here you can see the difference between the Table of Content for the CSS pt.1 after yesterday's revision vs when I started. While the content was already written, the order and progression of the topics felt overwhelming—partly unavoidable, since it's *a lot* of important concepts.

PART 1: Single-column Layout
- 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
- 01.d Defining a responsive font size
- 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

November 10, 2025 at 9:53 PM

Reposted by The Fujoshi Guide to Web Development

Ms Boba (rebuilding community era)

@essentialrandom.bsky.social

Haven't been keeping people *quite* as informed about progress on this as I intended for our ~accountability push~ 💪🌟, but in my defense this is what the more accurate todo list turned out in practice

...but it's also a perfect representation of the level of care put in the learning experience 👩‍🏫✨

The todo list for the let's get cookie-ing initiative, replaced with a list of 5 "CSS lesson pass" todos.

November 10, 2025 at 9:53 PM

Add to Home Screen

Light up
your news

Add to Home Screen

Light upyour news

Sign in to Lightnews

Sign up to start reading

Connect Bluesky

Connect with Bluesky

Light up
your news