Website design (PLEASE HELP!)

superigor9123

Hai dere! :3

I have recently been interested in Game-making and Website development. (You may have known)
But, I have a problem with web design, I know simple things like text, Paragraph writing, Etc

I can make text Italic, I can also make it Bold, But I need far more than that!

I would like to try use CSS (Cascade Style Sheet) to make Colour boxes and stuff, but It seems like hard work!
If anyone would please help me on the CSS! (I have made the Colour scheme; Black and Red)

NOTE: I don't want you to do it, I would like you to teach me CSS

Free Credits on the website if you help me (True Dat)

EDIT: 1. I am NOT an ATer 2. Thank you all for the helpful information, I feel like I know a lot now!

PROBLEM: I wrote the text collums, But it turns out, it does not stay in there, it goes in rows instead, Can anyone help? :3

I will soon be posting a test website with all what I can do.
Hope you have a nice day!

//Tai

Last edited by superigor9123 (Aug. 28, 2016 10:33:36)

lugga

Hi! To make boxes with colour isn't that hard.

Here's the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Colour Box Example!</title>
    </head>
    <body>
        <div id="redbox"></div>
        <div id="blackbox"></div>
    </body>
</html>

Here's the CSS:

#redbox {
    background-color: red;
    width: 200px;
    height: 200px;
}
#blackbox {
    background-color: black;
    width: 200px;
    height: 200px;
}

It's pretty simple.
If this isn't what you wanted them I'm sorry

Gaza101

superigor9123 wrote:
Hai dere! :3

I have recently been interested in Game-making and Website development. (You may have known)
But, I have a problem with web design, I know simple things like text, Paragraph writing, Etc

I can make text Italic, I can also make it Bold, But I need far more than that!

I would like to try use CSS (Cascade Style Sheet) to make Colour boxes and stuff, but It seems like hard work!
If anyone would please help me on the CSS! (I have made the Colour scheme; Black and Red)

NOTE: I don't want you to do it, I would like you to teach me CSS

Free Credits on the website if you help me (True Dat)

I will soon be posting a test website with all what I can do.
Hope you have a nice day!
//Tai

All right then, sure.

I'm going to assume that, since you're inexperienced with CSS, you probably make bold and italic text using the following method.

<b>Bold text.</b>
<i>Italic text.</i>

Although this is technically correct HTML, it is invalid HTML5. As a result, I'd like you to completely forget about this method of styling. Something you need to remember is that HTML is not a styling language. Think of it this way: HTML is a blueprint for how you will layout your website. CSS is how you use that blueprint to create a visually appealing and functional site. Use HTML for the basic layout and add size, colours, and other styling with CSS.

Now that we have that sorted, I'll go through the basics with you. We'll start with colours and fonts.

The following HTML will be the foundation for our site.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="textarea">
            <p>Some text.</p>
        </div>
    </body>
</html>

In the <head> of our document, we store metadata and links. For the most part, the <link> tag is used to refer to a CSS document used to style a page.

In the page's <body>, we have the visible part of the site that we'll be styling. You can see a <div> tag, containing a tag, which defines a paragraph. Inside of our tag is some sample text.

Let's start by giving the page a background. I'm going to use the colour, lightBlue, as our background.

@charset "utf-8";
 
body {
    background-color: lightBlue;
}

As you can see, I've changed the page's background colour by selecting the body of the page and providing a property inside the proceeding curly brackets. In this case, I've used the background-color property with the value, “lightBlue.” We mark the end of every property with a semi-colon.

Now, let's add some more code to our stylesheet to alter the appearance of the text:

@charset "utf-8";
 
body {
    background-color: lightBlue;
}
 
div#textarea p {
    color: red;
}

With this addition, I've added another rule. “div#textarea p” is our selctor. In English, it means, “Find me a <div> tag with the id, ‘textarea,’ that contains a tag. Then apply the following properties to that tag.” These properties apply to all tags inside of the <div>, even if they're not an immediate child of the <div>.

Now, let's add a few more rules. We're going to centre our text, give it a font and italicise it, and make it change colour when we hover our mouse over it:

@charset "utf-8";
 
body {
    background-color: lightBlue;
    font-family: Tahoma;
}
 
div#textarea p {
    color: red;
    font-style: italic;
    text-align: center;
}
 
div#textarea p:hover {
    color: green;
}

