# New and (hopefully) Improved Tribute Page!

**URL:** <https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715>\
**Category:** I Built This\
**Created:** [June 8, 2019, 12:41pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715 "2019-06-08T12:41:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 12:41pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/1 "2019-06-08T12:41:18Z")

</div>

Hey everybody! Hope you are all good! 😃

While I have been doing other projects, I thought I do another tribute page project on the side, but this time, with an attempt to advance my skills on design and functionality.

For this project, I did a tribute on John Steinbeck. Hope you all like it, but your feedback is greatly appreciated especially on the responsive design.

Enjoy!

See the Pen [John Steinbeck Tribute Page](https://codepen.io/Madalena-Design/pen/mYNJjW/) by Madalene Aza ([@Madalena-Design](https://codepen.io/Madalena-Design)) on [CodePen](https://codepen.io).

---

<div class="post-metadata">

**Author:** ![talhaspartan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/talhaspartan/32/117313_2.png) [@talhaspartan](https://forum.freecodecamp.org/u/talhaspartan)\
**Post date:** [June 8, 2019, 1:54pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/2 "2019-06-08T13:54:06Z")

</div>

[https://codepen.io/Madalena-Design/pen/mYNJjW/](https://codepen.io/Madalena-Design/pen/mYNJjW/) this tribute page is better than the old one . i loved it .

---

<div class="post-metadata">

**Author:** ![moshe](https://avatars.discourse-cdn.com/v4/letter/m/b9e5f3/32.png) [@moshe](https://forum.freecodecamp.org/u/moshe)\
**Post date:** [June 8, 2019, 1:56pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/3 "2019-06-08T13:56:41Z")

</div>

First, the color choices are good, then the responsiveness is fascinating too. I also like the smooth scrolling. It’s beautiful…👍

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 3:12pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/4 "2019-06-08T15:12:19Z")

</div>

Thank you! I totally agree with you, it is much better than my first tribute page 😁

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 3:15pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/5 "2019-06-08T15:15:41Z")

</div>

Hey! Thank you very much! I am really happy to hear that you like the colour choices because they were one of my concerns! So, that makes me relieved! 😌

---

<div class="post-metadata">

**Author:** ![cryptographicfool](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cryptographicfool/32/118205_2.png) [@cryptographicfool](https://forum.freecodecamp.org/u/cryptographicfool)\
**Post date:** [June 8, 2019, 3:47pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/6 "2019-06-08T15:47:17Z")

</div>

Wow, that is really good. I have only just reached responsive web design principles but seeing your tribute page gave me a lot of inspiration. Can’t wait to learn the stuff you have used with scrolling and hover animations.

The color as well as the layout is very pleasing to the eye and easy to follow through. 🙂  
Thanks for sharing. Cheers!

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 5:54pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/7 "2019-06-08T17:54:30Z")

</div>

Awww thanks I am really glad to hear that! It is much appreciated 😊 Responsive design can be challenging but with the amount of research, tutorials and extra courses, it can be done! 😄

---

<div class="post-metadata">

**Author:** ![jugges](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jugges/32/114476_2.png) [@jugges](https://forum.freecodecamp.org/u/jugges)\
**Post date:** [June 8, 2019, 5:56pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/8 "2019-06-08T17:56:46Z")

</div>

Great job! Not a single bad word on it 😄

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 6:06pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/9 "2019-06-08T18:06:11Z")

</div>

Thank you! It is much appreciated! 😊

---

<div class="post-metadata">

**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\
**Post date:** [June 8, 2019, 6:22pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/10 "2019-06-08T18:22:13Z")

</div>

Very nice! Just one thing on improving for mobile:  
Go to pen settings -\> html -\> insert the most common viewport meta tag -\> Save & Close.

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 6:58pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/11 "2019-06-08T18:58:37Z")

</div>

Hey! Thank you for the advice! I did the process as followed and now have added the viewport meta tag. Will be doing this from now on 😊

---

<div class="post-metadata">

**Author:** ![dyerlin2018](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@dyerlin2018](https://forum.freecodecamp.org/u/dyerlin2018)\
**Post date:** [June 8, 2019, 8:07pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/12 "2019-06-08T20:07:19Z")

</div>

I’m no professional by any means but OMG! Girl, your page looks awesome. I love it, especially the responsiveness!

---

<div class="post-metadata">

**Author:** ![Madalena.design](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/madalena.design/32/114308_2.png) [@Madalena.design](https://forum.freecodecamp.org/u/Madalena.design)\
**Post date:** [June 8, 2019, 8:27pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/13 "2019-06-08T20:27:43Z")

</div>

Aww thank you! I am happy to hear to that! If anything, I am definitely no professional myself, especially with the responsiveness, to achieve what I have designed is hours of tutorials and research but I am happy to make it in the end!

---

<div class="post-metadata">

**Author:** ![ImpaLa604](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/impala604/32/117290_2.png) [@ImpaLa604](https://forum.freecodecamp.org/u/ImpaLa604)\
**Post date:** [June 8, 2019, 8:32pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/14 "2019-06-08T20:32:35Z")

</div>

Your tribute page looks amazing! Great work!

---

<div class="post-metadata">

**Author:** ![dyerlin2018](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@dyerlin2018](https://forum.freecodecamp.org/u/dyerlin2018)\
**Post date:** [June 8, 2019, 8:36pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/15 "2019-06-08T20:36:58Z")

</div>

It’s always satisfying to see the final render of these hours coding !🙂  
Oh! by the way can you take a look at this project : [https://codepen.io/Dyerlin/pen/zQVoVv](https://codepen.io/Dyerlin/pen/zQVoVv), and tell me what you think about it. Please, be brutally honest!

---

<div class="post-metadata">

**Author:** ![ashikasameem](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@ashikasameem](https://forum.freecodecamp.org/u/ashikasameem)\
**Post date:** [June 8, 2019, 8:49pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/16 "2019-06-08T20:49:14Z")

</div>

aye it is so good! keep up your work!

---

<div class="post-metadata">

**Author:** ![brandon\_wallace](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brandon_wallace/32/198757_2.png) [@brandon\_wallace](https://forum.freecodecamp.org/u/brandon_wallace)\
**Post date:** [June 8, 2019, 9:22pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/17 "2019-06-08T21:22:38Z")

</div>

@Madalena.design It looks professional.  
In mobile view the novel icons could be a bigger size. View the page on a small screened smartphone.

---

<div class="post-metadata">

**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\
**Post date:** [June 8, 2019, 9:30pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/18 "2019-06-08T21:30:58Z")

</div>

Simulation of iPhone 5 with the novel icons:

 ![DeepinScreenshot_select-area_20190608153015](https://global.discourse-cdn.com/freecodecamp/original/3X/f/0/f098badb99315ac5e21dbf33a8d043ff2abce507.png)

Learn how to simulate devices on this post:

> [@Restaurant-Survey Form](http://forum.freecodecamp.org/t/restaurant-survey-form/280754/18):
>
> Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):

---

<div class="post-metadata">

**Author:** ![dwaynebrock](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dwaynebrock/32/116781_2.png) [@dwaynebrock](https://forum.freecodecamp.org/u/dwaynebrock)\
**Post date:** [June 8, 2019, 9:37pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/19 "2019-06-08T21:37:23Z")

</div>

This site is fantastic, I really like the way the background image shifts on the scrolldown - I personally have never seen that before. Very visually pleasing and well-presented.

The only thing I can see is that downward browser scalability width breaks at 308 pixels. Whether that matters or not would depend on your target audience.

I admire what you have done here, and this gives me an idea of why javascript is worth learning just up the road.

---

<div class="post-metadata">

**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\
**Post date:** [June 8, 2019, 9:39pm UTC](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715/20 "2019-06-08T21:39:48Z")

</div>

> [@dwaynebrock](#):
>
> the way the background image shifts on the scrolldown

That’s very easy to do. You just have to set the image background with `background-image` in CSS, and then set `background-attachment: fixed`. Very easy. It is a nice effect, indeed.

[Next page](https://forum.freecodecamp.org/t/new-and-hopefully-improved-tribute-page/282715.md?page=2)
