Do you ever try to do something that looks so simple and fairly straight forward, and other people around you are able to do it without a problem, but you’re the one that’s having trouble?
Welcome to my struggle.
Although my coding skills are still at the beginner level and I haven’t touched it since we created it, anyone that goes onto my site is greeted with a white page with a simple sentence explaining that there’s nothing to see. I may not be able to create an elegant page with fancy features (yet), I at least wanted to make my page look a little bit more lively. To do that, I wanted to simply apply a background image to my page.
First things first, I wanted to play around with the code and not make anything final on the main page, so I duplicated my resume.css and renamed it for my sandbox page.
Since I had no idea what I was doing, much like with everything else when it comes to web design, I had to trust the good and mighty Google for the answer. Much like the rest of the class, I used w3school.com to guide me through the process. At first, I wanted to set the background using CSS, and this is what the code would look like:
Okay, simple enough. So I tried that myself:
(I am aware there is no semicolon in the above image. I added it after taking this screenshot. It did not help)
No results. Okay, maybe there’s something else you have to do but they’re just not showing that part. I tried adding images/ to before the image file. Nope, that didn’t work.
This is the part where I tell you that everything starts to look like this.
After trying multiple other combinations and trying to toy with the code, I had a thought: “Did I add the image to the server?”
Oh, geez. So I did that, and then used the initial code I used. Still no dice. I looked up multiple videos and followed them to see if there was something I was doing wrong. None of them were working for me.
…Okay, now I’m getting frustrated.
This is about the time I noticed that Mike F was able to do what I was trying to do, but in HTML. “Alright,” I thought. “I’ll try what he did.” I used the same page of w3school that he had used and switched to my sandbox’s index.html document.
I did exactly what he had done, and checked to make sure I wasn’t making the same mistakes he made. I inserted the code, and then uploaded the file to the server
No changes.
Yep. That’s it. I’m done with this.
After spending hours trying to figure out something that seemed so simple from the start, I came up empty. As of now, I don’t know if there was something I was doing wrong with the code or there was something outside of it I didn’t take care of. With my luck, it’s something so simple and an easy oversight.
Mike, if you’re reading this: please. Help a brother out and show me your ways!
-Domenic Manzi
February 24, 2017 at 1:43 pm
Hey Dom,
So great that you were trying to add a background image, something that we will definitely be doing in the second project.
I took a look at the sandbox/index.html file and don’t see the code you are showing here, so perhaps you deleted it?
Regardless, the reason your CSS was not showing up is because you didn’t link the .html document to the .css document.
In sandbox/index.html, you have:
<head>
<title>My sandbox file</title>
</head>
You need to add a line of code so it looks like this:
<head>
<title>My sandbox file<title>
<link rel=”stylesheet” href=”../css/resume.css”>
<head>
Note, I added the
../
because I’m assuming you’re putting the new .css file in the css folder.Try that out and let me know what happens….
Bill
LikeLike
February 24, 2017 at 3:33 pm
Don’t get frustrated! Ask for help when you need it. The class is here to help you.
LikeLike
February 24, 2017 at 5:15 pm
Had the same frustrations, gets complicated when you truly think you have everything right. Hopefully it gets better for the both of us!
-Avery
LikeLike
February 24, 2017 at 6:47 pm
It is a very daunting feeling when you keep switching the codes, and reading and re reading them to find a mistake, but still come up empty. What I learned is that it helps to look at other peoples resumes “page source”. That way you can compare your brackets to theres and maybe see if it’s an obvious thing you’re missing. Also, it helps because what may be challenging for you could be easy for others and vice versa.
LikeLike
February 26, 2017 at 1:43 am
I totally feel your pain! We’ve definitely all been there. I think the best thing to do is proofread as much as possible, I’m always forgetting semi colons.
LikeLike
February 26, 2017 at 7:11 pm
I 100 percent understand the struggle of coding not coming out the way you want it to or it not working. It’s super frustrating, then you have to go back and look over all your coding again and see where you went wrong; I’ve done it about a million and one times. It’s awesome that you tried to do a background image and play around with it even though it didn’t work. But hey, that’s what this class is for! We’re supposed to be making mistakes and learning from them to better our websites. Keep up the good work and don’t get discouraged! We’re all in the same boat and here to help.
-Gina
LikeLike
February 26, 2017 at 8:28 pm
I can relate to the frustration you have had, it is very tedious and specific that everything be exact to work. I agree that looking at other’s page source is helpful. In addition, it helps sometimes to put it away, clear your head and then look at it. I have found that all of a sudden, I see the issue. As we are getting further in the class, it is helpful to have samples to assist. It also help to see that others have the same struggles, but we ultimately solve them and then feel a sense of accomplishment.
LikeLike
February 27, 2017 at 3:01 am
I can definitely say I feel the same frustrations with coding! It takes the smallest mistakes to through everything off which gets so frustrating. I found that once I realized how such minor things will mess up the code, Im learning how to be extremely careful in proofing my codes so that a small error doesn’t turn into a bigger problem.
LikeLike
March 1, 2017 at 4:18 am
Totally relate to this, when you feel like you’re the only one struggling with coding/ web design. Have faith though Dom, trust me you’re not the only one! I’m always struggling #strugglebuds
LikeLike
March 1, 2017 at 2:41 pm
Very relate-able. in coding, the smallest mistakes can and do mess everything up. It is all part of the process though. 🙂 – michael
LikeLike