INTP Forum  

Go Back   INTP Forum > Within > Science & Technology

Reply
 
Thread Tools Search this Thread Display Modes
Old 28th-December-2016, 11:52 PM   #1
TBerg
fallen angel who hasn't earned his wings
 
TBerg's Avatar
 

Join Date: Oct 2013
Posts: 2,424
macossafari
Default Coding My First Website from Scratch

I have been learning web development as an entre into the wider tech community, and I am trying to make a website that would actually serve the right purpose.

I think I have a good basic command of the code, and I am using it exactly as I see it in examples on Codecademy, W3Schools, and a textbook I downloaded, but the CSS is not applying to the webpage.

style.css:

Code:
<style>
.header {
	font-family: Arial;
	font-size: 20px;
}
</style>
index.html:

Code:
<DOCTYPE! html>
<html>
<head>
<title>Jewelry and Hair Accessories</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body align="center">
<div class="header">
<h1>Jewelry and Hair Accessories</h1>
</div>
<p>This is the first draft of my website.</p>
</body>
</html>
Why is it not changing the website header?

Thanks to all who look at this. I am trying to figure out the first bugs before I make more of them.
__________________
My blog: https://libercolumbia.wordpress.com/

Thinking myself and others out of our own holes.
TBerg is offline   Reply With Quote
Old 29th-December-2016, 12:08 AM   #2
Auburn
Creator of Castles in the Sky
 
Auburn's Avatar
 

Join Date: Sep 2008
Location: On the ground
Posts: 2,057
windows_98_nt_2000firefox
Default Re: Coding My First Website from Scratch

If your css is in a style.css page, then you don't need to have the [style] tags in the page. That should do it I think.

Good luck with this!
Auburn is offline   Reply With Quote
Old 29th-December-2016, 12:39 AM   #3
TBerg
fallen angel who hasn't earned his wings
 
TBerg's Avatar
 

Join Date: Oct 2013
Posts: 2,424
macossafari
Default Re: Coding My First Website from Scratch

I can't believe I had such a small bug making me search for a solution for over two hours. Why wasn't that explained from the very beginning?

Anyway. I appreciate the tip, Auburn. It transformed everything!
__________________
My blog: https://libercolumbia.wordpress.com/

Thinking myself and others out of our own holes.
TBerg is offline   Reply With Quote
Old 29th-December-2016, 12:42 AM   #4
Puffy
Demon Alpaca Overlord
 
Puffy's Avatar
 

Join Date: Nov 2009
Location: SOON
Posts: 2,665
macossafari
Default Re: Coding My First Website from Scratch

^ +1. You can include css styles within the index.html itself using html's <style> element. The problem is that your using this in a .css file when that's not correct css syntax.

Just change it to:

Quote:
.header {
font-family: Arial;
font-size: 20px;
}
While you can use the <style> element you're correct not to. It's best practice to keep your content (html), presentation (css), and behaviour (javascript) in separate files. Read into the separation of concerns concept for more.

You can also use your browser to help you debug as you go along if you run into any more errors. When the browser ran your script it would have logged an error you can read in the browser console to get more specific info on what went wrong. To open the console on mac safari press cmd+alt+i then go into the console tab.

I learnt web-development this year and have recently begun supporting myself with it as a freelancer. Feel free to pm me if you need suggestions for resources.
__________________

Puffy is offline   Reply With Quote
Old 29th-December-2016, 04:02 PM   #5
TBerg
fallen angel who hasn't earned his wings
 
TBerg's Avatar
 

Join Date: Oct 2013
Posts: 2,424
macossafari
Default Re: Coding My First Website from Scratch

Okay. I have another stupid problem. This time I can't change the font on my navigation bar. It stays small.

Code:
<DOCTYPE! html>
<html>
<head>
<title>Jewelry and Hair Accessories</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body align="center">
<div class="header">
<h1>Jewelry and Hair Accessories</h1>
</div>
<div class="menu">
<ul>
<li>Front</li>
<li>Rings</li>
<li>Earrings</li>
<li>Barrettes</li>
<li>Hairpins</li>
</ul>
</div>
<p>This is the first draft of my website.</p>
</body>
</html>
Code:
body {
	align-content: center;
	min-width: 300px;
}
.header {
	font-family: Garamond;
	font-size: 20px;
	text-align: center;
}
.menu {
  border: black;
  font-family: Garamond;
  font-size: 14px;
  text-align: center;
  position: fixed;
  left: 0;
  z-index: 999;
  width: 100%;
}
ul, .menu {
	align-content: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 14px;
}
li, .menu {
	font-size: 14px;
	background-color: red;
	padding: 3px;
	display: inline;
}
Thanks again, everyone. My near-term goals are similar to what you are doing, Puffy.
__________________
My blog: https://libercolumbia.wordpress.com/

Thinking myself and others out of our own holes.
TBerg is offline   Reply With Quote
Old 29th-December-2016, 05:28 PM   #6
Puffy
Demon Alpaca Overlord
 
Puffy's Avatar
 

Join Date: Nov 2009
Location: SOON
Posts: 2,665
macossafari
Default Re: Coding My First Website from Scratch

Quote:
Originally Posted by TBerg View Post
Okay. I have another stupid problem. This time I can't change the font on my navigation bar. It stays small.

