Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[Info] How do I learn HTML and CSS?

July 15 (10 years ago)
Grim G.
Sheet Author
is there a thread on the forum for this or some sort of website? I'm trying to make a character sheet for a game called Warbirds and I want to try doing it on my own.
July 15 (10 years ago)
Finderski
Pro
Sheet Author
Compendium Curator
The easiest way I found to create a character sheet would be to read the wiki for starters. Then look at the existing code for a character sheet that resembles what you want to accomplish with your sheet and steal that code. That will give you an idea of how things work. Then when I have questions about HTML and/or CSS, I refer to w3schools.com (usually by doing a google search).

The CSS forum is also an AWESOME resource.

If you get completely stuck most sheet authors are happy to help answer questions and offer suggestions and code to clarify.

At least that is how I learned to do the character sheets. I did have some familiarity with HTML, but it was from a long time ago, but what you'll do for the character sheet is slightly different from what you'd do for building a website anyway.

Here's the github repository for Roll20 where you can steal code (html and css files).
July 15 (10 years ago)
Grim G.
Sheet Author
thanks, i'll look at the web sights, unfortunately for me I have no experience with coding.
July 15 (10 years ago)
Keith
Pro
Marketplace Creator
For beginner HTML there is a not too bad course on w3schools.com

For more advanced topics I recommed udemy.com
July 15 (10 years ago)

Edited July 15 (10 years ago)
Grim G.
Sheet Author

Keith said:

For beginner HTML there is a not too bad course on w3schools.com

For more advanced topics I recommed udemy.com

is there a specific section that doesn't aply to web building?
July 15 (10 years ago)
Coal Powered Puppet
Pro
Sheet Author
I learned via looking at other folk's stuff (start with the simple stuff, of course), and a immense amount of fustration. Eventually, I became comfortable with my 'headbutt-it-into-submission" style of learning, and so things go smoother for me. Not easier, but smoother.

There are a couple online, learn how to code classes here and there that are free. A lot of what you are doing when making a sheet is designing a part of a webpage, so what you will learn to do on webpages will help. Best of luck with you efforts. If you have any questions, feel free to ask; a lot of really smart people have answered my dumb questions many times here, and did so politely, and are happy to clarify.
July 15 (10 years ago)
Grim G.
Sheet Author

Coal Powered Puppet said:

I learned via looking at other folk's stuff (start with the simple stuff, of course), and a immense amount of fustration. Eventually, I became comfortable with my 'headbutt-it-into-submission" style of learning, and so things go smoother for me. Not easier, but smoother.

There are a couple online, learn how to code classes here and there that are free. A lot of what you are doing when making a sheet is designing a part of a webpage, so what you will learn to do on webpages will help. Best of luck with you efforts. If you have any questions, feel free to ask; a lot of really smart people have answered my dumb questions many times here, and did so politely, and are happy to clarify.

so it would just be ok to start a thread specifically for asking questions 1 by 1?
July 15 (10 years ago)

Edited July 15 (10 years ago)
Wes
Pro
Sheet Author
I also learned html and css from looking at other authors sheets. The CSS tips and tricks thread started by Brian is full of things that are roll20 related. I also use W3schools references when I'm trying to figure something out. It takes a little patience and the people here are more than friendly when it comes to answering questions.
July 15 (10 years ago)
Gen Kitty
Forum Champion
As long as the Q&A is kept in the context of "How do I make a Roll20 character sheet?" have at it! ^_^
July 15 (10 years ago)
Alicia
Sheet Author
I highly recommend CodeAvengers. They have great online courses which will walk you through everything from the basics to advance learning. A lot may not be applicable for creating the sheet itself, but it will give you a good background should you ever want to create a website.

You will definitely want to look at the wiki though for the character sheets as roll20 does have some html nuances you'll have to know for recording the attributes and creating rolls.
July 16 (10 years ago)
Lithl
Pro
Sheet Author
API Scripter

Grim G. said:

is there a specific section that doesn't aply to web building?

HTML is the markup language for the web, and 99.99% (or more) of all usage of HTML is to create a webpage. You're unlikely to find a resource on any website other than Roll20 for using HTML for a purpose other than building a webpage. As mentioned in this thread, however, there are a number of domain-specific resources on this website for building character sheets.

