This was super helpful! Thanks a lot for making it!
CODING REFERENCE
WHAT IS THIS?
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
TIPS
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!
RESOURCES USED
TEXT
TEXT EFFECTS
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">
TEXT COLORS
To color text, add the text-(color) class. For example, <p class="text-primary>
secondary text
success text
warning text
danger text
muted text
LINKS
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.)
HEADINGS AND DISPLAYS
HEADINGS
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.
<h1>
<h2>
<h3>
<h4>
DISPLAYS
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.
display-1
display-2
display-3
display-4
IMAGES
There are two ways to add images. You can either use the <img> tag or use a card.
IMG METHOD
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.
CARD METHOD
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 AND MARGINS
PADDING is the amount of space on the INSIDE of an element, MARGIN is the space around the OUTSIDE of an element.
SYNTAX
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
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.
EXAMPLE
<div class="container">
content here!
</div>
hi! this is a container with content inside of it! I also added styling so you can see the borders. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit efficitur pellentesque. Donec mattis ut sem nec blandit. Vivamus sollicitudin ullamcorper justo sit amet tempor. Ut aliquam nibh non ante interdum, quis luctus metus euismod. Nunc ornare vel purus in tincidunt. Ut convallis augue ut sapien ultricies luctus eu nec urna.
ROWS AND COLUMNS
RESOURCEIn 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-#.
EXAMPLE
<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.
EXAMPLE
this is a row with default gutters.
this is a row with NO gutters.
BADGES & PILLS
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.
default
primary
info
success
warning
danger
primary
info
success
warning
danger
default
primary
info
success
warning
danger
primary
info
success
warning
danger
badges:
<div class="badge badge-(color)"> text here </div>
pills:
<div class="badge badge-pill-(color)"> text here </div>
BUTTONS
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.
default
primary
info
success
warning
danger
primary
info
success
warning
danger
primary
info
success
warning
danger
info
success
warning
danger
<div class="btn btn-(color)"> text here </div>
for outline buttons, use
<div class="btn btn-outline-(color)"> text here </div>
ICONS
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
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
Font Awesome icons have multiple forms, and each will differ a bit in their code.
SOLID
<i class="fas fa-(name)" style="font-size:30px">
REGULAR
<i class="fas fa-(name)" style="font-size:30px">
LIGHT
<i class="fas fa-(name)" style="font-size:30px">
DUOTONE
<i class="fas fa-(name)" style="font-size:30px">
CARDS
RESOURCE
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.
this is a card! to use cards, use the class "card" like so:
<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.
so question, i got a f2u code for my profile off of kofi but idk how to turn the file into code to input if that makes sense ;v;
Open the file in notepad or a word doc, copy and paste from that onto your profile for coding ^^ pastelgutz
So I'm trying to figure out a way to code this
Is there a way to make a row of centered text but to where each word is a different color?
Like for example " Text | Text | Text
But each 'text' word is a different color in the same row?