This topic is for members of the January 2018 fCC cohort to share information and learn more about applied visual design and applied accessibility. Click on the cohort link if you’d like to join. Reply here with your questions, comments, and additional resources regarding the Applied Visual Design and Applied Accessiblity sections.
I’ve added a link to the W3 Web Content Accessibility Guidelines. It might be a little dry but I suspect it would be a good set of guidelines to follow.
This element used to be called the “Underline” element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to “underline”.
and
Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.
You should not use <u> to simply underline text for presentation purposes, or to denote titles of books.
Even though the challenge states: To underline text, you can use the u tag, best practices according to Mozilla say that the <u> tag is no longer used to underline text.
In the challenge example code, it’s easy to see why one doesn’t want to use the default styling for the <u> tag (and probably why one doesn’t want to use the <u> tag in this case in general) by comparing the underlined text to the two links. If I were looking at that page for the first time, I’d assume “Ph.D. students” was an anchor tag and I’d try to click on it because the other two underlined things in that example are clickable anchor tags. I might think something was wrong with my browser or the way the page is being rendered since one of the links doen’t seem to work.
The Add a box-shadow to a Card-like Element challenge asks us to do something that many CSS developers would NEVER do … use an id to style an element! Even though it’s impossible to pass this challenge without styling the id, I recommend reading the following before doing something like this in your projects:
This interesting post about why it’s probably not worth it to style ids in your CSS.
CSS Guidelines - Specificity shows some of the reasoning for not styling ids as well as some of the problems one may get into when styling them.
Interneting is Hard - CSS Selectors will help you learn more about all of the CSS selectors, showing when and how to use them in more detail.
I was very happy to see that the updated FCC curriculum includes an entire section devoted to Accessibility. Important to increase awareness and form the habit early. I’ve also been trying hard to remember to add a meaningful image description to tweets (with images/memes).
I was trying to review all the important concepts learned so far and found the following guides to be very useful. I think this will be a good resource for building web development projects.
Here are my two thoughts for the challenges I worked on today:
Contrasting Colors
Details
Interestingly, the color choice used in the Adjust the Tone of a Color challenge fail to pass the WebAIM color contrast test. This means that some people trying to pass this challenge may have difficulty determining the difference between the font color and the background color. I strongly recommend using the WAVE tool on your projects before submitting them in order to resolve color contrast issues like this and other accessibility-related issues…
CSS Animations
Details
I LOVE that CSS animations are included so early on in the curriculum! I think it really gives a sense that someone just starting out can have a lot of power over the design experience. It also shows that the complex animations one sees on polished sites isn’t as difficult to create as they seem. I don’t think I’ll come away from these challenges having mastered CSS animations, but it’s a great intro! I think this is soooo much better than suggesting new learners learn Bootstrap and jQuery! I especially like the Make a CSS Heartbeat challenge.
I’ll need to review the fCC challenges a few more times, build stuff with animations, and make use of the resources below before I’ve mastered CSS animations. This is a nice start though.
other thing is you not going to pass a least first of the projects… They are asking to put ID everywhere and style on them, I have made mine and I had to change it when it was ready. I was surprised because there was so many ways to style without putting more attributes(ID) to the page.
@HaiCia I was able to do two of the projects (I completed them during the Oct. 2017 cohort and added the beta tests to them) without styling ids. I had to add ids to pass the tests, but I didn’t have to style them.
it is true, actually… but anyway I am adding attributes for a reason not just to left it there without using, the only reason to put IDs in there was to style it… now I am confused,
I remember reading that adding IDs to all elements is considered best practice even when it’s not used for styling. Technically, this adds structure to your webpage.
Actually, styling using the ID is not considered best practice.
But I believe once you start adding JavaScript to a page, you will wish you had IDs there.
Some thoughts from the challenges I completed today:
In regards to alt attributes for images, like the Add a Text Alternative to Images challenge states, alt attributes are mandatory for valid HTML5. Whenever I’m faced with writing a meaningful alt attribute or deciding if I can use an empty alt attribute, I refer to WebAIM’s Alt Attribute Page for guidance.
The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you’ve ever seen a “Jump to Main Content” link at the top of a page, using a main tag automatically gives assistive devices that functionality.
I was trying to search for where I read about always adding IDs but couldn’t find it. I actually find it commonly suggested that extra attributes be avoided when not used.
Regarding styling using Ids, I first came across this topic when I created a Pen on CodePen with some ID selectors in the CSS. Upon saving the Pen, CodePen displayed a warning that using IDs as selectors is not recommended due to their high specificity.
Even though it’s impossible to pass this challenge without styling the id, I recommend reading the following before doing something like this in your projects:
I LOVE that CSS animations are included so early on in the curriculum! I think it really gives a sense that someone just starting out can have a lot of power over the design experience. It also shows that the complex animations one sees on polished sites isn’t as difficult to create as they seem. I don’t think I’ll come away from these challenges having mastered CSS animations, but it’s a great intro! 
but anyway I am adding attributes for a reason not just to left it there without using, the only reason to put IDs in there was to style it… now I am confused,
interesting, can you share any link? Never heard about it and I would like to know 