That said, almost everything you would learn from learning how to create a static webpage is applicable to creating a character sheet, so those other resources aren't wastes of time.

Grim G. said:

so it would just be ok to start a thread specifically for asking questions 1 by 1?

Certainly!

A number of people have recommended W3Schools. While it can be useful for a beginner because of its simple presentation and live examples, I don't recommend the site in general. Despite the name, W3Schools is not affiliated with the W3C. The World Wide Web Consortium is the group that defines the standards for HTML, CSS, and the DOM (which defines how ECMAScript implementations such as JavaScript are capable of interacting with HTML) among other things. W3Schools appears highly on Google search results primarily because they've invested a lot of money into inflating their Google PageRank.

Instead, I prefer the MDN (Mozilla Developer Network). They have extensive documentation on many topics including both HTML and CSS. There's also the Web Platform Docs, which actually is affiliated with the W3C.

July 16 (10 years ago)
Finderski
Pro
Sheet Author
Compendium Curator
Thanks for those resources Brian, I've never heard of either of them, but will definitely check them out. :)
August 12 (10 years ago)
https://www.thenewboston.com/ Its free. It got me through my C++ class in college. Nuff said.
September 10 (9 years ago)
a question... im having trouble finding the code that allows one to add a selection (star wars d6)..
for instance i created a select menu of all the skills of a specific attribute but i cannot seem to be able to select that skill as one of my own and give me a new line with the same selection.

 for instance:
<select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:400px">

<option value="0"> </option>
<option value="Blasters">BLASTER</option>
<option value="S-Blaster pistol">Spec-Blaster Pistol</option>

i wana be able to select blasters and add it to my sheet while at the same time adding in a new line(skill) from the menu
which would give me 2 skills in dexterity
i hope this isnt confusing
thanks
September 10 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter
If you want to have a dynamic number of items, you need to create a Repeating Section. This won't automatically create a new select dropdown for you when you choose one, but it will put a button with "+Add" underneath it, allowing you to add more.
September 10 (9 years ago)
vÍnce
Pro
Sheet Author
Should there be a number value assigned to your selection?  
If you assign attr_dexterity_select a number value, you can then use @{dexterity_select} in other attribute calculations (like a dexterity modifier).
<select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:400px">
<option value="0">Nothing</option>
<option value="2">Blaster</option>
<option value="3">Spec-Blaster Pistol</option>
</select>
September 10 (9 years ago)
ok.. how does one use the @{dexterity_select} in my code..
September 10 (9 years ago)
i looked at the code for the repeating section.. and i used it and it never worked..

September 10 (9 years ago)
<select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:400px">
<option value="0"> </option>
<option value="Blasters">BLASTER</option>
<option value="S-Blaster pistol">Spec-Blaster Pistol</option>
<option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option>
</select>
<div style="float:right;">
<div>
<input type="number" name="attr_DEXTERITYskilldice" min="1" value="3" style="width:50px"/>D
+<input type="number" name="attr_DEXTERITYskillpip" min="0" max="2" value="0" style="width:50px"/>
</div>

This is the code i would like to copy/add  when selecting a skill then i do my die numbers.. then I press add i want it to go down another level and allow me to choose another skill with its own die spot and so on and so forth every time i add a nwe skill..

September 10 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter

curtis w. said:

