MDN HTML
In MDN, the HTML information can be found under the “Reference” navigational menu item. Once clicked on, there is a description of what HTML is, as well as links to HTML beginner tutorials, guides, references, and related topics. There is also a left-hand navigational menu to similar information: beginner tutorials, guides, and references. Each of these navigational options can be opened further to include a variety of HTML information.
I can imagine that someone who does not know HTML at all would benefit most from the beginner tutorials as to sift through the other content on this portion of MDN would be very overwhelming. I think it was a good design to limit what additional navigational menu options pop up to simply: “Your first website: creating the content” and “Structuring content with HTML”. This helps provide directional guidance on where it is best to start. It’s nice that each page in the tutorial provides what it assumes you already know (prerequisites). This can also help a user that is not quite understanding the content of a page to see if additional knowledge should be covered first. There is also a summary of what is in the article (or page) since many learners will eye up the headings of an article, essay, book, etc… before diving into the material. It’s clickable so if a certain section is of interest to the person viewing the content, they can find the information in article faster.
The reference section would be helpful if knowing about the name of an element or attribute and wanting to learn more about it since the reference menu lists are of the HTML elements and attributes in alphabetical order, and is broken up into elements, global attributes, attributes, and input types. However, in using it myself I found it much easier to use their filter feature that is above the left-hand navigational menu. It functions similar to a search bar and can help find elements or attributes faster than scanning through a list. There is still also a search bar on the very top of the website if wanting to see if a topic can be searched another way.
MDN CSS
Like the HTML section within the MDN website, clicking on the “CSS” option within the “Reference” navigational menu on the MDN home page will bring up content that describe what CSS is. It also provides a similar structure as the HTML web pages and navigation first highlighting the beginner tutorials and references. However, a “cookbook” of common CSS layouts is also provided, as well as CSS tools and information on meta bugs. The beginner tutorial of CSS assumes that the HTML tutorial was completed, and that the user can add the CSS style sheet to the HTML document from the tutorial. I explored the CSS tools as well, and although it took some time to figure some of them out, with more time and knowledge they seem like a great way to try things out visually!
Once again, the filter feature could be used to look for information more specifically – which I did quite bit for assignment one! Having taken Website Coding last fall and focusing on Database Development and Web Content Management in the first half of this semester, I needed a refresh on how to code grids. I found the MDN resource helpful in this regard! I also used to learn more about some code I did not know from assignment one, such as “::before” and “::after”. It was fairly easy to navigate from topic to topic, though you can easily go down a very deep rabbit hole! Having navigation at the top to share the pathway you have taken was helpful to get out of some of the rabbit holes. It is overall a strange term as other mammals can make even larger and deeper holes than rabbits.
Summary
The information on each page whether in a tutorial, guide, or reference areas are easy to follow and provide good examples of code (and in some cases, what is not well written code!) The MDN website offers an array of resources based on HTML, CSS, JavaScript, HTTP, and many more areas with a variety of depths of knowledge from beginner to well-versed. I also appreciate the website provides guidance on accessibility as this is incredibly important to make sure all users can utilize the web resources being created effectively. It’s wonderful to see lots of guidance being provided in this area, as well as specific tutorials on HTML, CSS, and JS accessibility. I deeply appreciate that the MDN website can either be in dark mode or light mode, something I wish all websites had. As someone who is photo sensitive, I try to make everything I can on my computer in dark mode! It’s hard to know about all of the physical and cognitive challenges are out there when it comes to utilizing the web, and the reality is we code FOR people. Ultimately it is to benefit people, and technology can play a huge role in helping people with disabilities navigate the world. It is encouraging to see if play such a role in the materials and resources I am learning so far in this program. It’s an area of IT that I have a passion to learn more about and engage in professionally!
It took a little bit of time to figure out the two icons in the upper-right hand corner existed, as I was trying to figure out if I could go into the code and try things out. The answer was yes, I could! This was possible through the “play” icon in the upper-right hand corner of many of the boxes that included sample code. The feature to copy the text was also helpful!
It is critical that the information is accurate, or well… there will be inaccurate code that could lead to significant issues since in many coding languages, syntax is extremely important. Businesses may have downtime on a website (which is very bad) or it could misguide students seeking help with their learning. It’s important a resource, such as MDN, stays up to date on all of the changes within the content it plans to share to ensure the information is accurate.