#best css tutorial

[tpointtech1]

CSS Tutorial for Beginners: No Code Needed!

This infographic provides a visual CSS tutorial for beginners, breaking down core concepts such as selectors, properties, values, and the box model. Learn how to style text, layout elements, and manage spacing with margin and padding. Perfect for those new to web design, it simplifies styling basics into easy steps to help you build beautiful, responsive web pages with CSS.

CONTACT INFORMATION

Email:  hr@tpointtech.com

Phone No. :  +91-9599086977

Website:  https://www.tpointtech.com/css-tutorial

Location:  G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[inorganicorgan]

Web design is my passion

[thesovereignsring-if]

Hello! Your IF story inspired me to start my own IF game

Im thinking of using twine

And I would like to ask you if you had any tips or advice

Thank you!

Also side note I’m really excited and very interested in how this story is going to play out I already love the cast and can’t wait to see the rest!

OOoo thank you so much! I'm very flattered the game inspired you!

Twine has many different story formats, each with their own pros and cons. I personally use Sugarcube (I think next to Harlow, it is the most popular) so all my tips will be for Twine Sugarcube:

Basic tips:

Bookmark the Sugarcube V2 Document. This is your bible. It will have everything you need to use Twine. It's a daunting read, but I use it to troubleshoot when I forget how Macros work. I always have tab open for it.

Download a Twine Template. If you are brand new to Twine and making IFs, I heavily suggest downloading a template or two. Most of them come with tutorials and examples on how they work. Sometimes they even provide more helpful resources on Twine. I use Vahnya's Template II that I modified myself afterwards.

Study from pre-exisiting Twine IFs. Might be controversial, but I personally believe that diving in and seeing how other authors code and structure their stories helps a lot. Eventually you'll figure out a system and structure that works for you. It might not work for all games, but most Twine games can be downloaded and opened up in the twine editior. If you're worried about spoilers or upsetting people, feel free to download my game and see whats inside. I make multiple copies of the game, so any build I have out in the public is not the original build and therefore have no spoilers. I know it will look insane when you open it, but there's a method to the madness.

Writing and Planning:

Making an IF is no joke! Plan your story out, know your big variables, your branching routes and at least some part of your ending!! Try to stay as organized as possible. These projects and can will spiral out of control if you're not careful. I suggest having a giant excel sheet with tabs for important variables, chapter/scene breakdowns, wordcount and characters ect. Updating it will be a pain (that I am guilty of not doing) but will make developing easier. Even if you don't make a big project, its still good practise to do it.

#Stylesheet:

All the code in here relates to how the game looks. You can fiddle in there to configure the game to look how you want it to look. If you even want to see what element is tied to what ID code, the best thing to do is playtest the game (build >> play) and then leftclick and select "inspect element" you browser will open up the developer window and you see what elements are tied to what and even play around with the contents to test out CSS elements you like.

This website is a great resource on using CSS and other coding language. I personally used it many time to modify my game.

Helpful resources and Macros:

Chapel has made a LOT of custom macros that you can add to your game. You can find the list here.

But the most important one is the Pronoun Template. It might be confusing at first but one you understand how it work, its a great tool to have. You can even add gendered titles so that they work with the pronoun template.

Idrellegame is a great resource on coding in Twine. You can find the list here. It helped me out when starting out.

Exporting to Itch:

I never see people talk about Butler when it comes to uploading If games onto itch.io, so i'm doing it now.

What is Butler? Its a command-line tool that Itch made to upload your game onto Itch.io quickly and reliably.

The documentation is here. And I suggest coping and pasting the export codes onto a doc so you can use them for every update afterwards.

Here is a youtube tutorial you can follow along as well: https://www.youtube.com/watch?v=_JCJa5iWREM

I personally have the Butler on the Itchio.app so that's its always up to date.

Thats all I can offer off the top of my head, if you or anyone wants some help on something specifically, feel free to DM me or drop another ask in the inbox. Always happy to help. Working in twine is very overwhelming for newcomers.

[magicbeings]