Code:
<DOCTYPE! html>
<html>
<head>
<title>Jewelry and Hair Accessories</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body align="center">
<div class="header">
<h1>Jewelry and Hair Accessories</h1>
</div>
<div class="menu">
<ul>
<li>Front</li>
<li>Rings</li>
<li>Earrings</li>
<li>Barrettes</li>
<li>Hairpins</li>
</ul>
</div>
<p>This is the first draft of my website.</p>
</body>
</html>
Code:
body {
	align-content: center;
	min-width: 300px;
}
.header {
	font-family: Garamond;
	font-size: 20px;
	text-align: center;
}
.menu {
  border: black;
  font-family: Garamond;
  font-size: 14px;
  text-align: center;
  position: fixed;
  left: 0;
  z-index: 999;
  width: 100%;
}
ul, .menu {
	align-content: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 14px;
}
li, .menu {
	font-size: 14px;
	background-color: red;
	padding: 3px;
	display: inline;
}
Thanks again, everyone. My near-term goals are similar to what you are doing, Puffy.
The font-size of the items in your navigation menu are set to 14px by this code:

Code:
li, .menu {
	font-size: 14px;
	background-color: red;
	padding: 3px;
	display: inline;
}
Change the font-size there and they should change size. The only other part of your css with a larger font-size is the header class which is only being applied to the title of your page and not the navigation.

Also, I see you're using the align property on your body element in the html. It's better practice to center the text using the css text-align property in your css file like this:

Code:
body {
  text-align: center;
}
This is because of what I mentioned before re: separation of concerns.
__________________

Puffy is offline   Reply With Quote
Old 29th-December-2016, 07:20 PM   #7
Architect
Professional INTP
 
Architect's Avatar
 

Join Date: Dec 2010
Posts: 6,578
macossafari
Default Re: Coding My First Website from Scratch

I'll give you some advice for the fundamental skills you are developing here.

"What's wrong with my code" questions mean that you haven't tried enough ideas to figure it out on your own. The consummate skill of an excellent programmer is that you know how to look at a problem from many angles, one of which invariably shows you the difficulty. Specifically

Quote:
Originally Posted by TBerg
I can't believe I had such a small bug making me search for a solution for over two hours. Why wasn't that explained from the very beginning?
Programming is the art of really seeing what you're seeing, not what you think your seeing. The examples you have all omit those tags, why did you add them? Because your brain was in HTML mode, even though the answer was right in front of you. They don't explain this because there are millions of things they could explain, too many to enumerate. Plus the authors probably don't even think of it.

This is the first skill - see what's right in front of your face.

The second skill is the debugger - if you had opened up the debugger (available on Chrome, Safari, etc) you surely would have seen an error message.

The third skill is trying things at random to see if it gives you any insight. You could just start at the top, which happens to be your tag. Comment them out (including the </>) and see what happens. Creative experimentation will usually yield lots of information.

Those three tools will get you farther, and you don't have to bother anybody else with your problems In a professional environment you'll get eaten alive (usually) for asking a question you could have figured out yourself, but of course you're just starting out. Regardless, using these skills is the important thing, not getting an answer here or there.
__________________
Spoiler:
Quote:
Originally Posted by skip
I don't see emotions as something that need to be controlled, they're just information.
Quote:
Originally Posted by Starjots
Because I think the Singularity is much more interesting than the Rapture.
Quote:
Originally Posted by NinjaSurfer
I don't really care to act against my nature anymore.
Quote:
Originally Posted by Jennywocky
Discovery channel is like introductory porn for INTPs.
Quote:
Originally Posted by Marvin Minsky
I probably wouldn't go skydiving anyhow because my time is too valuable.
Quote:
Originally Posted by 8151147
Coding is fun, how the hell you can live without it?
Quote:
Originally Posted by E404
Sometimes the hardest part is knowing what I actually want and allowing myself to want it...
Architect is offline   Reply With Quote
Old 29th-December-2016, 09:02 PM   #8
Auburn
Creator of Castles in the Sky
 
Auburn's Avatar
 

Join Date: Sep 2008
Location: On the ground
Posts: 2,057
windows_98_nt_2000firefox
Default Re: Coding My First Website from Scratch

Quote:
The examples you have all omit those tags, why did you add them?
Oh, I got the impression that the examples he saw did have the <style> tags, cuz they were adding it to the html. But they didn't explain how it would look when you move it out of the html. It's an easy assumption to make.

Other types of pages like php do generally keep open and closing tags "<?php" in the page itself. So it can be confusing! I think it's easy to see these things as obvious post-learning but in the start they're often counter-intuitive.
Auburn is offline   Reply With Quote
Old 29th-December-2016, 10:08 PM   #9
Architect
Professional INTP
 
Architect's Avatar
 

Join Date: Dec 2010
Posts: 6,578
macossafari
Default Re: Coding My First Website from Scratch

Quote:
Originally Posted by Auburn View Post
Oh, I got the impression that the examples he saw did have the <style> tags
Well whatever it was. The thing with computers is the field is so vast you're continually learning/relearning whatever you need for the present project. I basically purge details from past technologies (heck it'll probably be obsolete by the next time I get back to it), and just pick up the details of whatever technologies I need at the moment. Haven't messed with making a CRUD page in a long while so it's gone, but if I need it again easy to pick up.

You get really good at learning stuff quickly in this field.
__________________
Spoiler:
Quote:
Originally Posted by skip
I don't see emotions as something that need to be controlled, they're just information.
Quote:
Originally Posted by Starjots
Because I think the Singularity is much more interesting than the Rapture.
Quote:
Originally Posted by NinjaSurfer
I don't really care to act against my nature anymore.
Quote:
Originally Posted by Jennywocky
Discovery channel is like introductory porn for INTPs.
Quote:
Originally Posted by Marvin Minsky
I probably wouldn't go skydiving anyhow because my time is too valuable.
Quote:
Originally Posted by 8151147
Coding is fun, how the hell you can live without it?
Quote:
Originally Posted by E404
Sometimes the hardest part is knowing what I actually want and allowing myself to want it...
Architect is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:12 PM.


Powered by: vBulletin
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Template-Modifications by TMS
no new posts