In this first chapter, we learn the basics of writing HTML and CSS by creating a photography portfolio website with a parallax scroll effect.
Classes are considered best-practice as you can have multiple elements with the same class and they're therefore a lot more flexible. For example, you can have p.copy and use <pclass="copy"> multiple times on a page and they'll all be styled by the single bit of CSS, but if you were to do p#copy instead you'd start finding yourself needing p#copy-2 and p#copy-3 etc. and things will get messy very quickly!
Instead of <ahref="https://instagram.com/">Instagram</a> you'll change it to <ahref="https://instagram.com/"target="_blank"rel="noopener"noreferrer">Instagram</a>. The target="_blank" bit is the important part, the rel section isn't as important, but it's considered good practice to add it in.
The easiest way is to save each piece of text as an SVG, like we did in the homework.
In general you'll want to use background-image for background content! In this week it's a little special as we're taking advantage of background-attachment: fixed to give us the parallax effect, something that you can't easily do with <img> tags. You'll learn more about what to choose and when in the coming weeks, as we use the various advantages of each!
top and left — and right and bottom too! — are used when working with an element that has been positioned absolutely or is fixed. In general you'll be using margins to position elements on the page but when an element has a non-relative position you'll use top and left to position the element as it's been removed from the normal "flow" of the page and you need to explicitly state where you want it to go.
Add this to the end of your style.css file:
@media(max-width: 800px){section{background-attachment: scroll;height: 60vw;}}```
Unfortunately the parallax effect was disabled on iOS devices by Apple, but by adding this bit of code in you'll make sure that everybody can still see the images and use the site.
“The Pen Is Mightier Than The Sword”. Our first week’s project has been designed by UK based digital designer Luke Willett (website and Twitter), who has put together a typography driven design inspired by words from Edward Bulwer-Lytton. It’s a very striking design that uses svg (web vector format) images that give it crisp vector quality sharpness.
Private notes
A place for you to post notes about anything on this page. Only you can view your notes.