How I added "instant translation" to the non-english text on my fic: a very easy 3 step guide

Hello!

I recently posted a Wolfstar fanfic called Instance of Happenstance and received a lot of compliments on a small piece of code I used. Both @marigold-hills and @leavesthatarebrown suggested I share how I did it, so here I am, finally explaining it in a Tumblr post!

Before diving into the details, I want to clarify that I didn't write this code myself.

Initially, I tried following this tutorial, but I stumbled upon a better solution in the comments of that post. The code on the tutorial itself does work, but a) it's harder to use and b) it doesn't work as well if you're planing to have multiple paragraphs that you need to show the translation on the same fic.

The solution someone presented on the comments, however, is very simple and easy to use for as many paragraphs as you need, but the explanation there wasn’t too clear, so I decided to expand on it to make it easier for others to implement.

All credit to Ao3 users La_Temperaza (who wrote the orginal post) and Nikkie2571 (who posted this code on the comments).

What Does This Code Do?

This code adds an interactive feature to your fanfic, allowing readers to hover over a specific paragraph (or tap on it if they’re on mobile) to instantly change the text to something else — also set by you.

While this can be used for various purposes, I think it's particularly useful to display instant translations of non-English dialogue/text directly in the story. The code offers a much smoother alternative to the clunky “see end notes for translation” thing—which, let's be honest, can be a pain for readers, especially in long chapters.

For example, in instance of happenstance, Sirius discovers an old journal written entirely in French. I wanted to maintain the sense of mystery and intrigue that would be lost if I simply said the journal was in French, but wrote the text in English.

This solution let me keep the best of both worlds—retaining the authenticity and the immersion of the French, while still making the story easy to follow for the readers.

Now, I know this sounds complicated, but I assure you, it's not!

