The difference between bitmap and vector graphics, and saving our slideshow background images

Description

Collection: Front End DevelopmentChapter: Working With Responsive Images and Breakpoints

In this video we talk a bit about the advantages and disadvantages of using bitmap versus vector graphics, and go through the process of creating various versions of our slideshow background image.

Transcript

Alright, now let's move on to our other images. So in our mockup we have three other images, this background image right here, if we scroll down we have these two images right here. So let's tackle this background image first.

Now one thing that's kind of nice about blurry backgrounds is that they don't have to have the same resolution or integrity, as images that need crisp edges. So we can get away with saving them with less quality and using lower resolutions even if we're on a high resolution screen. Now we have to read between the lines a little bit with this design.

This background image stretches all the way across the page, which says to me that it's probably going to continue to stretch if we make the site even bigger, and then it will probably shrink down as the site gets smaller. If that's not the case then the designer didn't let us know what's supposed to happen on the edge if this image actually ends. It won't look very good if it's just this missing edge on the side.

So I'm going to guess the intention is to stretch and contract. So given that let's create the biggest version of this image that we can in order to support those people that are just really stretching out this website. So I'm going to go to this image here and it looks like we have some layering going on here.

Now I'm going to open this in a separate window and I'll zoom out a little bit. Okay, so we have a nice big image here, but we need to add this layer right here on top of it which will darken it, so I'm going to right click on this and select duplicate layer and let's select the big stock blurred lights. Okay, I'll go back over to that page and then I'm going to stretch this dark all the way across.

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: