The bonus tasks in the exercise both involve the use of CSS positioning. Here I am referring to: the border effect on the section-titles the placement of the category on top of the photo (with a translucent background) The border treatment changes a little bit between breakpoints, but not massively (just a text alignment difference). The text-on-photo […]
Category: HTML
Our next task is to make the layout work at other sizes. To do that, we will use one or more media queries to deliver additional styles for larger screens. Choosing Responsive Breakpoints Often I will guess at a breakpoint or two, and then modify them later. Another approach is to open the Inspector and […]
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 […]
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, #.