Down bellow is a quick, 3 steps tutorial on how to do it. I hope this is helpful! (:

(I'm doing this on the computer, if you're doing it on mobile, the layout of the website might be different from my printscreens)

Step 1 - Create The Work Skin

I'm gonna go right to the point here, but if you want to know about Work Skins in detail, I suggest this Ao3 Article.

On your Ao3 Dashboard, click on the fourth link on the sidebar, which is "Skins".

Then, on the page that opens up, click on "My Work Skins"

Then, on the top of the page, select "Create Work Skin"

Now, you'll see the form to create your skin, which looks like this:

Leave the "Type" as "Work Skin". On the Title, you can give any name you want to your skin, but I suggest you choose the same title as your fic or something like "instant translation", so you'll know what it's about later.

You don't have to worry about any of the other fields, except for the CSS one, where you should copy and paste exactly what I'll put bellow:

#workskin .change_on_hover:not(:hover) .on, #workskin .change_on_hover:hover .off { display: none; }

So, now, you'll have something like this...

... and you just have to click "save" on the bottom of the page, and this step is done.

Step 2 - Apply the Skin you created to your fic

For a new work, click on "New Work" as usual. If it's a fic you're already posting, you can add this as well, just click the "Edit" button.

Now, on the form of your fic, on the "Associations" tab, right under the menu where you select the language of your fic, you'll see a "select a work skin" option.

On this field, you should select the workskin you just created on the previous step, searching by the name you gave it on the "Title" field.

Step 3 - Insert the text

The code we're gonna use is this one:

<p class="change_on_hover"> <span class="off"> paragraph in foreing language </span> <span class="on"> paragraph in english </span> </p>

If you have no idea what this means, hold my hand, we're gonna get through it together!

First, copy your fic’s text into the AO3 text box as you normally would. Then, switch the text box to HTML mode so you can see the underlying code.

Now, scroll down until you find the paragraph you want to translate. After pasting, it will likely look something like this:

Note how each paragraph in HTML starts with <p> and ends with </p>. These tags indicate where a paragraph begins and ends.

Our goal is to modify that first <p> tag so it tells the browser, “Hey, this paragraph is different from those other ones. It should change when hovered over or clicked.”

To do this, we’ll change <p> to <p class="change_on_hover">. This marks the paragraph as special—one that should switch text when interacted with.

Now note how instead of having a single paragraph, we need two versions of the text:

In blue, the original (non-English) text, which will be shown by default.

In red, the translated (English) text, which will appear when the reader hovers over or clicks on it.

For the original text, wrap it inside a <span class="off"> tag, ending with </span> like this:

<span class="off"> insert here the whole text of the paragraph in the foreign language </span>

For the translated text, wrap it inside a <span class="on"> tag, also ending with </span>. This will replace the original text when hovered over or clicked:

<span class="off"> insert here the whole text of the paragraph in english </span>

And don't forget to end the whole thing again with </p>

Again, here's how it looks on my fic:

With the paragraphs that come before and after the translated text, just leave them as they are. They should still start with <p> and end with </p>. No changes needed!

You can use this method for as many paragraphs as you want, whether in the same chapter or across different chapters. As long as the Work Skin is active, the effect will work seamlessly throughout your fic.

[geoledgy]

your oc website is SO SO SO SO INCREDIBLY COOL how the hell do you even start learning how to do this ?? if you learned how to do this by yourself online, are there any tutorials or resources you can share with us? was making this website free??

omg THANK YOU SO SOOOOOO MUCH!!! It makes me so happy to hear that folks like my little site. I code my site with Phoenix Code (for the live viewer and number dials) and I host my site on Neocities - it is all free. Phoenix can be used in browser or on desktop, but I like having it on desktop more for big projects in case my files get deleted. I use the browser version when I just want to test something quickly.

The 2 videos I use and can not recommend enough to anyone who asks me are this HTML tutorial and this CSS tutorial. They are simple and easy to understand, but I recommend watching it the first go, and then following along the next few watches until you get the flow of basic parts to a website, how they're organized, and what order they go in. At this point, I've memorized exactly where everything goes, and it is all thanks to these 2 videos.

If I am being honest, I learned how to code by myself, not quite even with online tutorials but just from being stupid and messing around myself (1, because I was a kid, and 2, because I didn't understand English very well to know what tutorials are saying.) I used to do html coding for Neopet pages when I was a kid with too much online time, first by just editing the default petpages and adding info and images, and then just doing trial and error with the html. I'll just try something and then if it doesn't turn out the way I want it, I try to find out why it didn't work and also get inspiration from other similar sites to figure out where things go or how they coded (with this nifty thing called right click > inspect page or right click > view page source). And BOOM, working webpage.

It was rudimentary, white blank background without any boxes or anything, you just scrolled down the page and sections were separated by a horizontal bar. OH and every text was centered! I had no idea how to make scrolling boxes or fancy assets, but damn I still had so much fun working on it every weekend. When you find authentic selfmade sites from the 90s and 2000s, most of them aren't super fancy either unlike what modern nostalgia makes you think. So I hope you don't feel discouraged if you begin making a website and feel it isn't "fancy", you're already doing a first big step which is making a webpage and learned your first set of html code!

It was over a decade later before I coded webpages with html again. I've gotten lazy and started relying on site builders, but nothing was quite as versatile as html. I wanted to try coding my own OC site again, so that was when I started working on OutKrop (the site I posted). Until I started coding again, I had literally no idea what CSS even is (and let me tell you, it's a game changer!)

Personally, I work best when I can do things hands on. I don't read through tutorials, I code first then go back and read through coding help sites like w3schools when I find myself stuck and unable to figure something out. Sometimes I grab existing codes and play around with them to see what changes and what I can do with it, cuz having visual context is what helps me a lot.

I can also share my process:

Once I gather up some ideas, I make a sketch, including what boxes (divs in css) should approximately go. It is very rough, but shows me exactly what I need to know.

Next I load up my coding app (Phoenix Code in my case) and "sketch" the layout. Nothing fancy going on here, just putting things where they need to be, and fixing size of boxes and margins if needed. I give my boxes all a background color so I can easily see how big they are and where they are located.

After some adjustments like moving stuff around and adding assets like backgrounds and images, and changing colors of the boxes, rounding off corners, etc., we get this!

so recap + additional useful sites I use:

Coding app: Phoenix Code

Site hosted on: Neocities

Video tutorials: HTML and CSS

Sites for learning code: w3schools, also lissa explains is a great site that is written for kids to learn html so it's easy to understand. Finally, sadgrl has a lot of great resources for coding as well!

I recommend looking through these sites AFTER you tried taking a spin at coding - it doesn't have to be anything fancy just follow the HTML video tutorial I linked!

Thanks for the ask, and I hope this helps you and many others out there who are interested in building a site with html/css! Don't be afraid to get things "wrong" or have an "un-fancy" site. This is how you learn to code, and it'll become so easy once you get the hang of it.

Anyone is always more than welcome to reach out for coding help and advice :-]

