Extract UI Items
Navigation Current Page
User Interface Discussion
The reason I choose this UI was because of the layout that is on the right side section that has a list of different links. One thing that caught my eye is how the red line sticks out from the lighter grey area into the darker with the name of the topic above.
I figured that it would have to do with a unordered list but as I inspected the code, I noticed that in the CSS that the creator just added a border-bottom with the color red and pushed the margin left until it was touching the lighter grey area. They also had the display set to inline-block and I noticed that when I turn it off the words become a little more compressed rather than spaced out.
Navigation Current Page
User Interface Discussion
I really liked this creation as it shows a few warning signs below the page but inside the model that the warning is in, it looks almost as if it is a ribbon wrapping around the div.
What I found as I inspected the code was that this part of the page was made using a class called "note warning" and it appears that the way they got to make the box look as if its wrapping around the div was by using position: relative. (which I have not used before) when I turn off this property, the "wrap" looking part completely disappears along with the symbols inside such as the exclamation point. Also, they pushed the margin left by 30px to get it at the perfect spot that makes it look as if it is wrapping around the div.
Navigation Current Page
User Interface Discussion
The reason I choose this section is to get a little refresher on how to add multiple images in a section. From my website-coding course I remember using an unordered list in a certain assingment but I can't quite remember. Another reason I choose this is because they're are 48 images on this page and all are clickable links.
As I opened the code and inspected, I noticed a tag I am not familar with which is the "article" tag. This tag is used to specify independent and self-contained content. Appropriate usage for the article tag would be used when applying news storys, blog post and fourm post. The code contains an unordred list within the article tag with multiple li's that form the box-sizing, margin and flex with the CSS code. Another tag that I came across that I don't remember in website-coding and most likely will use in the future is the "figure" tag which its purpose is to specify self-contained content such as illustrations, diagrams, photos, code listing and much more. I remember only using the IMG tag and adding the source within the content. Although this code has that also but within the figure tags.
Navigation Current Page
User Interface Discussion
The reason I choose this section because I was curious on the structure of creating what looks like a screen shot image of some code. Also in class it was mentioned that this is all text but how is it all text is what I was curious to find out.
As I inspected the code, I found that this part of the page was made using a little div but inside was multiply spans with text and a class added to it. As I started to turn things off such as display and margin, the text started shifting and going back to its original font. I noticed the creator made seperate classes also for each indivudual word and character. The class "na" was created to modify "name" and "github" in the div. Also, even a class was made for a the dash character to fit along with the rest of the content inside.