We've used the text-align property to centre text contained in our tag and the font-style property to italicise text in the element. We used the font-family property to make all text in the page use the Tahoma font. The :hover pseudo-class has been used to select all elements contained inside a <div> with id, “text-area,” that are being hovered over with the mouse cursor. The reason our code works is because CSS is read from top to bottom. If two rules conflict, the second rule is usually chosen because it is closer to the bottom of the stylesheet.

This is all I have time for today. If you found this helpful, I'll show you some more complicated aspects of the language.

Last edited by Gaza101 (Aug. 27, 2016 18:11:50)

Gaza101: retired member of the Scratch 2.0 Transition Team

IcyCoder

(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

Because JS is the future (echos) future future futur futu fut fu f

-stache-

IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

NOOOOOO!!! Use MDN!!!

3x3 pb: 13.240
3x3 avg: ~21-26

IcyCoder

-stache- wrote:
IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com
NOOOOOO!!! Use MDN!!!

sure why not

Last edited by IcyCoder (Aug. 28, 2016 01:00:43)

Because JS is the future (echos) future future futur futu fut fu f

Jonathan50

Gaza101 wrote:
I'm going to assume that, since you're inexperienced with CSS, you probably make bold and italic text using the following method.
Bold text.
Italic text.
Although this is technically correct HTML, it is invalid HTML5. As a result, I'd like you to completely forget about this method of styling.

You can just use instead of and instead of . This has the advantage that it'll help blind people because those tags say “this text is emphasized” and “this text is important” rather than “this text is italic” and “this text is bold” (which is irrelevant to blind people) so screen readers can do something appropriate. I think.

Last edited by Jonathan50 (Aug. 28, 2016 01:38:08)

Not yet a Knight of the Mu Calculus.

PullJosh

Jonathan50 wrote:
You can just use instead of and instead of . This has the advantage that it'll help blind people because those tags say “this text is emphasized” and “this text is important” rather than “this text is italic” and “this text is bold” (which is irrelevant to blind people) so screen readers can do something appropriate. I think.

That is correct. However, at the end of the day it really doesn't matter much which you choose. Both will bold your text and if your website is important enough to be worth optimizing for screen-readers, you should probably hire a few people to help you out.

Convert your Scratch projects to JavaScript automatically with Leopard!

lugga

IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

w3schools - bad for advanced, good for simple.

It follows bad practices in some of the advanced stuff, but for simple stuff it's alright.

I first learnt some basic HTML and CSS from http://html.net which is a good website for HTML, Javascript and CSS and (not recommended) PHP.

Gaza101

Jonathan50 wrote:
Gaza101 wrote:
I'm going to assume that, since you're inexperienced with CSS, you probably make bold and italic text using the following method.
Bold text.
Italic text.
Although this is technically correct HTML, it is invalid HTML5. As a result, I'd like you to completely forget about this method of styling.
You can just use instead of and instead of . This has the advantage that it'll help blind people because those tags say “this text is emphasized” and “this text is important” rather than “this text is italic” and “this text is bold” (which is irrelevant to blind people) so screen readers can do something appropriate. I think.

I didn't think to mention this. Thanks for doing so.

IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

Must… not… hate…

Last edited by Gaza101 (Aug. 28, 2016 19:05:44)

Gaza101: retired member of the Scratch 2.0 Transition Team

liam48D

IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

On one hand.. link-only answers really don't help much. Why not help them with their specific problem?

Then again, they did ask for a way to learn CSS

202e-202e-202e-202e-202e UNI-CODE~~~~~

DimensionPvP

If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website

Supportaa (Click to go to thread link)
————————————————————————————————————————————————————————————————–
When life gives you lemons…
you make lemonade.

lugga

DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website

The second link you gave requires a $20 a month subscription. And I could probably find a better free tutorial.

DimensionPvP

lugga wrote:
DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website
The second link you gave requires a $20 a month subscription. And I could probably find a better free tutorial.

Yep. Found something way better. Try html.
It lets you learn HTML, HTML5 which are main website stuff.
CSS and JavaScript which gives nice touches and interactivity to your website.
PHP which can add advanced features like databases, and lets you connect to servers.
It explains stuff and helps you in the best ways.

Supportaa (Click to go to thread link)
————————————————————————————————————————————————————————————————–
When life gives you lemons…
you make lemonade.

lugga

DimensionPvP wrote:
lugga wrote:
DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website
The second link you gave requires a $20 a month subscription. And I could probably find a better free tutorial.

Yep. Found something way better. Try html.
It lets you learn HTML, HTML5 which are main website stuff.
CSS and JavaScript which gives nice touches and interactivity to your website.
PHP which can add advanced features like databases, and lets you connect to servers.
It explains stuff and helps you in the best ways.

Hey I suggested html.net earlier

html.net is actually how I found out about HTML, I wouldn't recommend the PHP though, it might be good for syntax and stuff, but it's always safer to follow practices talked about on the official PHP website (they also offer documentation :O), I've forgot the link, but it's always better to to use the official resources for learning about database management, and then watch all the computerphile vidoes on youtube about XSS, SQL injection and other security holes so you know: a) The bad things that happen, and b) How to prevent them. (Sorry I just had to mention computerphile, such a good channel) Also w3schools is alright for the simple stuff, I like how it has a online editor to see the results of what you've done (good for messing arround with css).

