CSS

This slideshow requires JavaScript.

The first project for Advanced Web Design | Creator: K

CSS is the core manner in which to style/stylize Web sites and Web pages on the Internet—and, of course, give them a flair whilst doing so. A beautiful and modernized language with an unfathomable plethora of visual/aesthetic design capabilities, one may become creatively lost in its seemingly infinite intricacies and functionalities, and in the best way possible. And, in the end, the result—as one would hope—is a testament to the sheer might of this Web interface programming language: a beautiful, unique, and distinctly representative image of your capabilities that conveys the computing prowess you possess. A figurative light is shone on one’s abilities, especially in regards to, essentially, the absolute minimum required to establish such a contrivance: a singular computer. And with only a keyboard and screen necessary to accomplish the feat of programming and simultaneously designing the Web, you, yourself, as a person, are truly tested in the face of the Cascading Style Sheets language.

The easy aspects:

  • Formulating a basic, single-page layout for the content of the page via digital sketching, mental imagery, etc. (without programming)
  • Creating appropriate files that coordinate conjunctively to establish a modularized Web page
  • Utilizing the appropriate workflow for this—Gulp (alongside “npm”/node package manager and “Node.js”)

The challenging aspects:

  • Properly and effectively utilizing Grid and “Flexbox” Layouts
  • Positioning, aligning, and—quite simply—laying out the entire page (in an exact manner) according to a vision of how it should appear
  • Diagnosing and immediately remedying complex errors (often with limited knowledge at the time)

What I learned:

  • The intricacies and complexities of the two above-mentioned layout managers
  • How to identify a scenario in which either or both of the two must be employed
  • The procedures associated with deploying a Web site/page which includes Grid and “Flexbox”

How my project could be improved:

  • A different coding implementation could have been utilized (either for simplicity, clarity, or other reasons)
  • Accounting for various browsers and their supported features, as well as the natural appearance of the Web page itself, should have occurred
  • Simplified class names and ID names would have improved the code, holistically speaking

How the assignment could be improved:

  • A discussion of various means of styling the page (such as via floats, absolute positioning, etc.) besides via these two aforementioned Website layout managers would have assisted in the page’s development cycle
  • Permittance to not be constrained to a singular color scheme, if possible
  • A different topic around which to structure the page could have been utilized

Application of knowledge for future assignments:

  • The designations between Grid and “Flexbox” will be taken into account when designing and coding future sites/pages
  • The proper manner of debugging of a site that employs these layout managers shall be understood
  • The varying complexity levels of both layout managers and their usage scenarios will be known

Inspiration (various readings, tutorials, YouTube videos, and in-class exercises/labs):

  • Articles from popular Web sites that centralize upon Web-based programming languages—especially CSS
  • A myriad of online Web videos that discuss CSS code, its proper implementations in direct regards to the Grid and “Flexbox” Layout Managers, and so forth
  • Online notes from the class itself that permitted this particular page to be built given the presented information

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s