Home Page Challenge Project...feedback is welcomed!

Projects
,
1

Hey everyone!

Before I begin my post–I tried posting this new entry under the Challenge Projects forum but the “New Topic” button is greyed out so my apologies if the main Projects forum is not the correct one.

OK…Here is my Home Page Challenge Project. Took me a while but finally got it done. Any feedback is welcome. I still have to go back and make my code more efficient and compact but for now, it is finished!

Did have a few questions though and if there is a Codecademy professional reading this, this question goes to you:

When testing my website in W3C HTML Validator I am receiving a whole bunch of errors. Mainly the errors concern the fact that I have nested my (h4) elements inside my (a) link elements and also I have nested (p) elements inside (h6) elements. The code runs fine on all browsers and has given me the results I was looking for.
Question: Is it really an error to code in this way or are the “error” messages really suggestions on what I should or could fix to make the code better/more compatible with different browsers?

In my previous Fotomatic project I had a Codecademy pro explain that a lot of times it is really up to the company on what the best coding practices are but given that I am getting error messages when running my webpage through W3C Validator I am not sure if these really are errors or really just suggestions based on known common industry standards and practices. Pictures of the errors and links to my Home Page Challenge webpage are below:

image
image1765×714 69.6 KB

Github index.html:

Github styles.css:

Github about_us.html:

Github form_submission.html:

Webpage Link:
https://dvdvelez.github.io/codecademy/projects/flexbox_challenge/

Lastly, when hitting the submit button on the form you should see the form_submission page open up in a new tab. For some reason the browser gives a 405 error message but if you simply click on the URL address (not refresh the page) so that it is highlighted and hit enter you should see the form_submission webpage. My guess is that GitHub’s server security measures do not allow to correctly reply back the form_submission page when you hit the “submit” button from the Contact-Us form. So, you have to take the steps above to make the browser render the code for the form_submission page instead of receiving the code as a reply from GitHub. That is what I believe is the reason for the 405 message…dunno if a Codecademy pro can confirm this or give the correct explanation of why the 405 message pops up initially.

Questions or comments are very much welcomed. Enjoy!

David

(P.S.: Given the subject matter of alpaca wool–I would like to point out that the Andean indigenous communities of South America have used this vital resource and others like it as a means of survival and therefore it is my belief that the Andean communities of Peru and South America treat these lovely creatures with the utmost respect and care given the fact that these beautiful animals represent their livelihood so it behooves them to do right by them. Nonetheless, I know that there may be folks in the Codecademy community that may be more sensitive than others in regards to such subject matter so what I would like to ask of my fellow Codecademy coders is to bear with me and consider the subject matter within my webpage as a mere exhibition and sharing of what I have learned so far in my coding journey. I am not necessarily promoting such subject matter but merely chose this subject matter as it seemed interesting to me. I have done my research to a certain degree which is why I feel at ease to say that these communities that engage in this type of commerce treat their alpacas and other similar livestock with great respect and care.

I believe in taking care of nature’s beautiful creatures but at the same time believe that we as human beings can benefit from them so as long as we treat animals with great care. If you still do not agree with what I am saying that is OK, but for the sake of keeping our Codecademy community amicable and friendly I kindly ask that you reserve any personal opinions on the subject matter, whether for or against, and not turn this post and to a further extent any post into a sort of political discourse. We can all respect each other and I choose to respect my fellow Codecademy coders by acknowledging that there may be folks that do not agree with the subject matter in my webpage. That is the least I can do to foment goodwill and understanding between us all so that we can all contribute to a positive Codecademy environment.

To be fair to everyone, here are a some of the Youtube videos I researched aside from the other articles I read on the subject matter. Some scenes may seem a little graphic but judging from what I saw and what was explained in the videos I believe that (especially when it comes to shearing the wool off the alpaca) the treatment of alpacas when it comes to shearing off their wool is akin to taking your lovely pomeranian for a haircut. It only looks more dramatic since alpacas are much bigger animals and therefore have to be physically secured more firmly than a tiny and cute chihuahua or pomeranian would.

Ok…be safe everyone…Happy 4th of July!!!)

2

Hi, there.

The “errors” given by the W3C validator are not suggestions. Rather, they are tips for improving the semantics of your HTML. I would certainly suggest fixing all of the issues highlighted by the service.

