Landing : Athabascau University

UNIT 3 CSS site styling LEARNING DIARY

  • Public
By Jasmin Gallant in the group COMP 266 August 31, 2019 - 6:44am Comments (1)

Hi, 

In unit 3 CSS Styling,

I was able to learn how to style my documents (html) using CSS.


I had a hard time at first as I made the html with <br> everywhere and other elements to style the pages using only html. I also had to reorganize the html code to prepare it for the CSS styling. I wanted to make sure I do all the style only with CSS.


I had to remove previous tags and create other <div> to better manage my pages content by class. I gave class names for each content box that are targeted in CSS using the dot with the class name. In CSS, I learned about coloring the texts, background colors, controlling my content with divs by using CSS to align my div boxes and float to put them side by side.

Also, I added a clear-both in my CSS for the home page, so the footer doesn’t come in the background of my recent reviews and news box. I learned that in order to create a scroll bar I had to use the overflow: auto. It takes the content of my text and keeps it inside the box and adds a scroll bar instead. I used it also inside my reviews page as there will be new reviews added in the future.


The navigation bar uses a: hover to change the colors when the mouse hovers it. I also learned about the box-sizing effect that fix a problem I had with layout in the home page news and recent reviews box. I learned about position but did not use it as the website uses the flow of the document and simple enough.


I also learned about the css syntax and level of ordering like when you want to call a <p> inside a class targeted element you can do it by doing “.classname p” (without the “ “).


If I had to redo this I would maybe re edit my header so the navigation bar follows. I followed the site design and matched the site to the personas in my initial design as well.


This was very refreshing to see all the new elements and syntax that you can use to style a webpage. It certainly creates a much more entertaining website than just html.


I used my book HTML and CSS by JOHN DUCKET and a small crash course from traversy media before I started. ( https:// www.youtube.com /watch?v=yfoY53QXEnI )


As I also navigated and learn through the w3schools tutorials and advanced tabs on the left. They gave me what I need in order to create a style that reflect my site design.

Jasmin Gallant

Comments

  • While looking at my website through my phone on my server I realized my layout and the way I positioned my website content was not the best for user experience so I fixed it by removing the menu links since I already have a menu button with the links. 

    I also implemented a meta tag for responsiveness as explain in the w3schools.com website about the viewport property: 

    name="viewport" content="width=device-width, initial-scale=1.0"
     
    I had to reposition my divs and make it so when you surf on my site with a phone the layout stays within appealing view boundaries.
     
    This is important as in my design in unit 1 I made a scenario where the persona want to use the website with her phone or tablet. The first attempt was not a very good user experience.
     
    Not it responds to the size of your device window and resizes the boxes and site in way that it is more easy to navigate and has a much better look.

    Jasmin Gallant September 13, 2019 - 6:14am

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