jokebookservice1

lugga wrote:
DimensionPvP wrote:
lugga wrote:
DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website
The second link you gave requires a $20 a month subscription. And I could probably find a better free tutorial.

Yep. Found something way better. Try html.
It lets you learn HTML, HTML5 which are main website stuff.
CSS and JavaScript which gives nice touches and interactivity to your website.
PHP which can add advanced features like databases, and lets you connect to servers.
It explains stuff and helps you in the best ways.
Hey I suggested html.net earlier
html.net is actually how I found out about HTML, I wouldn't recommend the PHP though, it might be good for syntax and stuff, but it's always safer to follow practices talked about on the official PHP website (they also offer documentation :O), I've forgot the link, but it's always better to to use the official resources for learning about database management, and then watch all the computerphile vidoes on youtube about XSS, SQL injection and other security holes so you know: a) The bad things that happen, and b) How to prevent them. (Sorry I just had to mention computerphile, such a good channel) Also w3schools is alright for the simple stuff, I like how it has a online editor to see the results of what you've done (good for messing arround with css).

Well, if you want a good way to see live results as you edit code, I reccomend https://jsbin.com as it updates the output instantly.

Also, here is the computerphile XSS video (with Tom Scott– my favourite at explaining code related stuff) and here is the SQL injection one (again with Tom Scott).

wizzwizz7

IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com

I'm not clever enough to be an ATer. Also, I don't even have the ‘500+ posts’ rank. Yippee, I get to hate.

wizzwizz7

DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website

CodeCademy is inaccurate - but if it were accurate, it would be awesome!

Jonathan50

wizzwizz7 wrote:
IcyCoder wrote:
(ATers do not hate but I am going to say this) to learn this stuff you should use w3schools.com
I'm not clever enough to be an ATer. Also, I don't even have the ‘500+ posts’ rank. Yippee, I get to hate.

You're clever enough. And you made multiple posts on the ATs. You're an ATer

Not yet a Knight of the Mu Calculus.

lugga

jokebookservice1 wrote:
lugga wrote:
DimensionPvP wrote:
lugga wrote:
DimensionPvP wrote:
If you wanna learn something, try CodeCademy.

It gets you started up. You can save your progress. It's quite fun and you can learn how to make a website
The second link you gave requires a $20 a month subscription. And I could probably find a better free tutorial.

Yep. Found something way better. Try html.
It lets you learn HTML, HTML5 which are main website stuff.
CSS and JavaScript which gives nice touches and interactivity to your website.
PHP which can add advanced features like databases, and lets you connect to servers.
It explains stuff and helps you in the best ways.
Hey I suggested html.net earlier
html.net is actually how I found out about HTML, I wouldn't recommend the PHP though, it might be good for syntax and stuff, but it's always safer to follow practices talked about on the official PHP website (they also offer documentation :O), I've forgot the link, but it's always better to to use the official resources for learning about database management, and then watch all the computerphile vidoes on youtube about XSS, SQL injection and other security holes so you know: a) The bad things that happen, and b) How to prevent them. (Sorry I just had to mention computerphile, such a good channel) Also w3schools is alright for the simple stuff, I like how it has a online editor to see the results of what you've done (good for messing arround with css).
Well, if you want a good way to see live results as you edit code, I reccomend https://jsbin.com as it updates the output instantly.

Also, here is the computerphile XSS video (with Tom Scott– my favourite at explaining code related stuff) and here is the SQL injection one (again with Tom Scott).

Tom Scott is the best. It's a shame that not all of the videos he made on security flaws aren't on the computerphile channel.

Discuss Scratch