# Feedback: Responsive Web Design Projects w-chase **URL:** \ **Category:** I Built This\ **Created:** [October 2, 2020, 6:12am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674 "2020-10-02T06:12:20Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 2, 2020, 6:12am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/1 "2020-10-02T06:12:20Z")
Hello, I will edit this first post to include all of my completed projects to date to minimize on the scrolling. **Responsive Web Design:** _1st Project: Build a Tribute Page_ [Tribute Page](https://w-chase.github.io/FCCWebDes/) [Github Repo](https://github.com/w-chase/FCCWebDes) _2nd Project: Build a Survey Form_ [Survey Form](https://w-chase.github.io/FCCFormDes) [Github Repo](https://github.com/w-chase/FCCFormDes) [Forum Post](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/4) _3rd Project: Build a Product Landing Page_ [Product Landing Page](https://github.com/w-chase/FCCProdLand) [Github Repo](https://github.com/w-chase/FCCProdLand) [Forum Post](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/6) _4th Project: Build a Technical Documentation Page_ [Technical Documentation Page](https://github.com/w-chase/FCCTechDoc) [Github Repo](https://github.com/w-chase/FCCTechDoc) [Forum Post](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/8) \<–Original Post–\> I am relatively new to coding, maybe only 6 months or so now, hence why I am taking a course 🙂 . I would appreciate it if my Tribute page could be reviewed. I am sure there are some issues within it, but I hit all the requirements. The page is a Faux Tribute to a character in a video game. I had to use Github rather then Codepen so that I could upload assets. Thank you in advance. > **[Deckhard Aura](https://w-chase.github.io/FCCWebDes/)** ---
**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:** [October 2, 2020, 2:25pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/2 "2020-10-02T14:25:25Z")
Welcome to the forums @w-chase. Your page looks good. Some things to revisit; - Run your HTML code through the [W3C validator](https://validator.w3.org/#validate_by_input). - There are HTML coding errors you should be aware of and address. - 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. - icons on a page are not accessible - Do not use the `
` element to force line breaks or spacing. That’s what CSS is for. > **[: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)** > > The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. > **[DevDocs](https://devdocs.io/html/element/br)** ---
**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 2, 2020, 4:19pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/3 "2020-10-02T16:19:21Z")
Thank you for your response. I have run the site through the W3C Validator and fixed all the errors it found. I wasn’t sure how to use css to create line breaks so I just put each paragraph in its own `

` tag and assigned a class to each one for styling. I have installed a Screen Reader to further test my webpages. The screen reader will read the `alt=` text of the images that I have used for links, so I have adjusted the alt text to read `Link to {websitename} website`. I have also adjusted the `` tags to have the `cursor: pointer;` style to further clarify that the images are links to sighted persons. If this is not acceptable practice then would it make fore sense to caption the image with the link? ---

**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 3, 2020, 4:48am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/4 "2020-10-03T04:48:57Z")
So rather then create a whole new topic thread I will just add to this already existing thread and rename it. So I just completed the second project, the Survey Form, and would really appreciate some feed back on it, whether it is layout, design, or coding issues. Any and all advice is welcome! > **[Survey Form - In Progress](https://w-chase.github.io/FCCFormDes/)** ---
**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:** [October 3, 2020, 1:36pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/5 "2020-10-03T13:36:18Z")
Your form looks good @w-chase. Some things to revisit; - Do not use the `
` element to force line breaks or spacing. That’s what CSS is for. - User’s should not have to delete text when entering their comments in the textarea provided. Consider using the `placeholder` attribute. - User’s are not seeing your page the way you want them to. Most won’t have ‘Roboto’ loaded on their computer and you neither `link` to it (`head` element in HTML) or `import` it (CSS). - Maybe look into the `column-count` property in CSS. It will align the ages better. I did a quick pen for someone a while ago. If you want the link let me know. > **[: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)** > > The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. > **[DevDocs](https://devdocs.io/html/element/br)** ---
**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 7, 2020, 4:58pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/6 "2020-10-07T16:58:55Z")
Thank you for the response @Roma. I have addressed the issues you raised regarding my previous projects and merged them into the Github repo. - I removed the `
` tags from the site and instead used `
` combined with `grid` in order to properly place them elements. It was a good thing as it simplified my responsiveness efforts. - I switched to useing the `placeholder` attribute, your right its deffinitly more user friendly. - I usually include the actual text files in the document root so that the users computer will respond to that. However it does not hurt to include the appropriate `link` for the font from Google or Font Awsome. - I would like to look at that `column-count` of yours, I looked it up but I couldn’t really see how it was supposed to be used or rather why I would choose that over `flex` or `grid`. I have also completed my third project " Build a Product Landing Page" and have already run it through the W3 Validators. This one took me a bit longer as I used a few elements I had not worked much with before. Namely the `iframe` and `table` elements, both of which gave me a bit of trouble. The webpage should be fully responsive now from 350px to 2000px outside that it just gets a little iffy on font sizes I believe. As always I really appreciate the feed back on the webpages and any advice I can get is great. > **[FCCProdLand](https://w-chase.github.io/FCCProdLand/)** ---
**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:** [October 7, 2020, 5:15pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/7 "2020-10-07T17:15:11Z")
> [@w-chase](#): > > I removed the `
` tags from the site and instead used `
` combined with `grid` in order to properly place them elements. There’s one stray `
` still in your code. > [@w-chase](#): > > I would like to look at that `column-count` of yours, I looked it up but I couldn’t really see how it was supposed to be used or rather why I would choose that over `flex` or `grid` . There’s no value add to using the `column-count` over `flex` or `grid` but when I made that comment you hadn’t used either in the `fieldset` that contains the ages and things were not lined up vertically. You can take a look at the [quick pen using `column-count`](https://codepen.io/sroma/pen/ExPgGxB) if you’d like but it’s a moot point. Nice job cleaning things up. ---
**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 11, 2020, 12:33am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/8 "2020-10-11T00:33:36Z")
Finished the Technical Documentation project. Any feedback would be appreciated. Thank You [Technical Documentation](https://w-chase.github.io/FCCTechDoc/) ---
**Author:** ![SevenRoot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sevenroot/32/194450_2.png) [@SevenRoot](https://forum.freecodecamp.org/u/SevenRoot)\ **Post date:** [October 11, 2020, 1:55am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/9 "2020-10-11T01:55:29Z")
Hi! Just getting started on the fCC also, though I have a background in design and some coding too. I like the page–It’s fun. The style is true to the genre as well. Organization of ideas and points seems well thought-out. I also enjoyed the overlays of colors and background images. Admiring the layout control on all those different div’s. Did you use a grid for placement? My feedback: There are some legibility issues with the points of light from the background interfering with the text. Particularly on the long paragraph at the lower right. One option is to put a background color in the box containing that paragraph, that would then cover the “starlight” behind the text. I’m sure there are many other options too. Maybe redundant, but I was wondering if better labeling on the link button might be helpful. Nice Work, Seven ---
**Author:** ![w-chase](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/w-chase/32/181420_2.png) [@w-chase](https://forum.freecodecamp.org/u/w-chase)\ **Post date:** [October 11, 2020, 2:44am UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/10 "2020-10-11T02:44:15Z")
@SevenRoot It took me a second to figure out which page you were talking about, I have 4 of them on this thread now. But yes for the layout control I used grid. I find my self preferring grid over flex-box it has a lot tighter control from my point of view. You can see my code in my github repository for it. [1st Project](https://github.com/w-chase/FCCWebDes) In regards to the legibility issue, yes there is an issue with it and I did work on it to increase the contrast between text and background. I did not think of putting the text in a box to improve readability but once I finish this I’m gonna load that page up and adjust it. Yes I should label or at least caption those links. They do have `alt` text which describes them, and the pointer switches to hand when its hovered over but on looking again it is not as intuitive to a reader that those icons are links. Feel free to look at any of my websites in this thread. ( I am going to edit my initial post to include all of my projects now.) Thank you for your feedback. ---
**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:10pm UTC](https://forum.freecodecamp.org/t/feedback-responsive-web-design-projects-w-chase/423674/11 "2021-06-01T13:10:08Z")