Don’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
We add interactive flair to our websites with hover transitions, transformations, and a menu that toggles open and closed with jQuery. We also add to our toolkit of layout techniques by learning about absolute and relative positioning.
One thing to watch out for with CSS is that new property values will overwrite old. So if you have transform: scale(1.15);
on an element and then change that to transform: translateY(-50%);
further down your CSS or in a media query the second transform is the only one that'll apply. In the case that you want to merge them both you'd need to do transform: scale(1.15) translateY(-50%);
.
To be honest, most tags are interchangeable! The best way to think about them is as boxes of Tupperware: you may have a smaller box or a larger box but in the end they both store items.
Generally though, we like to use the right box for the right job, so it makes sense to use a <header>
tag when your content looks like a header, a <footer>
tag for the footer or the <nav>
tag for navigation as well as any and all of the other many HTML elements.
For us, when it comes to larger areas of the site, we like to use the <section>
tag to indicate bigger areas of content and then use <div>
tags to separate parts of that content. You could use all div tags or all section tags or mix them around if you feel that makes more sense to you, the trick here is to pick a single method and stick to it!
In the design doc we have 64px
for the font size and 72px
for the line-height. When you divide the line height by the font size you get a unit-less value that we can then use as a multiplier. We could’ve just put line-height: 72px
for the heading but when it comes to making it responsive — and you shrink the font size of the heading — you’d also have to update the line-height
alongside the font-size
and this way you don’t.
Play around with the final version of the site. Try adding your own images. Try changing the typography.
A place for you to post notes about anything on this page. Only you can view your notes.