Bela's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

My CSS Resources 🥳

A tip before you get started: Keep your code organized!

This code ↴ gets confusing if you're new to coding and don't know what to edit because it's all combined together instead of organized like the one below it:

<style>h1{color: black;background-color: #EFD3D6;border: 3px solid black;border-radius: 10px;text-align: center;font-family: 'Kiwi Maru', serif;font-size: 18px;letter-spacing: 2px;} </style>

Versus this ↴ where you see what you can edit and it's more organized. You should also try to write the properties in alphabetical order so you don't use the same one twice:

<style>
h1{
   background-color: #EFD3D6;
   border: 3px solid black;
   border-radius: 10px;
   color: black;
   font-family: 'Kiwi Maru', serif;
   font-size: 18px;
   letter-spacing: 2px;
   text-align: center;
}
</style>


In case you need it, here's a pic:



Once you get used to coding in spacehey, feel free to put the code whichever way you want :)

If you ever see the first example of code that's all combined together, just copy it and head over to https://www.10bestdesign.com/dirtymarkup/css/ and paste it there. Then hit the "clean" button and it will clean up the code for you to edit it easier.
A tip before you get started: style tags !

If you're not checking the style tags, that can easily mess up the code and you'll be left wondering why it doesn't come out the way you want it to:

Code without correct style tags:

<style>
h1{
   background-color: #EFD3D6;
   border: 3px solid black;
   color: black;
}
<style>


These style tags ↑ are the same and won't change your code because they both have < > without the forward slash that closes the tag: </style>

Code with correct style tags:

<style>
h1{
   color: black;
   background-color: #EFD3D6;
   border: 3px solid black;
}
</style>


Learning to Code for Spacehey Profiles:
Coding Resources:
Profile and Blog Editors:
Colors:
  • A site with color names or hex code numbers htmlcolorcodes.com/color-names/.
    The code will look like this:
    color: ForestGreen;
    or
    color: #228B22;

    If you want the color to have transparency, then the code should be in rgba like this:
    color: rgba (34, 139, 34, 0.5);

    the 0.5 at the end can be changed to 0.1 to make it more transparent or 0.9 to make it less transparent.
  • For color palettes if you need help or inspiration go to https://colorhunt.co/. Colorhunt has really good palettes (especially dark ones).
  • Pinterest (for example; search for "green palette aesthetic")
  • Color Palette Generator www.degraeve.com/color-palette
    Paste the URL of an image and it will automatically generate a pallet that matches the image. I really like using this!
  • Another color generator colllor.com
Cursors:
  • Custom cursors that are fun! custom-cursor.com/
    I really love these especially because they add more of your personality to your profile page!
  • Open Cursor Library www.rw-designer.com/cursor-library
  • icons8.com
    Free icons you can use for your cursor, just make sure you edit down the size to fit.
  • The Classic Cursor site www.cursors-4u.com
    I used this site way back in the day and even now it's still good.
Fonts:
  • Free Google Fonts fonts.google.com
    The site will show you how to use the @import code to add the fonts to your profile.
  • Cool Fonts from www.dafont.com
    Personal fonts can be added to your profile with the @font-face code more details here
  • More personal Fonts from www.fontspace.com
    You can save the fonts to dropbox and then use the @font-face code to use in your profile.
Icons and Images:
Changing the Spacehey Logo:
  • codepen.io/sosuke/pen/Pjoqqp
    In the box that says Target Color, put in the hex code of the color you want (like #8B8C7E).
    Then click the button that says "Compute Filters" and you'll get a code that looks like this:
    filter: invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%);

    You're going to copy that and paste it into the code for the logo:
    <style>
    nav img.logo{
          filter: brightness(0) saturate(100%) invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%) !important;
    }
    <style>
Youtube Autoplay
Additional Resources (Placeholder Text, Image Editing, Video to GIF)  
Inspiration:
  • I can get inspiration from anywhere and everywhere! From movies, tv shows, kdramas, anime, books, webtoons, manga, manhwas, games, or other online sources.

    Sometimes it can be pictures I see, or magazines I read. The color schemes in pictures or media can come together to form palettes and from there I just piece them together.

    It takes quite a bit of playing around with my ideas to build a layout, especially if I'm freestyling a layout with no set theme.

    For example, if I have a set theme in mind (like creating a xmas theme, or a Genshin theme, or a theme based on a character or book) then it becomes easy to get the images I want to use for it and choosing theme colors can come later. I can use images related to the theme to change the borders, box shapes, backgrounds used, etc.

    If I'm freestyling a layout, then it can take hours or days but most of the time months because I stop working on the layout if I get frustrated with it lol But the point is that it takes a while to make since I don't have a set theme in mind and I'm quite finicky when it comes to layouts. I've always preferred quality over quantity, because for me at least, there's no use making 500+ layouts if there's going to be errors in the code (like incorrect style tags) or if certain parts of the css is missing (like forgetting to edit the code for comment replies, the profile-info box, etc). All of that comes together to make the profile look nice and makes profiles more personalized.

    Everyone has their own way of doing things, so all I can share is how I would go about doing things for my layouts and as always I'm not a professional coder so don't go thinking I know everything when it comes to coding lol. These are most of the resources I use for my layouts. If you found any new sites to use I'm glad I could help in any way :)


35 Kudos

—

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

SugarDollie

 SugarDollie's profile picture

Super useful! Thanks


Report Comment

Axelotl​

 Axelotl​'s profile picture

Your layouts are absolutely beautiful


Report Comment



thank you!!

by Bela; ; Report