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 learn the basics of Javascript, which allows us to turn static websites into something dynamic and interactive. We use a Javascript library called jQuery to create a shop website that has a filtering menu and a toggling feature on mobile devices.
return false
is jQuery speak for event.preventDefault(); event.stopPropagation()
. These two standard JavaScript events do exactly what they say they do! The first prevents the default event from running — so if you have a link it stops the page from visiting that link — and the second stops the event from propagating up the DOM, so for example if you had something inside a link then it'd stop the event from travelling "out" or "up" to that link.
The "#
in <a href="#">...</a>
is a type of link called an anchor link, they can be used to take you to certain sections within a page by naming them like "#bottom"
— and having a corresponding element at the bottom of the page with the id #bottom
— but when you have just the hash it'll always take you to the top of the page. Using href="#"
is best-practice when the actions of a link will be overwritten by JavaScript as we're doing here. We don't actually want to go to the top of the page so we use return false
inside the click event but we use this because it's best to always have a non-empty href
for every link, even when it's not going anywhere!
The best way to think about this is when you're selecting an element and jQuery or JavaScript can't tell that it's a class then you're going to need a period, so $('.product')
rather than $('product')
— the second of which would only select the non-existant <product>
element — but if you're working with classes directly — with methods such as removeClass
or addClass
— then you don't need the period as jQuery knows this can only be a class, not a different element or an ID or anything else.
This often comes down to the site hierarchy itself. It's a good rule of thumb that you'll use heading tags for titles and paragraph tags for body copy.
You'll always want to have exactly one <h1>
tag on a page — for SEO purposes — but the mix of <h2>
, <h3>
and etc. are mainly down to personal preference. You typically work your way down the order of importance which is why for Essmei we have an <h1>
for the logo, an <h2>
for the pull quote, an <h3>
for the smaller text below it and <h4>
s for the title of each item. You'll notice that they also decrease in size as we go down the list, as they're also decreasing in order of importance.
There's a few things to make sure of here. The first is that your JavaScript files are at the bottom of your HTML and that you have the jQuery file first and your own JavaScript second, this'll look something like:
<script src="jquery.js">
<script src="script.js">
You need it at the bottom of your HTML because you want to make sure the browser has parsed the entire page before running your JavaScript, allowing you to hook up events to the elements, and you want jQuery before your own JS so that the browser will load the library before trying to run your JS that uses it.
If you're still having trouble then make sure to check the Developer console. If there's any errors then it'll often tell you about then, even going so far as to give you the exact line and column that the error's at! If JavaScript is still giving you trouble then don't despair, send us a link to your site to hi@superhi.com and we'll make sure to get you sorted 🙏
Although they’re a fictional band, The Hexagaons have a website that will rival most of today’s biggest artists! This week’s project has been designed by London based graphic and digital designer Meara Withe (website and Twitter). You’ll hopefully already recognise her work from week 3 Lola’s project, so you’re in store again for another explosively colourful and heavily graphic visual treat.The real challenge here is how to achieve the menu effect with a centered logo between two navigation sections. Give it your best shot, but if you get stuck the solution is here. Oh, and try your best to use flexbox for things like the header and album elements.There’s also the same JavaScript effects used to filter the products, which can pretty much be borrowed over from Essmei.
A place for you to post notes about anything on this page. Only you can view your notes.