[stygiansun-totaleclipse]

Do you have any tips and asset for someone who want to start an IF of their own? Both in terms of writing, development and coding?

My experience is in Twine with Sugarcube when it comes to coding, but there’s also choicescript and other language formats offered in Twine that I can’t speak for. I know @fir-fireweed has sung praises for Chapbook in Twine as a great option for beginners or shorter stories as it’s super easy to use and that’s what she used for Viatica if you’ve read it (very lovely) but it does come with certain limitations like no save slots, so it all depends on your needs!

This is my first project and I’m still learning as I go, but I started out with Sugarcube. It has a learning curve for beginners, but there’s plenty of resources and documentation to get started! You can look up the Sugarcube Documentation, but it can be hard to understand for beginners so I’d recommend using a guide as well. Also unless you have a background in CSS/HTML, I would strongly recommend you start with a template—I learned a lot from studying and tinkering with the code in my template. I’ve listed several templates and guides/resources for Twine on my itch.io homepage. :) The author of Wayfarer also has some really helpful tutorials on coding in Sugarcube and on writing! And if you’re still stuck, Reddit has been a great resource for asking questions I couldn’t solve on my own.

As for writing, there’s so many helpful books and free resources available (esp here on tumblr) for structuring your story etc, but I think the best advice aside from practicing is to read, read, read! It’s very helpful to pick apart what aspects of certain writing styles you admire or don’t and why as you learn to develop your own voice/style. You can learn a lot and draw inspiration from things other authors have done. ❤️

And if you’re wanting to start an IF of your own, you can join the IF author discord server! You don’t have to have a published project if you’re just working on or interested in getting one started, that’s totally fine—we have some authors in that same boat. And it’s a great resource where you can meet other other authors and ask for help/advice! :)

Best wishes to you on your IF endeavors!! 💖💖

[ali3nboyfriend]

literally the best thing Neopets did was encourage a ton of young people to learn how to code HTML and CSS by providing them with little customizable web pages for each of their pets AND THEN OFFERING TUTORIALS ON HOW TO CODE BASIC HTML!!! ON THE WEBSITE!!!

and i just checked, those tutorials are still up! to this fuckin day!!

encouraging kids to learn coding is REALLY good and REALLY effective for their computer literacy long-term, it's such a fucking shame we don't see stuff like this any more

[tpointtech1]

CSS Tutorial

This CSS Tutorial teaches you the fundamentals step-by-step. Master styling, layouts, colors, fonts, and responsive design to build visually appealing, user-friendly websites. It is ideal for beginners and web developers looking to enhance their front-end skills.

[losergames]

OH MY GOSH... I never knew UI database was a thing!! I'm so incredibly grateful you responded to my ask with that link, it's a game changer for sure. I've been referencing some of my favorite games when thinking through UI for my own game (Cyberpunk 2077, my beloved) but I never knew there was a site like that for more cohesive referencing. Thank you!!!!

hi!! i am so incredibly sorry i am late answering these. life! you know how it goes.

i recommend w3schools for html, css and javascript! they have a lot of beginner tutorials for things you might be interested in, as well good explanations alongside examples.

