The first module of CIS 2336 introduces client-side technologies by exploring the fundamentals of HTML and CSS. HTML is responsible for creating the structure and content of a webpage, whereas CSS is responsible for applying style to that content and managing presentation. By keeping content and presentation separate, it is easier to maintain a cohesive look for all pages on a website.
Module 1 established the foundation of my site design knowledge, showing how the structure and content of sites are created and how they are styled. It taught me the basics of HTML and CSS through three assignments: Codecademy, W3Schools, and CSS: Selectors in Action (Liquid Layout). The Codecademy assignment was a series of interactive web tutorials that allowed me to work with multiple hands-on examples. It demonstrated how HTML defines the content of a page, whereas CSS defines its presentation. The W3Schools assignment was a collection of reference readings that served as a comprehensive review of all of the material covered in Codecademy, and it additionally showed me other features and nuances that I had not learned or did not fully comprehend in Codecademy. The Liquid Layout assignment showed me how to transform a page with plain text into a page with a more sophisticated three-column liquid layout.
The Liquid Layout assignment has been chosen for my learning portfolio because it effectively incorporates the HTML and CSS knowledge acquired from the other assignments and applies it practically through demonstrating the possibilites of page design. It has been selected instead of the other assignments for two reasons. First, the step-by-step approach of the assignment is similar to the approach taken by the Codecademy assignment, which also employs a gradual learning curve to slowly build on knowledge. However, whereas Codecademy lessons almost always start off with a chunk of prewritten code, the tutorial from the Liquid Layout assignment starts with nothing, so I was able to have a better appreciation of the entire coding process by being able to examine every phase of the design. Second, the Liquid Layout assignment's practical application of HTML and CSS knowledge in designing a page from scratch gives it a dimension that the W3Schools assignment simply does not have. The W3Schools assignment is very comprehensive in its inclusion of HTML and CSS information, but at the same time, it is very limited in the area of practical application, offering only snippets of a page as limited examples.
Of course, this is not to say that the Codecademy and W3Schools assignments did not serve their purposes. The Codecademy assignment was quite effective in quickly teaching me the basics of HTML and CSS by exposing me to a wide variety of interactive, hands-on examples, and the W3Schools assignment provided an excellent review of the materials and has proven to be a dependable reference throughout the CIS 2336 course. The Liquid Layout assignment, however, is the best representative of Module 1 for previously discussed reasons.
The step-by-step tutorial on Max Design demonstrates how to transform a page with plain text into a page with a more sophisticated three-column liquid layout. It shows how to better organize HTML content by utilizing modular <div> container elements, and it also shows how to better control the appearance of a page by using CSS to style those elements individually. Although internal styling is used in the tutorial, the code can be easily adapted to use an external stylesheet instead by transferring the relevant style code to an external stylesheet and properly referencing the stylesheet in the HTML file. The advantage of the external stylesheet is that multiple pages may reference that same stylesheet for their presentation. This effectively reduces repetition of code, a recurring theme in this course that will be seen again in the next module.
The finished page from the assignment may be previewed below. To view the page in a separate tab/window, please click here.