Feedback: Responsive Web Design Projects w-chase


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
Github Repo

2nd Project: Build a Survey Form
Survey Form
Github Repo
Forum Post

3rd Project: Build a Product Landing Page
Product Landing Page
Github Repo
Forum Post

4th Project: Build a Technical Documentation Page
Technical Documentation Page
Github Repo
Forum Post

<–Original Post–>
I am relatively new to coding, maybe only 6 months or so now, hence why I am taking a course :slight_smile: . 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.

1 Like

Welcome to the forums @w-chase. Your page looks good. Some things to revisit;

1 Like

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 <p> 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 <a> 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?

1 Like

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!

1 Like

Your form looks good @w-chase. Some things to revisit;

  • Do not use the <br> 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.
1 Like

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 <br> tags from the site and instead used <div> 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.

There’s one stray <br> still in your code.

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 if you’d like but it’s a moot point.

Nice job cleaning things up.

1 Like

Finished the Technical Documentation project.

Any feedback would be appreciated.

Thank You

Technical Documentation

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,

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

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.

1 Like