Website help

mango · Sep 7, 2018

Hi, so at the moment I have a pretty shit website as I've only just started learning HTML. I have a few questions:

1. How would I turn my website into external CSS code?

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

I know I could save it as a .css file but I have no idea how to open in chrome.

2. Any ideas for a good navigation bar or how to code a good one? I currently have a shit navigation bar that consists of rollover images that redirects you to that web-page, that has no drop down menus or anything.

3. Any of you good graphic designers?

My current website project (work in progress):

teby · Sep 7, 2018

you include the css file in the html code
look it up

roxie · Sep 7, 2018

To link your css file to your html file: https://www.w3schools.com/tags/tag_link.asp
To make simple navigations, u can just use bootstrap's i guess: https://getbootstrap.com/docs/4.1/components/navbar/
You can also make a simple one like this and change the styles to your liking: https://www.w3schools.com/howto/howto_js_topnav.asp

Trebblebob · Sep 9, 2018

I'm just going to say a few things.

Metadata
I'm not sure if you have included it but most people that start learning HTML omit this data and it is quite important. I recommend adding some metadata (put it in the <head> as this will boost your SEO):

HTML:

<meta name="keywords" content="some, tags, like, this"/>
<meta name="description" content="What is in your site (max 150 chars)"/>
<meta name="subject" content="What is this page for?"/>

<!-- this adds mobile responsiveness (zooms in on mobile screens) -->
<meta name="viewport" content="width=device-width, initial-scale=1">

You can find more <meta> tags here: https://gist.github.com/lancejpollard/1978404.

Navigation
For the navigation bar, you have a few choices, you can use frameworks such as Bootstrap (suggested by Roxie) or W3.CSS (slightly easier to learn) or use a preset from a tutorial site. The thing you need to look out for though is mobile responsiveness. It is a big factor in terms of your site actually being found and viewed by people. Navbars a real bitch at times so you need to get them right.

The best option for this is to use something known as Media Queries. This is a CSS technique that can check certain things about the user's viewport. The most useful of which is the max-width breakpoint. It is essentially an if statement that includes some CSS if the query conditions are true. You can read more about them here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

You should always be thinking about a mobile-first design (Bootstrap and W3.CSS have this ideology in mind). Search engines also look for sites that are mobile friendly which is something to consider.

Background
Also if you want a pretty neat looking animated background I recommend looking into particles.js. This might be perfect for you considering you're background is space themed.

May I also inquire what you are using to code? If you are using something like Notepad++ I highly recommend moving to something such as Visual Studio Code. It makes things so much easier to code.

teby · Sep 9, 2018

Qyndryx said:
May I also inquire what you are using to code? If you are using something like Notepad++ I highly recommend moving to something such as Visual Studio Code. It makes things so much easier to code.

dont use anything but visual studio code, actually best ide ive ever used

Trebblebob · Sep 9, 2018

ray said:
dont use anything but visual studio code, actually best ide ive ever used

I had issues with it before but I've recently gone back to it and I'm loving it so far. Really useful piece of kit.

mango · Sep 9, 2018

Qyndryx said:
May I also inquire what you are using to code? If you are using something like Notepad++ I highly recommend moving to something such as Visual Studio Code. It makes things so much easier to code.

I'm using Sublime Text. Really helpful.

roxie · Sep 9, 2018

I'll forward you to the best YouTube channel I know of (in my opinion)!
DevTips, at least when Travis Neilson was the owner of that channel. Check its playlists and look for html CSS and basic web! it will help a lot.

Trebblebob · Sep 9, 2018

Mango said:
I'm using Sublime Text. Really helpful.

I really don't see the need for Sublime text unless you are working with really large files (over 5 MB). VSC offers Source Control, Intellisense (better than the autocomplete on ST3) and a shit ton of extensions. It just seems like a much better option... oh and it's completely free.

roxie · Sep 9, 2018

This was a duplicate message. Sorry

Trebblebob · Sep 9, 2018

I'm also going to add some really useful centring CSS. This will centre an element horizontally and vertically:

CSS:

top: 50%;
left: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);

You could also set the position to fixed if people aren't going to scroll or if you were making a modal or something.

Note: this is best suited to centring a <div> element.

HTML:

<html>
    <head>
        <style>
            .center {
                /* the css from above */
            }
        </style>
    </head>
    <body>
        <div class="center">
            <p>
                A centered element.
            </p>
        </div>
    </body>
</html>

You will get this.

Dank · Sep 9, 2018

Qyndryx said:
I'm also going to add some really useful centring CSS. This will centre an element horizontally and vertically:

CSS:

top: 50%; left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%);

You could also set the position to fixed if people aren't going to scroll or if you were making a modal or something.

Note: this is best suited to centring a <div> element.

HTML:

<html> <head> <style> .center { /* the css from above */ } </style> </head> <body> <div class="center"> <p> A centered element. </p> </div> </body> </html>

You will get this.

Dont put css in your .html keep it in a different ile and then link them together, keeps it more clean.

Trebblebob · Sep 9, 2018

Dank said:
Dont put css in your .html keep it in a different ile and then link them together, keeps it more clean.

im just making an example...

roxie · Sep 9, 2018

Also if u want to center something, that is not the best way. U can use margin: 0 auto; for example. or even flexbox.

Trebblebob · Sep 9, 2018

roxie said:
Also if u want to center something, that is not the best way. U can use margin: 0 auto; for example. or even flexbox.

That only centres horizontally.

roxie · Sep 9, 2018

Qyndryx said:
That only centres horizontally.

u can also center vertically by just doing margin: auto; for this to work, ur element has to have a height and a width. and the parent element as well

Trebblebob · Sep 9, 2018

roxie said:
u can also center vertically by just doing margin: auto; for this to work, ur element has to have a height and a width. and the parent element as well

... which becomes a waste of time if you are just centering something in the middle of the viewport. It makes more work.

roxie · Sep 9, 2018

Qyndryx said:
... which becomes a waste of time if you are just centering something in the middle of the viewport. It makes more work.

then just use flexbox. its easier, up to date, and its what the cewl kids do nowadays

CSS:

parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

mango · Sep 9, 2018

roxie said:
then just use flexbox. its easier, up to date, and its what the cewl kids do nowadays

CSS:

parent { display: flex; justify-content: center; align-items: center; }

What am I doing wrong here?

roxie · Sep 9, 2018

Do you want to center the logo and the iframe? also, can u come on ts?

Website help

Similar threads