Tribute page: done

Tribute page: done
0.0 0

#1

My first project with Freecodecamp.
The code is pretty ugly (even I recognize that) but I did produce a page.

Not quite fluent with
-code indentation (edit)
-use of class or style


#2

That blue color font on the black background does not make it easy to read. Stick with white text on black or a lighter color blue if you want a blue color.

If you could change anything else about the way your project looks, what would it be? We can help you get the design your would like if you have an idea but do not know the html or css to make it work.


#3

Thanks.

Yeah. the blue is too flashy thanks for the user feedback.

I am quite happy with the result (even if it is very simple, and not creative). But my code seems basic and brutal to me. I feel like all my “styles” that I added are a complicated way of realizing things.
And I would have wanted all my “links” on top, but I could not cut&paste them, for some reason.
Also, my elements are difficult to read, like not aligned correctly. I had to weird things to correct that a bit and the final result is not perfect, at all.
It is roughly unaesthetic coding.


#4

It is best to not use the style attribute in your html elements. Move all your styling to the CSS module and use css selectors and class definitions to style your elements. If you need a refresher on how to do this, review the following FCC challenges.


#5

Thanks again. I got messy in my learning.
I did not realize it was going into CSS case. Will do.


#6

I am not understand what you mean by “wanted all my links on top”. Can you give me an example of a link you wanted on top and what you mean by top? Do you mean top of the page? or on top of another element?

Can you explain which parts you would like to align differently and how you want them aligned instead?


#7

I mean “<link href=”. They should be on top of the code, shouldn’t they?

I mean I have the impression it is messy. Should every child be slightly offset from its parent ?
It should be ok for now, but i hope i will be able to write it better. I am a perfectionnist and cannot stand messy not-clean-interface. (lol)


#8

I see you have the Bootstrap 3 loading using the following line and it is at the top of the HTML section. However, I notice you also have loaded Bootstrap 4 in the CSS external files section. You need to only load one. Since you are using Codepen, I recommend using the CSS external files section to do this and do not put the <link> at the top of the HTML section. Behind the scenes, Codepen puts everything in the proper order to work. It actually does put it at the top, but it is better to let it do it for you.

Are you referring to code indentation? Yes, it makes it more readable. In Codepen, there is a dropdown on the right side of each module section you can click and select Tidy (HTML, CSS, JS) for the applicable section and it will “attempt” to perform the indentation for you. You can also use the Analyze feature to check for syntax errors also.


#9

Ok done. Got messy with infos again. lol.

Exactly. I forgot the word, but indentation was my problem.
I used tidy now. ok, cool. But will it be there in the future when i will program (out of codepen) ? I doubt it.
I did not understand everything said the Analyze feature for this time
The ‘background’ attribute is no longer valid on the element and should not be used.
elements inside must contain the ‘itemprop’ attribute.
Seems wrong to me…
But I will keep in mind this fonction too.

Thanks a lot.


#10

Good coding editors usually have a feature like that. If not, then you can always use a site like http://jsbeautifier.org/ It works fairly well for html, css, and JavaScript.

Just move the background styling for the body tag to CSS:

body {
  background: url("https://www.walldevil.com/wallpapers/w07/science-albert-einstein-formulas-mathematics-physics.jpg");
}

Since you are using Codepen, put the google fonts link (below) in the external files section of the CSS module.

https://fonts.googleapis.com/css?family=Rammetto+One