i looked at the code for the repeating section.. and i used it and it never worked..
Could you elaborate? What was the code you attempted? Did you only check the result in the preview pane (autocalc fields and repeating sections don't work in the preview) or did you actually look at it on the VTT?

September 10 (9 years ago)
anotehr question.. how can i make several lines of code being able to be called multiple times instead of copying and pasting it several times
thanks
September 10 (9 years ago)
<div>

<td>

<button type='roll' style="float:left;" value='/roll [[(@{DEXTERITY} - 1)d6]] + [[1d6! + @{DEXTERITYpip}]]' >DEXTERITY</button>

<input type="number" name="attr_DEXTERITY" min="1" value="3" style="width:50px"/>D
+<input type="number" name="attr_DEXTERITYpip" min="0" max="2" value="0" style="width:50px"/>
<br><br>

<form name="Form1"><fieldset/>

<button type="submit" value="add">ADD</button>




<select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:400px">
<option value="0"> </option>
<option value="Blasters">BLASTER</option>
<option value="S-Blaster pistol">Spec-Blaster Pistol</option>
<option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option>
<option value="S-Blaster rifle">Spec-Blaster rifle</option>
<option value="S-Blaster Hold Out">Spec-Hold out Blaster</option>
<option value="S-Blaster Repeating">Spec-Repeating Blaster</option>
<option value="Archaic Guns">ARCHAIC GUNS</option>
<option value="S-Black Powder Pistol">Spec-Black powder pistol</option>
<option value="S-musket">Spec-Musket</option>
<option value="Blaster Artillery">BLASTER ARTILLERY</option>
<option value="S-Anti-Infantry">Spec-Anti-Infantry</option>
<option value="S-Anti-Vehicle">Spec-Anti-Vehicle</option>
<option value="S-Surface to air">Spec-Surface to air</option>
<option value="S-Surafce to space">Spec-surface to space</option>
<option value="S-Surafce to Surface">Spec-surface to suraface</option>
<option value="BOWCASTER">BOWCASTER</option>
<option value="BOWS">BOWS</option>
<option value="S-Long bow">Spec-Long Bow</option>
<option value="S-XBow">Spec-X-Bow</option>
<option value="BRAWLING PARRY">BRAWLING PARRY</option>
<option value="S-VS Martial Arts">Spec-vs Martial arts</option>
<option value="S-VS Boxing">Spec-VS Boxing</option>
<option value="DODGE">DODGE</option>
<option value="S-VS energy">Spec-VS Energy</option>
<option value="S-VS missile weapons">Spec-VS missile weapons</option>
<option value="FIREARMS">FIREARMS</option>
<option value="S-Verpine Shatter Gun">Spec-Verpine Shatter Gun</option>
<option value="S-Machine Guns">Spec-Machine Guns</option>
<option value="S-Rifles">Spec-Rifles</option>
<option value="S-Sniper Rifles">Spec-Sniper Rifles</option>
<option value="GRENADE">GRENADES</option>
<option value="S-Thermal Detonators">Spec-Thermal Detonators</option>
<option value="Lightsabers">LIGHTSABERS</option>
<option value="S-Base Lightsabers">Spec-Base Lightsabers</option>
<option value="s-Duel Lightsabers">Spec-Duel Lightsabers</option>
<option value="s-Lightstaff">Spec-Lightstaff</option>
<option value="s-Great LS">Spec-Great LS</option>
<option value="s-Duel Phase LS">Spec-Duel Phase LS</option>
<option value="Melee Combat">MELEE COMBAT</option>
<option value="S-Vibroblades">Spec-VibroBlades</option>
<option value="S-Knife">Spec-Knife</option>
<option value="MELEE PARRY">MELEE PARRY</option>
<option value="S-vs Lightsabers">Spec-vs Lightsabers</option>
<option value="S-vs knives">Spec-VS Knives</option>
<option value="MISSILE WEAPONS">MISSILE WEAPONS</option>
<option value="S-Concusion missile">Spec-Concusion Missile</option>
<option value="S-Grenade launcher">Spec-Grenade Launcher</option>
<option value="PICKPOCKET">PICKPOCKET</option>
<option value="RUNNING">RUNNING</option>
<option value="VEHICLE BLASTERS">VEHICLE BLASTERS</option>
<option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>
<option value="S-Heavy Laser Cannon">Spec-Heavy Laser Cannon</option>
<option value="S-Light Blaster Cannon">Spec-Light Blaster Cannon</option>
<option value="S-Light Laser Cannon">Spec-Light Laser Cannon</option>
<option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>
<option value="S-Medium Blaster Cannon">Spec-Medium Blaster Cannon</option>
<option value="DANCING">DANCING</option>
<option value="THROWN WEAPONS">THROWN WEAPONS</option>
<option value="S-Knife">Spec-Knife</option>
</select>




<input type="number" name="attr_DEXTERITYskilldice" min="1" value="3" style="width:50px"/>D
+<input type="number" name="attr_DEXTERITYskillpip" min="0" max="2" value="0" style="width:50px"/>

</td>
<input type="submit" name="repeating_Dexskills" value="add"/>

</fieldset></form>


</div>
September 10 (9 years ago)

Edited September 10 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter
Yeah, that's not going to work for creating a repeating section, for several reasons.
  1. You do not add <form> elements to your character sheet, ever
  2. <fieldset> cannot be a self-closing tag (<fieldset/>)
  3. Self-closing tags cannot have closing tags (<fieldset/> ... </fieldset>)
  4. <select> does not have a "value" attribute (this won't actually cause anything to fail, but the browser is going to ignore it completely)
  5. <input type="submit"> and <button type="submit"> do absolutely nothing useful for you
  6. You do not need to create the "+Add" or "Modify" buttons which will be part of your repeating section. They will be added automatically.
  7. <td> may only be contained within <tr>, not within <div> (additionally, <tr> may only contain <td> or <th>, and <tr> may only be contained within <thead>, <tbody>, <tfoot>, or <table>; <thead>, <tbody>, and <tfoot> may only contain <tr> and may only be contained within <table>, and <table> may only contain <thead>, <tbody>, <tfoot>, <tr>, and <caption>)
  8. Elements need to be properly nested (<td><fieldset>...</td></fieldset> bad, <td><fieldset>...</fieldset></td> good)
To create a repeating section, you need a <fieldset> with a class that begins with "repeating_". Something like this:
<fieldset class="repeating_skills">
<select class ="sheet-select" name="attr_dexterity_select" style="width:400px">
<option value="0"></option>
<option value="Blasters">BLASTER</option>
<!-- etc... -->
</select>
<input type="number" name="attr_DEXTERITYskilldice" min="1" value="3" style="width:50px"/>D
+<input type="number" name="attr_DEXTERITYskillpip" min="0" max="2" value="0" style="width:50px"/>
</fieldset>
Some of the errors I've enumerated may be corrected automatically by the browser, but different browsers may correct the same error in different ways. They may also cause the browser to enter into a "quirks mode" which can make other elements on the page potentially unstable. Using correct HTML prevents those problems from ocurring, and keeps things the same across browsers.
September 11 (9 years ago)
new and improved and not say messy code im using

<button type='roll' style="float:left;" value='/roll [[(@{DEXTERITY} - 1)d6]] + [[1d6! + @{DEXTERITYpip}]]' >DEXTERITY</button>

<input type="number" name="attr_DEXTERITY" min="1" value="3" style="width:40px"/>D
+<input type="number" name="attr_DEXTERITYpip" min="0" max="2" value="0" style="width:35px"/>

<fieldset>
<!-- drop down menu for dex skills-->
<select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:200px">
<option value="0"> </option>
<option value="Blasters">BLASTER</option>
<option value="S-Blaster pistol">Spec-Blaster Pistol</option>
<option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option>
<option value="S-Blaster rifle">Spec-Blaster rifle</option>
<option value="S-Blaster Hold Out">Spec-Hold out Blaster</option>
<option value="S-Blaster Repeating">Spec-Repeating Blaster</option>
<option value="Archaic Guns">ARCHAIC GUNS</option>
<option value="S-Black Powder Pistol">Spec-Black powder pistol</option>
<option value="S-musket">Spec-Musket</option>
<option value="Blaster Artillery">BLASTER ARTILLERY</option>
<option value="S-Anti-Infantry">Spec-Anti-Infantry</option>
<option value="S-Anti-Vehicle">Spec-Anti-Vehicle</option>
<option value="S-Surface to air">Spec-Surface to air</option>
<option value="S-Surafce to space">Spec-surface to space</option>
<option value="S-Surafce to Surface">Spec-surface to suraface</option>
<option value="BOWCASTER">BOWCASTER</option>
<option value="BOWS">BOWS</option>
<option value="S-Long bow">Spec-Long Bow</option>
<option value="S-XBow">Spec-X-Bow</option>
<option value="BRAWLING PARRY">BRAWLING PARRY</option>
<option value="S-VS Martial Arts">Spec-vs Martial arts</option>
<option value="S-VS Boxing">Spec-VS Boxing</option>
<option value="DODGE">DODGE</option>
<option value="S-VS energy">Spec-VS Energy</option>
<option value="S-VS missile weapons">Spec-VS missile weapons</option>
<option value="FIREARMS">FIREARMS</option>
<option value="S-Verpine Shatter Gun">Spec-Verpine Shatter Gun</option>
<option value="S-Machine Guns">Spec-Machine Guns</option>
<option value="S-Rifles">Spec-Rifles</option>
<option value="S-Sniper Rifles">Spec-Sniper Rifles</option>
<option value="GRENADE">GRENADES</option>
<option value="S-Thermal Detonators">Spec-Thermal Detonators</option>
<option value="Lightsabers">LIGHTSABERS</option>
<option value="S-Base Lightsabers">Spec-Base Lightsabers</option>
<option value="s-Duel Lightsabers">Spec-Duel Lightsabers</option>
<option value="s-Lightstaff">Spec-Lightstaff</option>
<option value="s-Great LS">Spec-Great LS</option>
<option value="s-Duel Phase LS">Spec-Duel Phase LS</option>
<option value="Melee Combat">MELEE COMBAT</option>
<option value="S-Vibroblades">Spec-VibroBlades</option>
<option value="S-Knife">Spec-Knife</option>
<option value="MELEE PARRY">MELEE PARRY</option>
<option value="S-vs Lightsabers">Spec-vs Lightsabers</option>
<option value="S-vs knives">Spec-VS Knives</option>
<option value="MISSILE WEAPONS">MISSILE WEAPONS</option>
<option value="S-Concusion missile">Spec-Concusion Missile</option>
<option value="S-Grenade launcher">Spec-Grenade Launcher</option>
<option value="PICKPOCKET">PICKPOCKET</option>
<option value="RUNNING">RUNNING</option>
<option value="VEHICLE BLASTERS">VEHICLE BLASTERS</option>
<option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>
<option value="S-Heavy Laser Cannon">Spec-Heavy Laser Cannon</option>
<option value="S-Light Blaster Cannon">Spec-Light Blaster Cannon</option>
<option value="S-Light Laser Cannon">Spec-Light Laser Cannon</option>
<option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>
<option value="S-Medium Blaster Cannon">Spec-Medium Blaster Cannon</option>
<option value="DANCING">DANCING</option>
<option value="THROWN WEAPONS">THROWN WEAPONS</option>
<option value="S-Knife">Spec-Knife</option>
</select>
<!-- input dice from dex skills-->
<input type="number" name="attr_DEXTERITYskilldice" min="1" value="3" style="width:40px"/>D
+<input type="number" name="attr_DEXTERITYskillpip" min="0" max="2" value="0" style="width:35px"/>
<!--roll button-->
<button type="roll" value="[[/r (@{DEXTERITYskilldice} - 1)d6 + 1d6! + @{DEXTERITYskillpip}]]">ROLL</button>
</fieldset>
September 11 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter
In order to create a repeating section, the fieldset must have a class with a name beginning with "repeating_".
September 11 (9 years ago)
another question...  whats the code to put in otehr code so u can recall it at any time in order to not copy and paste it all over tons of times.. i think it is a fucntion  but i cant seem to find it anywhere and i cant remeber what its called
September 11 (9 years ago)
kk figured it out.. although i thoughti read somewhere that javascript isnt supoprted by roll 20.. is that correct?

September 12 (9 years ago)
Coal Powered Puppet
Pro
Sheet Author
API, however...
September 12 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter
Character sheet layouts cannot be manipulated with JavaScript, not even with the API.
September 12 (9 years ago)
Coal Powered Puppet
Pro
Sheet Author
You mean there is a limit to The Aarron's power?  Interesting....
September 12 (9 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

Coal Powered Puppet said:

You mean there is a limit to The Aarron's power?  Interesting....

And that is why we have hope... :)