Landing : Athabascau University

Unit 3: CSS Site StylingBook and Submission

  • Public
By Michel Desmarais May 23, 2019 - 5:57pm

I easily caught on to the basic CSS structure of coding: linking, creating CSS selectors and assigning attributes. Where I struggled at first was the layout and assigning positions to DIV elements. I found that the results can be quite unpredictable for a beginner. I have noticed a pattern in my research. I first look for sites which have done something similar to what I want to do. Once I have found a few examples of the required elements, I go back to W3Schools to study the HTML and CSS elements and put the puzzle pieces together in my CSS Stylesheet with some trial and error. 

 

The CSS stylesheet I create in unit 3 is for the desktop version of my website. I tried to do adjustments using CSS @Media, but I wasn’t quite satisfied with the results based only on screen resolution. I am hoping the JavaScript I will learn combined with small CSS tweaks of the original stylesheet will enable me to make dynamic pages as I want to. I did not create a sidebar as my original plan intended. I found that it made my page feel cluttered. I would consider a sidebar to be valuable should my page be more complex, with many sub-pages or advertisements. In this case, I simply opted for a clean and simple design.  

 

I tried my best to do DRY (don’t repeat yourself) coding by appending some defaults to classes which shared common specs. I did have to add quite a few DIV containers as unit 1 didn’t focus on layout and looks.  

 

I am quite happy with the result of my efforts. However, I would still appreciate comments and suggestions offering a different perspective on what I have done.  

 

Mapping Activities 

 

  • Created the required desktop version of my website, for Kelly using Google Chrome, Ester using Firefox, and Jimmy with his Windows desktop. 

  • CSS stylesheet provides a casual and informal feel as planned. 

  • Created a riding tips page with a video for Robert and Jimmy to learn new skills. 

  • Created a maintenance tips page with a video for Jessica. 

  • Decided on a simple font, Times New Roman as it exist in most systems. I attempted other fonts, but results were unpredictable between Windows and different Linux distributions. I opted for simplicity to help guarantee a standard compatible look between operating system and devices. 

      Unit 3 File 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)