The Menu To get the menu working for the way it is in the Phone view layout ( 2 buttons per line ), we have a number of options. We could use display: inline-block on the LI elements display: grid on the NAV UL element display: flex on the NAV UL element The first method […]
Category: CSS
If you look at the screenshot that ends the previous article in the series, or at the current state of the layout in your own file, you’ll note that there are some box-model issues that need to be dealt with. For example, our header is not going all the way to the edge of the […]
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 […]
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 […]