i also watched a lot of dan cox's tutorials on youtube. he has a bunch of stuff on his page for sugarcube 2. as far as i know he has a few video for the new 2.37 version, where as i'm using 2.36 but that's up to you! super SUPER helpful to watching someone actively using the programme and talk through it.

idrellegames' coding in twine tag is also super helpful! i was scrolling through it all the time when i got started with twine lol

my best advice for coming up with a design that is unique is to not go straight into the coding first! i mocked up all of chop shops designs in photoshop before i started building it in twine. here are some old mock ups. it doesn't have to be photoshop, that's just the tool i have on hand, but something like canva would definitely work just as well! or, if you don't have access to anything digital, just using a pen and paper would work just as well. it's much easier to draw out a design than start coding it when you're not sure how it's even supposed to look yet.

i hope that helps a little! <3

[tempural]

Hi!! I wanted to say that I loved reading about your journey of creating a personal website. I'm still unsure between Vercel and Netlify. I have a small question to ask. See, one of the reasons I want to make a website is to archive drawings and journal/sketchbook. Would you have any tips for creating an area on my website just for the diary/journal, which has tags, files for each entry, etc.?

Bello!

Really happy to hear about your interest in websites! I want everyone to make their own site so I don't have to log into social media and get instant tummyaches ♥

Vercel vs Netlify: I think I settled on Vercel for absolutely no reason whatsoever. I just made a site on Netlify, then tested on Vercel, and now I have like 5 websites on Vercel so I just kept using it LOL. I'm sure a more tech-savvy person would know the difference - I think they have certain integrations with specific programs.

Creating a diary or journal with tags:

There's a couple of different ways you can do that, with different levels of work needed.

you got me yapping again:

This sadgrl tutorial might be outdated and may or may not work, but explains the process better than I can.

Easiest: make a journal on Dreamwidth, or another blogging site (wordpress??) that allows easy tags and RSS feed, and embed that RSS feed onto your site.

This requires almost no HTML set-up, and the easiest to organize tags, but you don't truly have the data on your own site since it's just embedded.

When I snuck into a web design class at college, this was one of the methods that the professor used for a blog within a portfolio site LOL.

Shit like wordpress is what a LOT of ~professional~ sites do for their blog section. They code it separately from the main site haha. It's the most popular thing, but not necessarily the best. And wait til you read on what the CEO of wordpress has been having meltdowns about... he owns tumblr too!

It's made with a tutorial for Neocities if that's what you use.

Medium: Set up zonelets.

It will require some HTML and JS editing, but will help automate making headers/footers for each page of a blog.

I've never used it myself, but I see other people speak highly of it.

HARD FOR ME CUZ I'M A GORILLA: I believe a lot of professional web devs will slap your face with their coding cock until you use a static site generator (SSG) to make your site.

You will need some coding knowledge to set up the tagging system since it doesn't come with it enabled by default. But it's made explicitly to be an alternative to big Static Site Generators which are...

It requires some more intimidating knowledge, because it's a lot of scripts that turn files that are not HTML/CSS/JS into plain HTML.

Also you have to use the command line, and that doesn't come with buttons that tell you what you can do. You have to copy/paste all that shit or memorize the code to 'dev build astro' and it all looks silly.

I've used Eleventy, and now am using Astro. Other people use Hugo or Jekyll or some other stuff with crazy names like Glup Shitto. I hate all these sites cuz none of the words mean anything to me. This is a common theme for me and tech. I don't know what NODES or CONTENT or ISLANDS are!!!

I had the most success attempting to learn how to use a SSG by downloading a template and altering it with github + VScodium. Here's the template page for Astro. You click on a theme you like, and it takes you to its github page. (If you don't want to use evil Microsoft stuff sorry. Skip this entire section.) Follow the instructions on the page for "forking" the glup shitto. When it tells you to run commands, I run those commands through the terminal window in VScodium. These tutorials never tell you what these commands do cuz they assume you already know. Usually those commands automatically install the files you need onto your computer, and create the final files.

You can see my wip here for a "tag system" that SHOULD show members of a web listing haha but I don't know what I'm doing and I have a reading disorder AND don't know cumputer good.

