Responsive Site/WordPress Theme

The second & third and final projects for Advanced Web Design | Creator: K

Designing a site in a visual editor, “prototyping” said site/establishing animations and functionality, and subsequently developing a from-scratch WordPress customized theme for that particular site are amongst those aspects which define the crux of Web development. This entire, multi-step, multifaceted, and, indeed, multiplex project was a phenomenal learning experience, and utterly emphasizes the definition of being a Website developer. I truly acquired an superbly immense amount of knowledge pertinent to the ever-expansive assemblage of multiple programming languages which serve as the foundations of the Web: H.T.M.L., P.H.P., & C.S.S. All of the processes that a developer partakes in whilst engineering a theme to function cohesively, properly, and beautifully with the core WordPress software exist as a testament to one’s skills and ability to design. Creating a vision in code is no simple endeavor, as one must be quite fluent to fully comprehend the perceivable magnitude of a software that effectively powers over thirty percent of the Internet. With all this aside, it is, indubitably, tremendously enjoyable, and the cumulative magnum opus serves as a definitive culmination of achievement. And so, given this knowledge, I sincerely hope you enjoy my custom WordPress theme as much as I did developing it. 😊

The easy aspects:

  • Aggregating the resources necessary for development (underscores.me basic theme, images, etc.)
  • Creating custom classes and IDs and styling them via “style.css
  • Integrating previously dev’d code into the new theme

The challenging aspects:

  • Styling all of the custom CSS present in the PHP files that come with the template theme, from scratch, effectively, properly, and in a visually appealing manner
  • Discovering which CSS activates/affects other code in the theme folder’s files from the bare foundations of the template, without prior knowledge
  • Avoiding PHP errors and debugging successfully and with precision

What I learned:

  • An immense amount of knowledge pertinent to the core WP software and its codex
  • How to integrate PHP in various manners, and in various files
  • A plethora of information regarding CSS, SASS, and other relevant, associated data/aspects

How my project could be improved:

  • Different colors could be incorporated to enhance legibility (in regards to text gradients and clippings)
  • A more effective manner of media querying could be explored and implemented
  • Compatibility of the site with other browsers/operating systems should be taken into account

How the assignment could be improved:

  • Discussing more about PHP and its association with CSS and HTML, especially in direct regards to creating a custom WP theme from foundational code, would be beneficial
  • Code snippets and explanations of said code could be included in the directions for clarity and developmental assistance
  • Coalescing this project directly with a previous project to which it has pertinence, and simply coding that project itself, holistically, over time, could improve understanding of the task at hand, as well as permit for a deeper knowledge of the aforementioned languages

Application of knowledge for future assignments:

  • Development of future WordPress themes shall incorporate the knowledge acquired from this particular project
  • Awareness and utilization of online resources, such as the WordPress Blog and Codex, will exist/occur in the future
  • A more pedantic, profound, and acute understanding of modularized code, such as the code associated with this specific project, will be consistently considered whilst designing/programming

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

  • The WordPress Blog, Codex, and articles and information associated with the entirety of the structure of the open-source WordPress code itself, especially ones originating from or possessing direct ties to the WordPress.org Web site
  • Online videos and class presentations detailing various aspects of the WordPress universe
  • And, ultimately, none other than my professor, who encouraged us to delve into the universe of WordPress development. 😄

CSS

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