The Semantics of Prototyping with HTML and CSS

As with numerous complex challenges in the world, they all become possible with the ability to acknowledge and experience the roots. By learning the foundation and taking steps, we are able to complete complex challenges.

One challenge for me at the point of this course is the prototyping of the youtube homepage. The task itself deemed daunting by the looks of it. In a different perspective, I was required to create a similar homepage for an extremely popular website that millions of users utilize. You can add that into the cool factor!

However, the assignment differed from last week in regards to that this time, no image mock up was necessary, but rather raw HTML and CSS code, which is clearly more challenging.

But in doing so, it was required for me to learn the semantics of html and css. Semantics is simply, the meaning of programming languages. Of course, knowing the meaning of these two programming languages is necessary in order to complete the prototype. By knowing the semantics of each tag such as the <header>, <footer>, <section>, and <nav> to name a few, it would make the prototype process doable. The same idea goes for CSS as well, with acknowledging CSS tags, selectors, and their semantics and organization, the prototype process will be doable.

In order for an effective organization for a website, It is helpful to create a html semantic outline. This way the website will be more organized and clearer.

With the foundation in hand such as being knowledgable in the semantics in HTML and CSS, the prototype for any website, can be possible.