1st Project: Alan Turing Tribute Page

1st Project: Alan Turing Tribute Page
0

#1

Hey guys! I just finished my tribute page for freecodecamp. I am very new to coding so I would love some feedback! https://codepen.io/abock13/full/NjKWeo/


#2

Nice and clean… great use of fonts too. Nice job.


#3

Just peeked at your codepen editor. Try moving everything that’s between your STYLE tags into the CSS editor window of codepen. If I’m not mistaken, the codepen editor will “take care” of merging the HTML, CSS and JavaScript. Don’t think you’ll need STYLE tags.


#4

Yeah…I noticed that I could do that way towards the end which is why I only have one element in CSS. :frowning: I went to Barnes n Noble 2 days ago and got myself an html/css book; which is where I learned the difference. From my understanding HTML is just inputting the text while CSS is styling and designing it. Is that correct?

Also, Thanks for the advice! I planned on fixing it at a later time but I wanted to get feedback on the layout of it. Truth be told, I’m awful at designing so I wasn’t too sure if the layout and color scheme was good enough. I was aiming for a simple and organized design. I really am looking forward to the more fun designs and experimenting with Java but since this is my first project I wanted to keep it basic.


#5

Gotcha, me too… I wanted simple. Yes, CSS = cascading style sheets… so, yes, you “stylize” the page mainly in there. Kind of like making a template for types of things that go on the page. Same idea as style sheets in MS Word and InDesign to a certain extent.

I noticed you using h2, h3, h4, h5 & h6… seems like a lot of headers. I’m no expert, but not sure that’s “conventional”. I see why you did it with the subtle font size differences and spacings, etc. I think maybe embedding that stuff in a DIV may help with spacings.

I have done some hacking around over the years and I am using FCC for structure and guidance. Been coding mostly in C# using unity recently, so getting back to HTML, CSS and javascript is a bit head-scratching trying to remember.
Good luck on the next project… I am at a standstill, as it is a portfolio page.


#6

Thanks for the advice! I truly am new to coding and pretty much computer science in general. I graduated with a much different degree but always wanted to try coding. So unfortunately, I have a very long way to go.

Anyways, thank you for teaching me the difference and about div. I’ll try to fix up the code to make it cleaner and more organized.

As for the portfolio, it does seem very intimidating to me considering how long it took me to do the tribute page but the community, and you, have been really helpful so I’m not as intimated as I first started.

Admittedly, I’m going to try a much different path than what I did for the tribute page. I went straight in and tried guessing and designing as I went through it. Which I know now was a big mistake. But for the portfolio, I want to plan out the design/layout before I even begin to code and definitely look at other examples. Once I set that up, it’ll be much easier going in. At least I hope it will. Anyways, maybe you should try the same?

And good luck to you too! Once again, I really appreciate the feedback!


#7

Oh wow yeah, I also like it… The colours and the fonts you used do look great. I just finished mine and you have me wanting to put some more work into it haha!

Agree with moving the css styles into css. Also, just for info, you have the classes dark and blue for your text in the html but I dont see it in your css, probably forgot to remove them? One other thing, might just be a preference thing, but in case you may not know the option :slight_smile: you created the class white-text and used it for your h1 and h3 tags… another thing you could do instead of creating a class for them just to change the color, is to just use css to say you want h1 and h3 to have a color of white like so : h1, h3 {color:#fff}; that would do the very same thing with less code and then also youre not committed to the white-text class in case you want to change the colour later, or decide to make the h1 and h3 be different colors.

As a side note, I just saw the movie about Turing a few weeks ago, can’t remember the name of it now… but my heart hit the floor at the end and reading your tribute reminded me of that all over again. Really awesome choice to do this project on.


#8

Thanks for the feedback! I’m really happy to know you also like the colors and layout! :smile:

And yeah. hahahaha. I learned last minute the difference between html and css so I barely have anything in my css portion. Oh! and the “dark blue” is in there. hahahaha. The font is actually blue. Not black. If I used black font it wouldn’t appeal as nicely. The dark blue blends with the colors better.

Also, thanks for telling me about the h1,h3 solution! I didn’t know we could do that! hahaha. Goes to show how much I need to learn.

And the movie was so good! I never even knew about Alan before the movie so I only saw it fitting to do my tribute page about him!


#9

Don’t worry, I’ve been using css forever but I just kinda figured things out on a need to know basis right when I needed it. Now, I’m focusing on really understanding everything so I have a lot to learn too :slight_smile:

And for sure, it’s not too often I get the feels watching a movie, but this one really got me. So glad I watched it alone lol


#10

I echo what @cndragn wrote and wanted to make similar suggestions, but I didn’t want to hijack the discussion. One of the things that coders are taught, and you will get this as you progress, is that once you find yourself duplicating code… STOP… and think of a more efficient way of condensing, refactoring and reusing your code. Or, if you think about having to make edits, like changing a font color, how many places would I need to make that edit. Best-case scenario should be in only one place. Makes for more efficient & streamlined code. Check-out your h3, h4 and white-case classes. I think you could make those classes a bit cleaner, with less code and more modular; the font-family (and it’s substitutions), the background-color and text-align attributes could be moved to the white-text class?