So we’ve marked up our content. Let’s style the mobile view. The idea in the Mobile First methodology is that is always easier to build up, so we will set the stylistic properties that are present at the smallest screen size, as well as those that are present across all breakpoints. First, make a styles.css […]
Category: CSS
Section and Article MarkUp If you look at the screenshots layout at this point, you will see that each section begins with a heading level. We’ve already used H1 for the site-title in the Header, so our next level of document structure is the H2 element. In other words, wrap an H2 around the first […]
Now let’s work on the inner components of the header. Wrap the DTN name in a h1. And make a list-based NAV menu out of the Features-to-Contact string of text. This should leave you with a menu that looks like this: In case you’re wondering why I am using a class of “site-header” on the […]
First of all, let’s add the HTML to structure our content and make it easier to style consistently. Where shall we start? With the Screenshot of the Full Width Layout. Open the bonus one. If we look at the headings in the screenshot, a document outline suggests itself: H1: dtn H2: Exclusive, Feature, New […]
This exercise will take you, in detail, through the building of a mockup for an index page for an imaginary magazine: DTN. We will use CSS Grid Layout, CSS Positioning, SVG Graphics, Google fonts, translucent background colors and the typical box model properties one uses in all projects. First, please download the files for the […]
In this exercise, we’re going to make a telephone keypad. In ATOM, make an unordered list with nine list items. Make the text of each successful LI a single character: in this order: 1, 2, 3, 4, 5, 6, 7, 8, 9, *, 0, #.
By the end of part one of this exercise, we had made a basic but usable website. The main things we did to ensure a workable site were the following: Setting up responsive images. By making an img style of max-width:100%; height: auto, we made the page much more fluid than it would otherwise have been. […]
For this exercise, we are going to make a website that looks like this: Please download the necessary image and text files. Unzip the file and then rename the folder to yourname-gibson-gallery. Inside this folder is an images folder, and a textfiles folder. Inside the text files folder are six text files. The text for the index page […]
In this exercise, please make sure that you are using Firefox: Chrome’s aggressive image caching will make the example appear not to work. As noted in the discussion of the SRCSET attribute, not all of our images need to take the full width of the screen. Depending on the layout, some might take half the […]
Apple’s default web browser is Safari, but we will generally use the Chrome or Firefox Developer Tools, so we need to change the default browser. To do that, go the Apple menu in the top left of the screen, then choose System Preferences, and then General: