Hey there, guys
So I’m new to this page, so far I’ve been wondering around learning Python/Java, but kept getting stuck at some point.
Just discovered FCC and I just love everything so far, it took me a while to get rid of the fear of that typical “pay to learn more” message appearing, I love that is bases it’s learning on projects, seems like the best way to learn.
Overall I’m happy and excited about this new discovery
I just did the Tribute page challenge, I mostly tried to copy the original one and found myself into some problems, not knowing how to do stuff.
I did look around, some stuff are hard to understand, but anyways, I just wanted to show it to you guys and ask for ways to improve it because i don’t really like it that much.
Ignore the actual content, it’s the first random thing that came to mind
I like Radiohead
Here’s the Tribute Page: https://codepen.io/gabrieljim/full/GmvGoM/
Good Tribute Page subject.
The first thing I would suggest is you put all the style in your CSS box, so that you improve code readability in the HTML box and also it is more organized to have your style separate from your markup.
Do keep in mind that the “jumboron” class is a Bootstrap class and it will add style to it. Try replacing it with the “container” bootstrap class and see what that does, it will set your content to a fixed width and center is so it will make it easier for you.
If you want to keep the “jumbotron” then you could add a max-width on it and add margin:0 auto to make it sit in the middle of the page and not occupy the full width of your window.
You can also try looking at other Tribute pages done by our fellow campers on codepen: http://codepen.io/search/pens?q=tribute%20page&limit=all&order=newest&depth=everything&show_forks=false
You can try and play with one of them see what does what in their code, by forking it, and then go back on your project and try improving it from there
Hope it helps, keep on the good work and good luck.
Hey! Thanks for the tips, I will look into it.
I don’t know what the jumbo thing does, hehe, I just wanted a background like the one of the example page, checked the code and got that.
Yeah I did have some problems getting things stay in the middle, thanks for the idea!
Since I see that you are far more experienced than me, could you also please take a look at my tribute page. https://codepen.io/brankaandreja/full/VbzRxV/
Yeah, keeping things centered and layout in general is difficult. You can check out the sections on bootstrap on the W3 School website. Very useful for design tricks.
Nice Tribute page. I like you went out of the pattern and made it your own. The parallax effect is a very nice touch.
There are a couple of things that will help with your page and those are:
- on your slider, when you change sides there is a small jump of the page, this can be solved by setting a fixed height to the container of the slider.
- Because you have .rows nested in other .rows there is a small horizontal scroll. This happens because the .row Bootstrap class has a margin-left and a margin-right of -15px. So it stretches your content beyond your parent. Try getting rid of .rows in .rows for this page and the horizontal scroll should go away.
If you are interested in responsive as well, do take a look at a mobile.
Your title and page get misplaced and also your discography has both the images first and then the song title. You can group album cover with song title in the same divs and try playing with that.
Hope it helps. Keep up the good work.
I really appreaciate that you took the time to look at my code. I will try to improve the things you suggested and fix the mobile version aswell. Thank you!