I came from a designer background so I first went over to Sketch to layout the page, only to realize how hard my design is to code (lol). I don’t think I really used bootstrap to its potential My code is a mess and there are many things I would’ve done differently.
The most challenging part for me is in making it responsive. I had to redo most of it at that point. All that being said, I’m just glad I’m finished with this and I can now share it with you for feedback!
Looks very nice. I wish I had the idea to do something like that. Knowledge seems nothing without ideas
Making it responsive using bootstrap is impossible to me too because I threw so much things in there I don’t even know what I did. Hope I get around it somehow.
Looks good - might be worth adding a delay on the counters tho as i saw your javascript for them but i hadnt scrolled down quick enough to see them actually move
Wow! That looks really good. Maybe the coding is still a bit difficult but you got the designer skills going!
Just what badhoc says, you can edit at which point (height) the numbers start counting up, so maybe when they scroll a bit further on it should start, then it’s more of a suprise.
Looks really great! Love the linear gradient in the first section. And yeah, it also looks like a design that isn’t easiest to code. Some thoughts:
In bootstrap the order of the elements is like this: container > row > columns. Containers basically wrap all of your content, and direct children of row elements may only be col elements. Putting the row above the others is actually what’s causing that little scrollbar at the bottom. Some good reading is in the Bootstrap docs: http://getbootstrap.com/css/#grid
On smaller screens the h1 and picture go under one another, which is good. But right now you are giving the featurepic a big margin top to prevent it from sliding over the h1. Instead, it’s better to give the firstrowtext a position: static again on smaller screens and set the featurepic margin-top to 0. You won’t have to adjust the margin if you change the font size for example. I always try to avoid position: absolute as much as I can because it’s a pain in the ass responsively.
Oh my god. I wish I’d have known this earlier. Would’ve saved me a lot of trouble. Also I never knew of position: static until now, thank you for this! And as for position: absolute, I wholeheartedly agree with you. Everytime I resort to using that some part of me dies lol. Thank you for checking my code and the advice.
I like that you didn’t just meet the bare minimum requirements for the project, but challenged yourself to really own the project. The result is very impressive.
I have one small qualm with the links at the bottom. I think they’d look better if you wrote the title of the articles and then added a link to the article title. As in “a href=“article-link”>article title /a” (I left out the < > to avoid actually writing a link).
The counter adds a nice touch to the page. You can also do animations in CSS. I’ve been following the CSS animations series by DevTips on Youtube. It’s a great series for learning about how to write animations in CSS and for ideas of when you want to use them.
I also checked out your blog for Things I Learned from the Tribute Page Challenge in FreeCodeCamp. It was a nice read. I would share a link to that above as well. I plan to start doing similar writeups of my own FCC projects both to help me learn and to share my process with others.
Keep up the good work, what sort of challenge are you giving yourself with the next project?
Hi @jvalonen! Thank you so much for your feedback. Great call on the links at the bottom. I don’t know why I hadn’t thought of that! I’ll edit my blog post to include that amazing Youtube link and the other advice here as well. Btw please link me to wherever you’re planning to upload your writeups! I’d love to read them.
For the portfolio challenge I already have a pretty challenging layout in mind, but I’m also thinking of adding functionality that will include categories for the thumbnails (UI/UX, Illustrations, etc). So when you click on one category, the thumbnails will get filtered. Also, now that you’ve linked it I’m also thinking of including some CSS Animations in there
How about you? What challenge are you working on at the moment?
I’m working on the Wikipedia search project. I’m almost finished with getting the search working the way I should. Or I did get it working like it should, but I wanted to add a little picture thumbnail next to each search result so that’s taken some extra figuring out.
Once I’m finished with that I’ll start doing some sketches of what I want the search results to look like. I was thinking of something card based. For layout I’m challenging myself to use Flexbox. It seems like a very powerful yet simple framework so I want to learn it.
I also agreed to work on a photography portfolio for a freelance photographer in exchange for some promo pics. Today I was learning how to set up for building a custom wordpress site. I have the basics figured out and a work environment set up (using Atom) so now I can get into designing it. During that project I want to try out parallax scrolling and the subtle slide-in animations when scrolling down that seem popular these days. Here’s an example of the latter.
The Taproot Agency site also has a nice effect with the dark boxes behind elements. I think they achieve them using element:after, and I want to figure how to do it myself
And then there’s the blog I want to start for myself… I’m working on a post for how to gamify your learning process. I did one post on how to overcome the barrier to coming up with new ideas. The next post will hopefully be even better
I signed up to receive new posts you put on your blog via email. Not sure if it will do that for updated posts. Perhaps you could just write a new post?
@rcdjasmin Wow awesome design and one of the best Tribute page I’ve seen. I did the same thing on starting to design it with Sketch but had to re-do all over again because it was kind of difficult to make all this happen in code! My design capabilities are over my code abilities! I also liked your shadow effect on the .caption class and was wondering how did you managed to make it snap to the picture width on larger screens?
@jvalonen Wow that sounds a whole lotta fun and a whole lotta complicated. just read your article – really good! I’m finding it a little difficult to get back to the challenges because of my recent workload, but I’ll definitely work on something this weekend.
Love the examples and excited to see more of your projects!
@Andy Hi, thank you so much! Sorry for my delayed reply. You probably would’ve figured it by now… but I change the width of the caption div to 100% in lower screen sizes.
My code is a mess and there are many things I would’ve done differently.
just read your article – really good! I’m finding it a little difficult to get back to the challenges because of my recent workload, but I’ll definitely work on something this weekend.