Landing : Athabascau University

Unit 3 CSS Site Styling Learning Diary Entry

Unit 3 is where we introduce CSS to the fold to generate nicer looking websites that one would be proud of showing off. This is also where I introduce some of the content to the site. Having operated a website in the early 2000s, one thing I really learned from this unit and saw reinforced while browsing the web is that HTML only describes webpages, but CSS describes how that webpage is displayed. Thinking back I am certainly guilty of using HTML tags and tables to directly format how my webpage is displayed instead of relying on CSS to do the design work.

There is a great infographic at the following that outlines this:

https://www.codingdojo.com/blog/html-vs-css-inforgraphic

It was fascinating to gain a better appreciation as to the flexibility of CSS and how much it can do, even with regards to changing images and how they display. Using CSS to modify how my menu appeared was nice. The code was so simple, and in the past, I am certain I have done things such as reusing existing JavaScript to have boxes fill in with color on a menu of links to navigate to different sections of a webpage. By using CSS properly, I was able to avoid a lot of this complicated code implementation, while having flexibility to change how my menu looks and interacts from a formatting for my entire site from the CSS file referenced.

Being forced to ensure browser compatibility is also something I never considered. It made me look at an external resource at https://www.lambdatest.com/ to determine if my page worked on other browsers, it does. For the older versions of browsers available on that site, my page mostly rendered correctly, with minor issues that didn’t affect the overall functionality of the page, but just an alignment issue with portraits.

There is much to learn with CSS and the page at https://www.w3schools.com/css/default.asp does a really good job covering off many of the items. It is almost overwhelming at first, but with testing and patience I felt I was able to pickup enough to have my site looking nice. It makes me question with the resources being free at w3schools.com why people turn to sites such as Wix instead of spending some time learning CSS.

Similar to Java, what HTML and CSS remind me of is using subroutines and objects to break down tasks to simpler levels to keep the main program (HTML) clean while you use other items (CSS) to do some heavy lifting on the display side. This actually makes it easier to understand the HTML and the CSS separately than if everything was done with HTML tags, tables, etc.

I am looking forward to introducing more content as I learn more about scripting to touch on some final areas of the needs of the personas of Unit 1. My current site is available with images, that have not been sourced with anything other than my own phone and lame photoshop efforts for a title image, at the following site: http://student.athabascau.ca/~davidbo56/.

My submission for Unit 3 is here:

https://landing.athabascau.ca/file/view/6892602/unit-3-css-site-styling-submission

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)


Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc