<–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.
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?
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!
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.
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 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.
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.
@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
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.)
. 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.