# Tribute Project Attempt 01 **URL:** \ **Category:** I Built This\ **Created:** [April 26, 2020, 7:32pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377 "2020-04-26T19:32:34Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![coe9257](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/coe9257/32/134735_2.png) [@coe9257](https://forum.freecodecamp.org/u/coe9257)\ **Post date:** [April 26, 2020, 7:32pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/1 "2020-04-26T19:32:34Z")
Hello, This is my first project on FCC. I really struggled with the graphical design, however, I feel that I have a decent handle on CSS with positioning and responsive design and such. I used google advanced search settings to find a timeline of Bill Gates Accomplishments that was available for ‘reuse’. I did this to save time and focus on HTML and CSS and graphic design. The same goes for the picture. Please let me know of anything better I can do, specifically for graphic design and sizing and such. Thank you guys! Link to Tribute Page: [https://codepen.io/coe9257/pen/GRpmOzO](https://codepen.io/coe9257/pen/GRpmOzO) Thank you! ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [April 26, 2020, 7:40pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/2 "2020-04-26T19:40:33Z")
Overall, this looks pretty good. There is one major accessibility issue however. You should not base your font sizes on ‘vh’ or ‘vw’. Use ‘em’ instead. Using viewport units limits the size that the user can increase the text. User’s should have complete control over how big they need the text to be. ---
**Author:** ![coe9257](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/coe9257/32/134735_2.png) [@coe9257](https://forum.freecodecamp.org/u/coe9257)\ **Post date:** [April 26, 2020, 8:03pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/3 "2020-04-26T20:03:23Z")
Thank you for the reply. I am so confused because there is so much information online about units. I was using em and/or pixels with media query’s. However, I ran across some articles that explained how inputing the ‘font-size: calc(1em + 1vw)’ into the html will automatically make the page responsive which eliminates the need for media query’s for all fonts on the page. Is there a way to make my page responsive and fluid without using the ‘vw’ and tons of media query’s? ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [April 26, 2020, 8:07pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/4 "2020-04-26T20:07:03Z")
> [@coe9257](#): > > However, I ran across some articles that explained how inputing the ‘font-size: calc(1em + 1vw)’ into the html will automatically make the page responsive Since the above uses ‘em’ then it would fine. But I see this in your CSS: `font-size: calc(4px + 1.5vw);` You’re using ‘px’ instead of ‘em’. ---
**Author:** ![coe9257](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/coe9257/32/134735_2.png) [@coe9257](https://forum.freecodecamp.org/u/coe9257)\ **Post date:** [April 26, 2020, 8:11pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/5 "2020-04-26T20:11:52Z")
> [@bbsmooth](#): > > font-size: calc(4px + 1.5vw); Oh yeah, that haha. So, I wanted to decrease the size of the body and how responsive it is to the browser which is why I in-puted that. I read that the base size of em was 16px. So I just put 4px instead of 0.25em. Are you saying that using ‘px’ instead of ‘em’ will disable the option for users to zoom in and out of the text? ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [April 26, 2020, 8:35pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/6 "2020-04-26T20:35:11Z")
> [@coe9257](#): > > Are you saying that using ‘px’ instead of ‘em’ will disable the option for users to zoom in and out of the text? They will still be able to increase the text size, but not nearly as much as they might need to because the vh units are more powerful than px. Text is already responsive because it automatically fills in its container. So as you widen the browser window the lines of text grow horizontally and as you narrow the browser window the lines of text shrink horizontally. You don’t need to do anything special to make it responsive (such as adding `+ 1vw`). Adding this just makes the text size get a little bigger as the user widens the browser window. But there are other ways that the user can increase the text size so you don’t really need it. It is better to let the user have complete control over the text size themselves. Personally, I would just stick to 'em’s for font sizes. ---
**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\ **Post date:** [April 28, 2020, 5:30pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/7 "2020-04-28T17:30:22Z")
Your page looks good @coe9257. Some things to revisit; - Don’t use `
` to force spacing. Use margin and/or padding in CSS - Review the [lesson about giving meaningful text](https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text) to links. - [Web Accessibility in Mind](https://webaim.org/techniques/hypertext/link_text) has a more thorough explanation - “here” is not accessible ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 1:19pm UTC](https://forum.freecodecamp.org/t/tribute-project-attempt-01/379377/8 "2021-06-01T13:19:45Z")