The Fujoshi Guide to Web Development
LightNews LightNews
banner
fujoweb.dev
The Fujoshi Guide to Web Development
@fujoweb.dev
330 followers 2 following 110 posts
FujoGuide brings everyone (but above all, hobbyists) the useful programming tools trusted by professional programmers. With our fun and engaging guides, you too can boost your coding skills to match your dreams!

www.fujoweb.dev
Posts Replies Media Videos
Reposted by The Fujoshi Guide to Web Development
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.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.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
Reposted by The Fujoshi Guide to Web Development
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
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...
- 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 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.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...
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 PART 3: Buttons, States, and Hover Effects - 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 - 17. Combining selectors for… - 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
November 14, 2025 at 10:39 PM
Reposted by The Fujoshi Guide to Web Development
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.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.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
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
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 * 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. Reusing values with custom properties * - 03. Creating a single-column layout * - 03.a Setting the width of the column * - 03.b Centering the column inside its parent * - 03.c Stretching the column vertically * - 03.d Making elements flow vertically * - 03.e Centering the content inside the column
November 10, 2025 at 9:53 PM