Converting a second heading in the design to HTML

Description

In this video we convert our second HTML element. It goes a lot faster this time around, now that we're familiar with the CSS we need to get it looking right.

Transcript

So to begin let's take a snapshot of this heading here so we have something to work against in our template. In a previous step what I did was I merged all the layers into one, so we can easily copy sections from it. So I'm going to do that here.

I'll hit tab to open up the toolbars. I'll select the rectangular marquee tool, and then I'll create an outline around this heading, we'll copy it, we'll create a new document, the size will be automatically set, I'll paste it in, and then I'm going to save this for the web. We'll save this and I'll call this slider heading dot PNG and I'm going to save it in the same location as our index dot HTML file.

Now if you don't have Photoshop you can just copy this image by going to your resource pack directory and going to the part one steps folder and copying over 09 slider heading dot PNG dot step, and just rename it slider heading dot PNG in your folder, like so. Now let's replace the image that we're using as a design reference inside of our webpage with the new one. So I'll go back to our code and down here in our image we'll change this title to slider heading, and we'll save it and jump back to the browser and refresh.

Okay, so here we have our heading. So our first step is to figure out what HTML element this should be. If we go back to our design we talked a little bit about what this might be earlier, it seems like it could either be a heading one for the entire page, or it could be a series of heading twos inside of multiple slides in the slider.

Because we don't really have a ton of information about which it should be let's just pick. So I'm going to go with a heading two at this point. Let's jump back to our code and let's add it in right underneath here.

So it's H2 More Than Just a Company. We'll save this and let's jump back to our browser and refresh. So at this point we're running into an interesting issue which is that we've already styled our H2 elements.

So to get it to look like this we're going to have to roll back some of those changes by overriding them in our CSS. For example, our default H2 is now all caps but our new heading has just the first letter uppercased. It also looks like it could be a little thicker which means that we'd be overriding the font weight.

The spacing is also thinner so we'd be overriding the letter spacing property, and the color is different, so we'd be overriding the color as well. So let's take this approach and see what we need to do in our code in order to get this heading aligned with this one. So let's play with this in the browser using the CSS styles that we know.

So I'll inspect this element and then we'll edit the element style here. So the first thing we can do is change the alignment to bring it under our image to make it easier to compare them. So I'll set the text align which we've used before to left, to override the center alignment.

Next let's bring this back to its lowercase original by using text transform. Now remember before we used uppercase, in this case we're going to use none. Okay, so that's getting it a little bit closer.

Let's change the size of this font which as we mentioned before is really just matching the vertical size of the text, so then we know how much space to add in between the letters. So let's do a couple of measurements to figure out what we might need to do to increase this to the right size. If I measure the m in the heading that's likely the tallest possible letter and it looks like it's 34 pix ...

When you have an active membership, you will be able to see your progress here.

Skill focus: Theming, Site BuildingSkill level: Beginner - Advanced

The world of front end development has come a long way in the last several years with the addition of responsive design, CSS preprocessors like SASS, and the ever widening range of devices and environments we use to navigate the web. At the same time, many of us are able to generate fully functioning web sites using CMS's like Drupal without ever touching HTML or CSS - the basic building blocks of the web. Because of that, many of us end up floundering when we need to make even minor adjustments to the markup or presentation of a project, since we don't have the experience needed to break down what our CMS is actually doing for us.

If you've found yourself either at a loss to make adjustments to HTML, CSS or JavaScript of a project, or are looking to upgrade outdated front-end skills, this collection is for you.

This collection walks through the process of converting a web page mockup into a fully functioning web page using CSS, HTML and JavaScript, as well as some of the most powerful and commonly used tools and techniques that layer on top of these three technologies.

Here are some of the key points we'll be covering:

How to use basic HTML tags and CSS properties

How to create semantic HTML

How to write more meaningful and sustainable CSS with SASS and SMACSS

How to create a responsive design with media queries

How to work with responsive images

How to improve collaboration and future-proof projects with package managers like Bower and Bundler

How to address accessibility concerns and use tools to audit the accessibility of your site

How to measure and improve front-end performance

How to use automation tools like Grunt

Who this collection is for

If you are seeking to learn modern front end development practices and tools in order to increase your value in the workplace or become more independent with your own projects, this collection was created with you in mind. Front end development is a highly sought-after skill set and is highly portable since it can be coupled with virtually any kind of back-end. Tools like Jekyll allow you to build content-rich sites without the need for a specific backend, and the focus in Drupal 8 on a 'headless Drupal' is allowing developers to leverage Drupal as a back end while still choosing the right tools to generate the HTML and CSS of the front end.

Prerequisites

We don't assume anything about your previous experience with HTML, CSS or JavaScript. We start from the very basics, but that doesn't stop us from exploring more advanced topics that are the staples for any modern front end developer. You should be able to come to the table with only the knowledge you've gained as a user of the web and still understand the steps we take and the rationale behind them.

It looks like there might be an issue playing videos in this browser. We're working on better cross-brower experience, but in the meantime please try the latest Chrome or Firefox browsers. Or, you may be able to watch the video directly without progress tracking or transcript: