Add a basic website template

[tamacodechi]

This addresses #13. I had initially forked off the wrong branch so I couldn't find the correct index/html and made it much more "basic" than it needed to be (basically a complete walkthrough to making your first webpage ever for total beginners). After consulting @zoepage I finally branched off from the correct branch and made a very simple cupcake ipsum filled template.

[varjmes]

Hey @Althaire! Looks cool. There's some things we can do to make this more accessible if you're interested. I'll try and go through this fully tomorrow to be more constructive :) Thanks for this!

[tamacodechi]

@Charlotteis that would be fantastic :D If it's not too much trouble for you, I'd love that. The extremely over complicated one I had made before had a big accessibility effort (basically I had made a guide on it in comments in the code AND on the page itself and I listened to it over and over to make sure it could be understood and flowed nicely), so I'd love to make this one better!

[varjmes]

I'd recommend using this browser extension for some good visual debugging: helps you to pay attention to the way things are structured like heading elements and sections.

[tamacodechi]

Awesome, thank you @Charlotteis :grin: I'm a bit confused about the textboxes, because I think their purpose is that the user changes the text inside to whatever they like, or should I put that role somewhere else? For the footer, the thing is that footer tag does act as the image and color banner and then the cb is the section that contains licensing info and other potential content, so I wasn't really sure... Should I just put the footer as the content info despite that? Thank you, this is so tricky, we're so lucky to have someone so perceptive :smile:

[varjmes]

Why would the user want to change the text inside to whatever they like? In order for everyone to do that you'd need to use the <textbox> element. As you haven't enabled users to do that, it looks like that a textbox role is not needed?

RE: Footer. The <footer> contains everything that is within the footer, right? 99% of browsers will put the contentinfo role on that footer tag, so it's best we do it too. Else both the footer and the div will have the footer role. The reason why we're explicitly adding roles right now is that not all browsers act the same and we do this as a failsafe, hopefully we wont need to keep doing it forever :)

[tamacodechi]

OH! Okay I was misunderstanding! I meant it as a textbox for the developer to edit!! These are purely for the end user? That makes a lot of sense now! Ahh thank you! Sorry! I was so confused!

[varjmes]

Ohhh I get what you mean now! :)

Glad we're on the same page now :D

[tamacodechi]

I fixed up those ARIA roles and I added some links for the navigation. They're not usually there on the hoodie-css pages but if I remove that navigation, the red banner goes away as well. Is there anything that could be worked on? :)

[varjmes]

@Althaire Just a couple of little things to tidy up, but this is looking good from an A11y perspective :D Thanks for all the hard work.

[tamacodechi]

@Charlotteis I've tried to change the navigation section to every other thing I could think of, but it looks like we need the section for styling purposes. Do you mean I should change to navigation role to the element with the class main-navigation or to each element of navigation (ie. the example links). I changed the nav block to a <p> but looking back at the other hoodie pages, the reason that this block is the nav is because there's usually a logo on the left hand side (the space for which is still available should someone want to add one in). Do you think it might make sense to leave that as a nav block and just move the role there?

[varjmes]

In that case, lets try this:

-        <section class="nav" role="navigation">
-          <nav class="main-nav">
-            <a href="">Link</a>
-            <a href="">Link</a>
-            <a href="">Link</a>
-          </nav>
-        </section>
+       <section class="nav">
+          <nav class="main-nav" role="navigation">
+            <a href="#">Example Link</a>
+            <a href="#">Example Link</a>
+            <a href="#">Example Link</a>
+          </nav>
+        </section>

Then for line 62 (https://github.com/hoodiehq/hoodie-css/pull/24#discussion-diff-38820906R62)

-   <nav>
-      Marzipan toffee bears cupcake gingerbread.
-   </nav>
+   <p>
+      Marzipan toffee bears cupcake gingerbread.
+   </p>

How does that sound? :) @Althaire

[tamacodechi]

@Charlotteis Yes! That looks perfect! That's exactly what I meant! (I kinda wished I'd known that I could reference it like that instead of trying and failing at describing it in words) :raised_hands: I'll do that then!

[gr2m]

I don’t see a reason not to merge this :)