Feedback on Project 1(Tribute)

So, I completed the Tribute Projects requirements. I may want to add more accessibility and a nav bar but, for a 43yo, new to coding 5 days ago, it’s a start. Any feedback welcome!

EDIT Final version *** https://bit.ly/2MtYTXm***
#100DaysofCode

You can click the “Signature” under the quote for the wiki link, and I added titles when you mouse over the 5 facts at the bottom.

3 Likes

Hi Jeraml,
I have run the script test on your Tribute and there is some work you need to do. See the below

#Technology Stack
#Content
1.The title with id=“title” in H1 sized text is missing.
2. The short explanation with id=“description” in P sized text is missing.
4. Inside the form element, I am required to enter my name in a field with id=“name”. If I do not enter a name I will see an HTML5 validation error. - Not Done
5. Inside the form element, I am required to enter an email in a field with id=“email”. If I do not enter an email I will see an HTML5 validation error. - Not Done
There should be an input text field with id=“email” : expected null to not equal null - Not done
6. If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
Cannot read property ‘type’ of null - Not Done
7. Inside the form, I can enter a number in a field with id=“number”.
8. If I enter non-numbers in the number input, I will see an HTML5 validation error.
Cannot read property ‘type’ of null
9. If I enter numbers outside the range of the number input, I will see an HTML5 validation error.’
Cannot read property ‘min’ of null
10. For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=“name-label”, id=“email-label”, and id=“number-label”.
#name-label is not defined : expected null to not equal null
11. For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.’
Cannot read property ‘hasAttribute’ of null
12. Inside the form element, I can select an option from a dropdown that has corresponding id=“dropdown”.’
Cannot read property ‘tagName’ of null
13. Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.
There should be at least 2 radio buttons : expected 0 to be at least 2
14. Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.
There should be at least 2 checkboxes inside the form : expected 0 to be at least 2
15. Inside the form element, I am presented with a at the end for additional comments.’
There should be at least 1 : expected 0 to be at least 1
16. Inside the form element, I am presented with a button with id=“submit” to submit all my inputs.
There should be a button with id=“submit” : expected null to not equal null

Hey I’m 43 as well, that is very good work for being five days in. keep it up

@aggymbuya That’s a wrong project, I believe. :slight_smile:


5 days in and you’ve built a page, that’s amazing!! It’s easy to read, I like the included picture and the background is pretty. Keep it up!

As for some suggestions…

I would add fallback fonts (in case the main font does not load properly) – e.g. to h1: font-family: "Trebuchet MS", sans-serif;

I also think height: auto; would be a better choice for #image (I do not know if max-height allows “auto”, but if the height always matches the width, it can be just height, I think; I’m a beginner too, though, so I’m not 100% sure here!).

1 Like

Thanks for feedback, will review and make correction. I have had 2 consecutive sleepless nights and my Survey is also up. Can share you critique for me buddy.

Cheers

1 Like

Thanks! Pretty sure you’re right about “max-height” I think I typed it out of habit. And, definitely right about fallback fonts. I also want to make sure it’s commented well and add tab functionality(and accessibility features). Thanks for the feedback. It’s a start.:slight_smile:

2 Likes

Wrong project. Thanks for trying though.:slight_smile:

We all start from somewhere buddy and we are in this for a long haul :slight_smile:

1 Like

Finalized! https://bit.ly/2MtYTXm. Let me know if you can break it!

I’ve said it before but I’ll say it again, I think it’s genuinely impressive you’ve already made all of this and as a page, it works just fine! It also looks great on narrow screen. I love the responsive text resizing! It’s a nice detail.

Now for some criticism:

I think your © 2019. Created by Jerami Lessard is unnecessarily pushed to the side, I’d consider at least giving it some space around and/or centering it. :slight_smile: But that’s just a matter of taste; the only real issue is that this line of text is not readable when the screen is small.

On the opposite end of the spectrum, when I have it on full screen, it gets a little tiring to read the main paragraph as the page gets very wide; it’s intentional here and I see the page adjusts nicely, so consider this as a suggestion for future projects, perhaps. I think it would help to set a limit to how wide the page’s content can get (especially for paragraphs of text).

I’ve looked if someone can explain this better than I can, and found this great article – it’s the section titled “Use a comfortable line length”!

1 Like

I understand what you’re saying. I just realized why it’s something I didn’t notice. I’m using older screens on my pc with a lower pixel count(they’re a bit older). I checked everything smaller than my pc screen but, forgot to check the other direction for screens larger(higher pixel width) than mine, which are starting to be pretty commonplace. Thanks for letting me know!

You’re probably correct about the copyright but, I wasn’t too concerned about legibility, since it’s not super important for content but, it would be available to view if someone “needed”.

Thanks again for the input! Super appreciated.:slight_smile:

1 Like

Nice job!
One thing thought: you might want to make the font-size bigger for mobile devices.

-Tech.

Biggger? Hmm. Thanks for the input but, I’m not sure why I’d want to do that. In “full size” standard view on a a mobile device, the font switches to courier to make it more legible. In landscape, it switches to the cursive. But, if the font were bigger, there’d be even less words per line, making it seem difficult to read, for me. They seem to be responsively resizing on every screen size I’ve tried and on mobile(for me) the text is average sized, with my less than perfect vision. Pinch zoom, I guess would be what I would immediately do on a page like this, if I want to see the text better, personally.
I guess what I’m saying is, is the text too small for the container size on your device? Same in landscape? Can you post a screenshot, if it’s too small? I’d love to see because I’ve not gotten that suggestion.

Either way, I still appreciate the feedback!:slight_smile:

1 Like

Hello,

I think this (the screenshot) could be a little bit bigger to make it more readable but not too big to avoid making it unreadable too.

-Tech.

1 Like

Gotcha. Thanks. That’s what I see too. Making the text any bigger starts to make too few words per line, making it less readable, imo. Still appreciate the input. I figured it’s readable and pinch zoom works if it’s not for some people. That font is a fallback anyway. It’s made to be displayed landscape, at least, to take advantage of the cursive font best viewed on pc. I’m going to design mobile first on my next page.

Once again, thanks for all the feedback.

1 Like

Beautiful and simple site… Everything clear in the mobile version. Big up dear…

2 Likes

nicely done man. good job

1 Like