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 posts - FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc
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
The Landing is a social site for Athabasca University staff, students and invited guests. It is a space where they can share, communicate and connect with anyone or everyone.
Unless you are logged in, you will only be able to see the fraction of posts on the site that have been made public. Right now you are not logged in.
If you have an Athabasca University login ID, use your standard username and password to access this site.
We welcome comments on public posts from members of the public. Please note, however, that all comments made on public posts must be moderated by their owners before they become visible on the site. The owner of the post (and no one else) has to do that.
If you want the full range of features and you have a login ID, log in using the links at the top of the page or at https://landing.athabascau.ca/login (logins are secure and encrypted)
Posts made here are the responsibility of their owners and may not reflect the views of Athabasca University.
We block sites that track your web browsing without your permission. If a link is greyed out, click once to enable sharing, once more to share.
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:
Jasmin Gallant September 13, 2019 - 6:14am