Hi There

This is a list of some websites I find useful for layout related stuff. All of these sites are easily found on google and there are tons more options out there besides what I have listed here. This is just some stuff to perhaps get you started if you're not sure where to look.

---

Stock images

Free to use stock images - good for making mood boards and finding focal images. Most of these images are extremely high res, I would suggest resizing them before using unless you need that high resolution.

• Unsplash
• Pexels
• Pixabay

Please note per toyhouse rules, you still must provide some sort of credit/state where the images came from. A simple "stock images from xxx.com" will suffice. You can place this on the character profile or in the "additional credits" box (found under the ownership tab). If your images are coming from mostly the same places you can make a blanket statement on your user profile.

A note on moodboards

You cannot go to tumblr, grab a bunch of random pre-made moodboards, upload them to a character and call it "free moodboards." All images used in moodboards must have some sort of credit. If you want to make moodboards for distribution, I suggest building them off of free to use stock images sites, and crediting the stock site.

---

Font awesome icons

• How To Use
• All the Icons

---

Seamless Patterns

I strongly prefer seamless background patterns over images because they will look good on any resolution. Here's some f2u ones, remember to credit your patterns!

• Subtle Patterns
• Transparent Textures
  • This is "Subtle Patterns" turned into transparent textures! Perfect for creating subtle backgrounds in custom colors
• Pixabay
• Pattern Vomit
• Freepik
  • A user downloaded and uploaded these patterns for ease of use, all images are credited in the gallery
• Seamless Patterns
  • A user downloaded and uploaded these seamless patterns for ease of use, all images are credited in the gallery
• CanadianLyynx's Patterns
  • These are f2u transparent patterns by a toyhouse user
• Follielle's Patterns
  • These are f2u colored patterns made by a toyhouse user.
• F2U Tile Patterns
  • These are f2u seamless patterns by a toyhouse user
• F2U Decor Wallpaper
  • These are f2u seamless patterns by a toyhouse user

---

Color Schemes

These sites will allow you to build a color scheme based on an image or color you provide

• Hexcolorpedia
  • Input a hex code to be given related colors; great for getting tints & shades of a color
• Image Color Picker
  • Upload an image and color drop from that image. This allows you to select exactly what color you want from the image.
• CSS Drive: Colors Palette Generator
  • Upload an image and will generate a large series of swatches that you can select from to make a palette. This one provides the widest range of colors to choose from.
• Palette Generator
  • Upload an image and will create a color scheme based on the major colors in the image. Also gives a breakdown of how much each color is used in the image.
• Canva: Color Palette Generator
  • Upload an image and will create a color palette based on the image. I found this one will throw in some new colors that match your existing colors for more variance
• Paletton
  • Provide a hex code and will generate a color scheme based on the provided color.

---

Premade Palettes

• https://colorpalettes.net/
• https://colorhunt.co/
• https://www.color-hex.com/color-palettes/

---

Basic HTML

There is a lot to learn in HTML, but here are some simple building blocks you should understand to get you started. If you read a concept and don't understand it, simply google it- you'll find many more resources and hopefully one of them will better explain it for you.

• Paragraphs - https://www.w3schools.com/html/html_paragraphs.asp
• Line Breaks - https://www.w3schools.com/tags/tag_br.asp
• Margins - https://www.w3schools.com/css/css_margin.asp
  • Remember, margins is the space OUTSIDE the element
• Padding - https://www.w3schools.com/css/css_padding.asp
  • Remember, padding is the space INSIDE the element
• Display - https://www.w3schools.com/cssref/pr_class_display.asp
  • You will want to have a full understanding of display block vs inline vs inline-block, these greatly effect how things will show on the page.
• Borders - https://www.w3schools.com/css/css_border.asp
  • For borders, look to the nav on the left - you'll see several options for border width, border color, etc. You'll want to review all of those for a full understanding of how to set borders
• Images - https://www.w3schools.com/html/html_images.asp
• Background Image - https://www.w3schools.com/html/html_images_background.asp
• Attributes - https://www.w3schools.com/html/html_attributes.asp
• Custom colors - https://www.w3schools.com/html/html_colors.asp

Bootstrap shortcuts

In general I recommend reviewing all of the bootstrap documentation to see the full extent of what it offers. Here's some basic/commonly used stuff

• The grid - https://getbootstrap.com/docs/4.0/layout/grid/
  • Learn how to use this with breakpoints to make mobile responsive layouts
• Font - https://getbootstrap.com/docs/4.0/content/typography/
• Spacing (padding and margins) - https://getbootstrap.com/docs/4.4/utilities/spacing/
• Display - https://getbootstrap.com/docs/4.4/utilities/display/
• Float - https://getbootstrap.com/docs/4.4/utilities/float/
  • Remember to add margins to your images when you make them float or else the text is gonna hit them
• Flex - https://getbootstrap.com/docs/4.4/utilities/flex/
  • Please make sure you understand how flex works before you try to use it or it will break your layouts

---

Flexbox

• flex box guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex is a type of display that lets you do some cool stuff, but it is difficult to wrap your head around when you are new to HTML. I find this is a nice reference guide for when you just wanna remember what each attribute is called/see all the options. This is not a beginner level thing so don't fret if you don't get this.