Looking For Feedback On My Tribite Page (Not Actually A Tribute Page)- First Attempt

Code Feedback
1

Okay, so I’ve struggled and strained, and today made something like a tribute page! Well not really, or at all - but it’s based on the same code. Here it is: https://codepen.io/Crash370/pen/xgWZXz

Problems I personally had:

-I couldn’t get rid of that thin white line around the border of the photo. I also couldn’t seem to be able to alter the size of the photo.

-I couldn’t get my google font to work - neither for that matter could I get CourierNew to work.

-Lastly, the origional tribute page had this string ‘

’ which I didn’t find did anything. What is the purpose of such a large string of colum numbers?

Overall I think it’s a bit rudimentary - but I have learned a little. I even stretched some blood over the background rather then just having a fixed red - think it’s nicer that way. But anyway, all feedback you can give is appreciated!

2

Add this in your thumbnail CSS rule. It will clear the border.

thumbnail {
  background-color:rgb(0, 0, 0);
  border: none;
}
1 Like
3

First of all, at the top of the page, you’re missing the <head> tag.

As for the font, you’re missing the complete link. Try pasting the whole
<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">
into the head of the document, and all of a sudden your fonts appear. :slight_smile:

-K

4

Ah. The head thing is pretty inexcusable - I think maybe at a certain point the code was blurring the lines between meta data and on the page data. No excuse though.

As for the link thing I think I must have just forgotten that portion outright. Thank you very much for the help.
I’m curious though, your link doesn’t have a ‘type=‘text/css’’ part. Why is that?

5

I copied it directly from the Google Fonts page. :\

But type="text/css" is what you would use in the <style> block if you decided to use one; it’s part of a bigger command that tells the browser what kind of stylesheet it’s got.

The <head> tag tells the browser to “load this stuff first”, so it can use those things to display your page. Your fonts (pulled from another place on the web) go here, your Bootstrap setup (also coming from somewhere else) goes here.

But the <style> tag tells the browser “here’s the rules for how things look”. You can put your CSS declarations here by themselves, or you can tell the browser to “go get this stylesheet, it’s called sheet.css, and it’s text.”
<link rel="stylesheet" href="sheet.css" type="text\css">

1 Like