Home | Profile | My Blog
ZombieChinyoka

Last Login:
December 9th, 2020

View All Posts


Gender: Female
Status: In a relationship
Age: 22
Sign:
Country: Germany

Signup Date:
October 04, 2019

Subscriptions

01/03/2020 02:45 PM 

Simple ways 2 pimp ur profile + little HTML lesson

Of course not everyone who wants to use friendproject knows HTML or CSS, but you don't really need much knowledge to make your profile look awesome! I thought I could give everyone a little starter lesson and a list of useful websites etc. And no, you don't have to be a programmer to do this. HTML is really easy if you learn the basics, and it's mostly only about styling. It has nothing to do with being a programmer or a smart hacker kid or anything (as a programmer this kinda pisses me off, not sure if you can tell). Ok, rant mode off, let's start :)

Actually, you don't even need to write a single line of code yourself to get a cool layout on your profile. There are a lot of websites where you can find custom layouts or even generate them yourself with nearly unlimited options. I'd suggest using www.pimp-my-profile.com, it's the best one I can think of, but of course you can use other ones too. Click on "Myspace" in the menu and choose either "Pre-made Layouts" or "Layout Editor", depending on what you want to do. All you need to do then is to copy the code, go to "Edit Profile" on friendproject and paste it in the "About Me" section (every other section should work fine too btw, but this one is recommended). That's just what I did first with my profile too, I started editing my code and adding new stuff on top of that later. So I would actually recommend for everyone to start with a custom or generated layout, it will probably save you a lot of time even if your experienced in webdesign.

Here's another example of what you can do by simply using a generator: https://www.friendproject.net/view_profile.php?member_id=220482

(Shoutout to him btw, this guy is a legend uwu)

If you want to do a little more, style things different, add stuff that's not possible with a generator, you'll probably need to dig into the code yourself. I know it looks confusing at first, but you'll understand at least a bit of it soon I hope :)

Let's start from the bottom of everything. HTML is written in different tags. Some tags are for text styling, some can be a link to another website, some can be images, audio files and a lot of other stuff. Most tags look like this:

<example></example>

Some special ones also look like this:

<example>

For example, there is this tag:

<p></p>

The <p> tag defines a paragraph. It's used for putting text inside it and styling it, and at the end of the text, a new paragraph will start.


These three lines of my profile are done by simply using 3 <p> tags. The code would look like this:

<p>Just a weird, introverted, depressed emo kid uwu </p>
<p>Birthday: 12. December </p>
<p>Relationship status: taken by the most wonderful, beautiful girl ♥ </p>

In the first section of the tag, you can give it properties. Properties can do different stuff, but here they are mostly used for styling, aka CSS. Let's say you want the first paragraph to be pink.

Now some quick introduction into hex colors. They are the most common way to tell your CSS to use a specific color. Just google "hex color picker" and use the picker to choose the color you want. For the pink we want here, the hex code of the color would be #ee00ff (you can also paste it into the picker to check it out).

To style our text, we give the <p> tag a "style" property. It looks like this:

<p style="">Just a weird, introverted, depressed emo kid uwu </p>

In the style="" we can now use CSS to specify the text color. Text color in CSS is specified with "color" and the hex code we picked assigned to it. Let's do this.

<p style="color: #ee00ff;">Just a weird, introverted, depressed emo kid uwu </p>

And it should look like this:


Maybe we could give it another font now? The best way to use a font you like is looking up Google Fonts. You can choose an huge amount of fonts there. Pick the one you like! For this exmple, I want to use "Amatic SC", because why not. Click on "select this font", open the popup and copy the whole <link> tag under the "STANDARD". Go into your profile editor again an paste it anywhere (I'd suggest at the end or the beginning of everything else). Now you copy the other piece of code under the "Specify in CSS". This one goes into the style property of your <p> tag, right behind the color.

<p style="color: #ee00ff; font-family: 'Amatic SC', cursive;">
 Just a weird, introverted, depressed emo kid uwu
</p>

Now we should have this:


Of course it looks horrible, but we're here to practice, right?

As you may have noticed, the style property is already getting pretty long. If we would want to center the text, make it italic, give it another size etc, it would maybe be a bit too much. Let me introduce the <style> tag. Inside it, you can just use plain CSS and assign it to your HTML tags by using classes. Sounds confusing? Let me show you how it works. First, get rid of the whole style property inside your <p> tag (maybe save it into another file so you won't have to write it all over again) and give it a "class" property instead. Think of a good name for the class, something that isn't confusing. I'll just use the name "pinktext" here. Now your code should look like this:

<p class="pinktext">Just a weird, introverted, depressed emo kid uwu </p>

Now we add a <style> tag above the <p> tag and define the "pinktext" class inside it. I'll only show you how the next step should look like on this one. For a better explanation on CSS classes you should read this:

W3 Schools HTML classes

It can be pretty confusing sometimes, even to me.

<style>
 .pinktext {
 }
</style>

Now you can simply paste the CSS you had in the style="" property before into the .pinktext class!

<style>
 .pinktext {
  color: #ee00ff;
  font-family: 'Amatic SC', cursive;
 }
</style>

If you did everything right, it should still look the same, but your code is much cleaner and better readable now :)

I think that's it for now, I hope anyone even read until here and that it actually helps people who are new to all of this. I definitely have a lot more for you, so pls let me know if I should do more! If you have any issues with your code, you can always message me, I'll do my best to help.

2 Comments  

View All Posts


AmishCar

 

Dec 13th 2020 - 10:08 PM

Comment Back  |   Send Message   |  Block User

Thanks for this post. Learning all this stuff and you are a great help. 


ZombieChinyoka

 

Jan 11th 2020 - 7:48 AM

Comment Back  |   Send Message   |  Block User

Yep, that's right, thanks for the addition! Since this is for total beginners and people who aren't familiar with coding at all, I didn't want to make it confusing, but I'll cover that in one of the next posts ^^

View All Posts



Mobile | Terms Of Use | Privacy | Cookies | Copyright | FAQ | Support

© 2024. FriendProject.net All Rights Reserved.