THEORETICALLY this will be the simplest and easiest way to maintain tags and files, because after you set it up you just have to write the "content" of the blog page. And you don't have to set up the header/footer ever again. I see the vision, and potential, but I am not there yet when it takes me 5 hours a day to figure out what any of the words in the documentation mean and I don't want to ask an actual tech person cuz they will be like 'obviously just press the Blip on the Repository and then Suck My Ass in the command line".

(side note I haven't updated fujofans in like a year cuz I'm struggling with this part to make updating easier).

Con: the final HTML/CSS code is really ugly if it's "minified", and a lot of themes use """"""professional"""""" CSS libraries like Bootstrap and Tailwind that I honestly think are ugly cuz that's what every fuckin' tech website uses to style their pages and make them look Professional and Minimalist with stupid code like style="500-w dark-gray-balls D-cup-bra" on every single element. Even Toyhouse uses Bootstrap. Eugh!

But maybe you're smarter than me and can wrangle these things better!

That was really long. Woops. I hope you can slug through this wall of text and find something helpful. Feel free to email me if you have any more specific questions. I may or may not be helpful.

If someone else sees this and has better suggestions for making BLOGS, please chime in. I'm begging you.

[snickerduu]

how did you make your own website? & how long did it take you to make it? i am interested in web dev,,, do you have any tips or any helpful sites for beginners/ intermediate? (sorry for asking so many questions!)

hey no problem, asking is a great way to learn always!!

i started on my portfolio site i think around september 2022, forgot about it because of work, then went back to it and deployed it around march 2023! i learned a lot at work, so i just applied what i learned from working in web dev to my own personal site

regarding how to start, if you're a complete beginner, i'd suggest playing around with HTML/CSS first since it's kind of the basic building blocks for doing frontend stuff -- for the first few projects you could try copying simple sites like Google's home page :) there are little interactive tutorials you can find online too like flexbox froggy that can help teach diff concepts in a fun way!

after feeling comfortable with it, i'd suggest playing around with ReactJS when starting out with web dev; it's easy to get into because of its extensive documentation and its large community! there are step-by-step guides into setting it up and several tutorials (both video/article)

if you decide to get into actually deploying your stuff and connecting it to APIs, you can start looking into other frameworks like NextJS/GatsbyJS etc.

getting yourself into a web dev project, like maybe making a small notes/checklist web app or your own portfolio site is a fun way to experiment!! the hardest part is always finding the motivation to start them imo :) wishing u the best on ur web dev journey!!!!! 💗

[html-tryhard]

HTML Fic Event Week

Prompt Sheet Generator | AO3 Collection | html tryhard on AO3

HTML is a markup language used to tell a web browser how to display content. You might be aware of simple uses of HTML, such as bold and italics but HTML can be used to do so much more! Do you like r/AITA stories? Have you ever been interested in including realistic text messages into your fics? Did you like choose-your-own-adventure books as a kid? HTML can be used for all of these things and more!

Join us for HTML Tryhards 2025, where we bully our friends (and you? 👀) into making fanfiction super extra shiny using the power of HTML.

AO3, a fanfiction hosting platform, supports the use of HTML, and that's where submissions for this event should be posted. We have a collection for you to post to, but please use the tag #HTML Tryhard on your work as well!

On Tumblr, @ this blog or use the tag #htmltryhard2025, and we'll reblog your posts.

Prompts

There are two (optional) prompts per day, one to influence the format and one to influence the story. You can generate your own custom prompt list here. Use as many or as few of the prompts as you like.

Rules

All fandoms welcome.

Submissions must include a significant portion of HTML. We'd prefer the entire work be HTML, but mixed prose and HTML is also acceptable.

Submissions MUST be HTML and not images or screenshots of text logs/tweets/etc.

There is no required minimum word count, but the suggested minimum word count is 500 words.

The prompts are OPTIONAL, use as many or as few as you'd like.

HTML/CSS guides are accepted (and encouraged!) as submissions.

