This is going to more or less be a bunch of resources, and some stuff of my own knowledge, compiled into one neat page to help with people learning to code! I'm by no means perfect or a professional, but I've struggled with finding a good single resource to learn coding, so I opted for making one myself. If you have any suggestions on things to add, please dont hesitate to let me know! I hope this helps both newbies and more experienced coders
references and resources are your best friend!
don't forget your closing tags! (the code editor will help you out a lot with this, but don't forget if you're using notepad or something similar!)
along with closing tags, don't forget closing quotes or semicolons
check your layouts on different themes before publishing them
this code editor is really, really useful!
To bold text, use either <b> text here </b> or you can add the class font-weight-bold.
To italicize text, use either <em> text here </em> or you can add the class italic.
To manually adjust the font weight, add the style font-weight.
for example: <h1 style="font-weight:700">
To color text, add the text-(color) class. For example, <p class="text-primary>
To make something a link, use the tag <a href="link here">
Pretty much anything can be made into a link, including images, badges, and pills (which you'll find later on in this guide.)
Headers are bigger, and are generally positioned at the top of elements. Their tags are <h#>, replacing the # with the size you want to use.
They come in four sizes.
Displays are bigger than headers. To use them, add the class display-#, replacing the # with the size you want to use.
They come in four sizes.
There are two ways to add images. You can either use the <img> tag or use a card.
Using the img tag is relatively simple. <img src="source here"> This will insert the image 
like so! However, doing this alone will insert it at its default size. I'd recommend styling it with style="height: #px; width: #px; To make the text wrap around the image, use the float-left/right class.
This is my favorite method of inserting images, since they automatically size themselves. You'll learn more about cards later on, but for now, this is the code I recommend using to make images with them. <div class="card" style="background: url(link here); background-size: cover; background-position; center> You can mess with the settings using these different CSS parameters.
PADDING is the amount of space on the INSIDE of an element, MARGIN is the space around the OUTSIDE of an element.
for margin, the syntax is m-(value). for example: <div class="m-3">
The maximum value you can use without using
style="margin:(value)px" is 5.
for padding, the syntax is p-(value). for example: <div class="p-3">
The maximum value you can use without using
style="padding:(value)px" is 5.
Containers come with their own default padding of 16px on both the left and right. To get rid of this padding, add your own padding class.
<div class="container">
content here!
</div>
In my opinion, one of the most important tools when it comes to layouts. "Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content." You can have a maximum of 12 columns in a row, meaning every value you use for a column in a single row must add up to 12 (or below). In addition to this, in order to make layouts mobile friendly, you should specify what size the column appears on certain sized screens, using: col-lg-#, col-md-#, col-sm-#, col-xs-#.
<div class="row">
<div class="col-lg-3"> content here </div>
<div class="col-lg-3"> content here </div>
<div class="col-lg-3"> content here </div>
</div>
Rows also come with their own default padding between columns. To remove this and add your own padding between columns, use the class no-gutters.
Badges and pills are little decorative buttons you can use to decorate / etc. Since they're a class, they can be applied to just about anything, including divs, headers, links, and more.
this is a badge. this is a pill.
All the different color classes can be applied to badges and pills.
<div class="badge badge-(color)"> text here </div>
<div class="badge badge-pill-(color)"> text here </div>
Buttons come in two forms: solid and outline. They can be applied to just about anything, including divs, headers, links, and more.
All the different color classes can be applied to buttons.
<div class="btn btn-(color)"> text here </div>
<div class="btn btn-outline-(color)"> text here </div>
There are two resources for icons as far as I know: foundation icons, and font awesome. I prefer font awesome because they have a HUGE variety of icons to choose from, but foundation icons are fine as well.
Foundation icons have one form, and can be used with the code <i class="fi fi-(name)"> replacing (name) with the name of the icon you want to use. A list can be found here.
Font Awesome icons have multiple forms, and each will differ a bit in their code.
<i class="fas fa-(name)" style="font-size:30px">
<i class="fas fa-(name)" style="font-size:30px">
<i class="fas fa-(name)" style="font-size:30px">
<i class="fas fa-(name)" style="font-size:30px">
Cards are containers that come with their own custom styling, which can be edited. This includes the custom padding they come with, which can be changed with the padding class. They can be used to decorate.
<div class="card">
Every styling parameter can be edited with just classes, no CSS styling necessary, since bootstrap comes with its own custom colors, borders, and etc. For example, to remove borders, you would use the class border-0
The background of cards can also be edited with classes, using either bg-faded, bg-dark or bg-light.
However, if you'd like to use custom CSS styling, cards offer that as well! I just won't be going into that in this tutorial because it's harder to explain and better to learn on your own.
Thank you??? With these (easier to read) tips (rather than having to search through w3schools for things i don't know what are called) I was able to do this! and I'm super happy with it because I'm stupid with coding, hah.
Also this was posted a few months ago, a live html/css editor with a live preview by @circlejourney!
AzuelZorro102 im really happy it helped!!!! also ill add that to the references, i saw that its really cool!!
I have a question and I have NO clue how to look for it, but-
Y'know how you can use the coding to show things like Toyhouse's and DeviantArt's site logos? Is there one for Discord? And if so, what coding word do I use? 'discord' on its own doesn't show anything. :(
Fantastic resources by the way!! Thank you so much for this!
HiyoriRyujin there is a way!
<i class="fab fa-discord">
i should add a section about the brand icons since theyre their own category, thank you for asking! you can find more brand icons here if you need them
ronnie thought it would be useful, but I found a handy code formatter for html when you're too lazy to properly format your own code. >> https://www.freeformatter.com/html-formatter.html
newer to coding. if im using a toggle down can i use the same change font color code to change the color of the toggle down button?