Log in to see any non-public content on this page
Athabasca University | AU Student/Staff Login | Invited Guest Login
Athabasca University | AU Student/Staff Login | Invited Guest Login
UNIT 3: CSS SITE STYLING [Learning Diary 3]
By Hahd Khan August 9, 2021 - 8:20am
The goal of this unit is to apply CSS styling
CSS SITE STYLING
Since I will actually be using this site I've purchased a domain and proceeded to link it there
1) I worked from top to bottom, so I worked on my navigation bar to look like the navigation bar I created in my mock-up homepage. I added a class selector to the unordered list of my navigation links so I can style all of the links at once rather than styling them one by one.
2) I added a
tag to group my name and my job role to be placed at the center. I replaced the and tags for a tag because I had to adjust the size and font-weight of my name and job role. I added id selectors for my name and job role because I won't be having my name and job role again on the home page.
3)I also replaced the tag that was in personal projects for a
tag so that I can adjust the font size and font-weight.
4) I changed some tags in my projects section so that I can use the CSS flex-direction property to lay them out the way I want them. I want my projects to be like a gallery style so that the previous or next project will show when you click on the left or right arrows respectively. However, I did not add the functionality to it since the carousel requires JavaScript and we're only working on CSS.
5) I removed the table in the work history section because tables are not supposed to be used to align texts. I added
tags to use the flex-direction property as well. I added a class selector to my work history images so that I can adjust the size of them. I added the width property to the workplace number (workplace one, workplace two, etc.) because the image for workplace three would be shifted to the right slightly which would make the image look out of place from the others. Adding the width property solved the issue.
6) I used the same styling for my certifications section as my workplace history section.
7) For my contact me page, I centered everything. I also added the placeholder attribute tag for the input boxes.
8) After I finished placing the HTML tags where I want them to be, I decided on the color scheme, so I changed the background color to black, had my name and headings as white, and had descriptions as red.
I have followed the outline in the previous document to the best of my ability, taking into account all personas mentioned as well.
The important thing for recruiters being ease of use and reducing clicks for a pleasant and efficient experience.
I am keeping the colors simple and consistent throughout the entire website.
It is essential that people visiting this website are able to access the information they are after and get an overview of me in the fastest possible manner.
If I could redo something differently is maybe pick a friendlier color scheme.
and I would take more time to learn learn CSS styling animations
The current css styling animation has been referenced from here:
11, G. G., & Graham, G. (2017, December 14). Typewriter Effect. Retrieved from https://css-tricks.com/snippets/css/typewriter-effect/
- Unit 3 Learning Diary
November 22, 2024 - 8:50am
Arvind Shastri
Tag cloud
