From the Mozilla Developer Network, a checklist for the accessibility of your designs: Make sure your HTML is as semantically correct as possible. Validating it is a good start, as is using an Auditing tool. Check that your content makes sense when the CSS is turned off. Make sure your functionality is keyboard accessible. Test […]
Publ 1220 Web Design Fundamentals Credits: 6 Room: A247 Contact Info: Kevin McMillan Office A248 604-323-5941 Days & Times: Summer Term: May 01 – June 10, 2017 Tuesday 130–520 Tuesday 600–720 (lab) Thursday 1130–320 Thursday 400–520 (lab) Friday 1130–420 (lab) Office Hours Tuesday 1130–130 Or by appointment. SKIP to Class Content This Section A class will cover HTML & CSS […]
In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files. There are three sections to this page: a header, a main area, and a footer. The font used thoughout is the Google font Old Standard TT. If this is a lab exercise and not a test, […]
Photos from this exercise came from Flickr, under Creative Commons licence. Thank you to the following individuals for making such beautiful work available. Jérôme Lemaire Taddie88 Sebastian Krieger Etienne Eric Prunier Guido D´Elia Otero Vlad Fiscutean Thomas Hawk Domi Thomas Hawk txmx 2 Thomas Hawk go elsewhere go elsewhere Thomas Hawk Mr J. Shaft Arq, […]
Please download the Duplicator archive for this exercise, then download the screenshots package. The Duplicator archive contains all the site content, including the menus. It also includes an UNDERSCORES starter theme with two modifications: Post thumbnails will already have links to their respective posts (you will still need to put the_post_thumbnail() into the appropriate theme […]
Hopefully this exercise has given you some ideas about how to build WordPress templates. A number of things, of course, remain to do. There is a social menu, so please figure out how to add font-awesome icon fonts to each of the social links, while hiding the link text with underscores’ screen-reader-text class. The wordpress […]
If the conditional workout from the previous part of the exercise is confusing, remember that you could also have just made another template part to be called from the SINGLE.PHP template file. But getting comfortable with conditions gives you a lot of power, so it’s definitely worth it to practice using them. Anyway, in this […]
So we have constructed a front-page template that outputs our content in two defined loops rather than one “reverse-chronological” default loop. But when we test, we see that too much content is being output in each article. If we look at the screenshot on the page about the front-page template, we will see that we […]
Now let’s turn to the complex footer we have in the screenshot. This is actually quite easy. I have installed a highly-regarded FORMS plugin called Ninja Forms. That is why you see a FORMS section in the Dashboard (just below the COMMENTS menu item in the dashboard). Using a WordPress feature called Shortcodes, we will […]
Look at your home page. You will see the header and footer and sidebar area, hopefully well styled. Look at the rest of the content on the page. The default home page loop outputs the title, the posting date, all the content, the categories and the tags, etc. Each article is essentially unstyled, so the […]