Clone Website: University of Zurich #26
Conversation
I noticed that the website of the University of Zurich does not have a great responsive layout. I then decided to attempt creating a homepage which would look better on mobile devices.
Fixed CSS Selector (id) to target a link
There was a problem hiding this comment.
I think you did a really good job on this webpage. It's a nice idea to take an existing page and try to clone it like this, as it improves your understanding of different ways of working with code. 😊
Your code is nice and clear with good structure, usage of semantic tags as well as good naming of classes. You've used a lot of smart little nuggets, such as the unicode symbols, the calc-function as well as the full flex-operator with sizing. 🌟
Keep up the good work! 👍🏻
| @@ -1,13 +1,13 @@ | |||
| # Project Name | |||
There was a problem hiding this comment.
Hi there! I'm Karin and I will review your code 😊
| <title>Clone Website: University of Zurich</title> | ||
| <meta name="description" content="With its 28,000 enrolled students, the University of Zurich (UZH) is Switzerland's largest university."> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel='icon' href='favicon-16x16.ico' type='image/x-icon'/> |
|
|
||
| <section class="welcome"> | ||
| <div> | ||
| <img src="./img/uni_zentrum.jpg" alt="University of Zurich, Law Library" title="University of Zurich, Main Building"> |
There was a problem hiding this comment.
Even though this is an offline project, it's great that you use relative paths! 😊
| </div> | ||
| </section> | ||
|
|
||
| <main class="main-area"> |
There was a problem hiding this comment.
Overall very good use of semantic HTML-tags. 😊👍🏻
| <h2>University</h2> | ||
| <p>With its 28,000 enrolled students, the University of Zurich (UZH) is Switzerland's largest university.</p> | ||
| <p>Find here all the most important information about the University of Zurich and its educating programs.</p> | ||
| <a id="link-orange" href="https://www.uzh.ch/cmsssl/en/about/info.html" target="_blank">General Information →</a> |
There was a problem hiding this comment.
I really like that you use classes like "centered" above, and this "link-orange". However, it needs to be a class for you to be able to apply it to multiple elements. Id's are mainly used for specific styling or JavaScript. 😊
Working with this kind of general styling classes is a powerful tool and allows you to write a lot less code than if you would repeat styles in different classes. 👍🏻🌟
| <p><a href="https://www.uzh.ch/en.html" target="blank">University of Zurich 2021 →</a></p> | ||
| <p><a href="https://www.uzh.ch/cmsssl/en/impressum.html" target="blank">About this Site →</a></p> | ||
| <p><a href="https://www.uzh.ch/en/privacy" target="blank">Data Protection →</a></p> | ||
| <p><a href="https://www.uzhfoundation.ch/en/" target="blank">UHZ Foundation ↗</a></p> |
There was a problem hiding this comment.
Nice usage of unicode symbols. These are very effective to use whenever you don't feel the need to use image symbols! 🌟
| background-color: white; | ||
| height: 80px; | ||
| display: flex; | ||
| position: sticky; |
| .welcome-text { | ||
| color: rgb(0, 40, 165); | ||
| text-align: center; | ||
| font-size: large; |
There was a problem hiding this comment.
This way of working with font-sizes is rarely used nowadays because of it's lack of control (small, large etc). Either use fixed pixel measurements, or If you want to create a scale yourself there are multiple ways of doing this.
The most common one is using rem as unit. For example font-size: 1.4rem;, where the default value for 1rem usually is 16px. (You can also change the default value. Read more here.) There is also something called css variables, but these are a little more advanced. 😊
| } | ||
|
|
||
| .card { | ||
| flex: 0 1 calc(25% - 1em); |
|
|
||
| footer { | ||
| display: flex; | ||
| background-color: rgb(0, 94, 168); |
There was a problem hiding this comment.
The most common way to declare colors is to use hex-values, ex. #ffffff or #000000. Rgb is good, but mainly used if you want to add some opacity as you can work with rgba (red, green, blue, alpha) to add a value for opacity/alpha. There are many converters online if you wish to convert your selector color to hex. 😊
I noticed that the website of the University of Zurich does not have a great responsive layout. I then decided to attempt creating a homepage with a modern card layout (as showed in the Technigo Codealong) which would look better on mobile devices.