For example, when creating text with a hyperlink,

<a href=""><h4>Linked Text</h4></h4>

is not valid HTML. Rather you want to switch them around.

<h4><a href="">Linked Text</a></h4>

But for this specific case, you are also using the <a> inside a <button> which is invalid HTML. Anchor tags are used for linking—when you want users to navigate between different pages and views. Buttons, on the other hand, are best used for actions. Opening/closing, light/dark modes, adding items to a cart :wink:

You would only need

<button>Add to Cart</button>

Rather, I would say that a company decides what libraries, frameworks, or methods are used. All companies should want well-written, semantic HTML that is proper and supports accessibility.

image

I am curious about wrapping all of this text in an <h6>? Are you using headings for their styling applications? I saw other random heading elements within your document and was curious.

As for the form issue, because this is not an actual form, you can use method="get" instead of method="get" and it will open the submission page in a new tab.

3

Hi Kira,

Thank you so much for taking time in looking at my code. OK…I will address all the W3 errors. I usually do place links inside header elements but in the case of the h4 headers inside the anchor tags…and now that you point that out…my thinking at the time was that in the event I do decide to expand my webpage even more, my thinking was that the user would hit the “add to cart” button and it would take the user to another webpage with even more specific details on that specific yarn. But yeah lol, just realized now what you said about buttons being for opening/closing and in this case–adding things to a cart. Wow! Just realized that as I’m typing. I know this but…dunno…I guess I was really tired when I coded the buttons this way. What I actually wanted to do (and still do) was to instead make the name of the different colored yarns into a link that would open up another webpage for more specific details on that specific yarn. The add-to-cart buttons were meant to be a fast shortcut for users to add yarns to their shopping cart (if this was actually for a business of course). And thinking about it, I’m going to also place a quantity selection box so users can select the amount of yarn rolls they want. Thank you for pointing that out. I think I was really tired at that point when I coded the buttons as links–I think my thoughts were starting to get criss-crossed.

Thank you for clarification on how companies operate. I am starting to get a better understanding of how programming standards are enforced and decided upon…to be effective with code and be standard there are libraries and frameworks that are used and it’s not just left up to individuals to decide how to code. I have been trying to implement some sort of universal standard across all my projects which brings me to the last question/issue you brought up. The reason I nested an entire paragraph’s worth of text inside an h6 header is because I was looking for a way to easily and very quickly change text sizes for all the different texts in my projects. Therefore, I wanted that entire paragraph a certain size, so I encapsulated it in an h6 header so that I could easily control and change its size, especially when working on the media queries. It is the reason why I placed different header tags for each and every text in my code and was definitely not meant to be random placements. I also did it this way to “simplify” my html code so that I would not have to come up with divs for the many different texts in my code and could target them more easily in my css code. My thinking was, if I give the different texts in my code specific header tags then I can easily go to the global rules section of my css code and with the flip-of-a-switch so to speak change the sizes of the different texts. I did it this way in an effort to be more efficient and especially in my media queries so that I could also change the size of the text proportionally to other different header text sizes. So that is why I use header tags for every piece of text instead of (p) tags.

However, taking the same point you brought up in regards to the buttons, there is a reason buttons are named “buttons” and header tags are named “headers”–they all have very specific and unique purposes. With that in mind, yeah…going to have to rework all my code in this regard. Will have to find another way to achieve what I was initially trying to do. And what’s more–I think I am having a tougher time trying to change my text sizes in proportion when doing the media queries. As my code and webpages are getting more and more complex I seem to be needing more and more header tags than just the six header tags that are available lol.

The method=get…yeah, initially I was going to do that but I also read that this method should never be used when it comes to sensitive information like passwords and etc. With that in mind I used the “post” method instead so that when people gave the form a try they wouldn’t be concerned about seeing their information in the URL when the form-submission page popped up. I’m not gathering people’s information (not that I would or know how to in any event) but just in case someone would be concerned. I’ll change it though so that everyone can fully get the entire experience I am aiming for and give me pointers on where to improve as you have :wink:.

Thank you Kira! I will definitely take your recommendations and rework my code. I will also definitely look for your projects so that I can pick up on some additional pointers and ideas.

David.

1 Like