Submissions should include the #HTML Tryhard tag on AO3.

Submissions should be added to the collection on AO3.

You can start posting submissions January 13th. The last date of the event is January 17th, though if you're running behind you can still post to the collection after that date.

Follow us!

If you don't know how to use HTML but it's something you're interested in, give us a follow! In the days leading up to the event, we'll be sharing works that have utilized HTML, as well as helpful tutorials. The difficulty of these tutorials will vary, and we'll post things we hope will be helpful for tryhard veterans and beginners alike.

You can also send us your HTML questions and we'll do our best to help you out!

[izicodes]

it seems like my ask from a few days ago didn’t get sent 😭 argh stupid tumblr

i was basically asking there what resources you would recommend for everything that could be useful for neocities,, like html, css,,(and you mentioned java script i think?) especially beginner-beginner stuff and then maybe for intermediate 👉👈 i know you probably have all those on your blog already but you know me in a bit 😵‍💫

also yes i’d love to work on ours together, even if we didn’t make them match! cause you know you have millions of brilliant ideas :33 🌻🌻💛

Hiya,

These are the stuff I used / still use, hope it's useful:

W3Schools

Mozilla Developer Network (MDN)

Codecademy

freeCodeCamp

Khan Academy HTML/CSS Course

Shay Howe's HTML and CSS tutorial

HTML Dog

CSS-Tricks

CSS Layout

Flexbox Froggy

Grid Garden

CSS Zen Garden

CSS Animation

Try them out and see what works best for you! 👍🏾

[redo-rewind-if]

Hi, I wonder how are you creating your wip? Do you write it in google docs and then code it in Twine? I'm starting making my own and I'm looking for some technical tips

Hi! Thanks so much for the ask! It's always good to see new authors starting their own IFs. This might be a bit long so I'll put everything under a read more for those of you who aren't interested.

For me personally, I write in LibreOffice, which is a free alternative to Microsoft Office/Word. But, you can definitely use Google Docs or whatever other writing program you prefer!

As for coding, you can just code in Twine, but I like to code some as I write so I don't forget when to set certain variables. If you don't want to code anything in your draft, then I'd recommend at least leaving yourself reminders at places you'd like to add variables or when you want to have skill checks or anything else of the sort.

I should mention that a lot of people dislike coding in Twine, the code isn't set apart from the text visually and can be confusing for some, so if that's the case for you, I'd recommend checking out something like Notepad++ for coding and then copy and pasting everything into Twine once you're done.

If you do use Notepad++, and you're also using SugarCube, I'd highly recommend downloading and using this to add SugarCube as a custom language to the program so your code is easier to read. (You'll be able to select it as the coding language in Notepad++ after downloading and following the directions, though you may need to exit and restart the program before it shows up in the language list).

Some other great resources I use: The Twine Cookbook (of course), SugarCube Documentation or Harlowe (if you prefer), some templates (including the one I use!) [1] [2] [3], and w3schools tutorials for basics in CSS and JavaScript (assuming you don't know how to code in them already, if you do, that's great!)

If you have any more questions, feel free to ask! I'm no coding expert but I have taken a few classes on Web Dev stuff in college so I know a thing or two.

Best of luck to you on your project anon!😊

[slitherpunk]

Do you have any advice for someone who wants to start learning how to make games? I have limited programming skills and am only really familiar with html/css…

This really depends on the types of games you want to make! A lot of engines today make it really easy to assemble what you have in mind like renpy or rpg maker or gbstudio without needing to know a lot of programming. If you have something more complex in mind you might want to look into something like godot? (I hesitate to recommend unity or unreal these days) I've found the godot programming language pretty understandable for beginners.

Another general tip is to really keep your first projects small. If you follow a few tutorials, and then are lost on your big project, you should shrink your scope, some of the best practice you can get making games is to finish something, so you're not spending so much time sinking into it when you're not totally sure how you're going to progress. A small project is one that you can plan out your complete route on in advance.

Sorry I don't have too much more advice for this lately, making my own games recently have been a very slow process because of my job.