Make a Responsive Artist’s Portfolio in Under 30 Minutes | Chris Minnick | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Make a Responsive Artist’s Portfolio in Under 30 Minutes

teacher avatar Chris Minnick, I teach beginners at every level.

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (17m)
    • 1. Introduction

      1:25
    • 2. What is Responsive Web Design?

      1:34
    • 3. What is Flexbox Layout?

      0:50
    • 4. Demo: Write the HTML

      3:58
    • 5. Demo: Get Started with Flexbox Layout

      3:28
    • 6. Demo: Make It Responsive

      2:46
    • 7. Demo: Testing and Sharing

      3:06
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

128

Students

--

Projects

About This Class

In this class, you’ll learn how to use CSS Flexbox to create a responsive grid that you can use to build an image gallery that will work on smartphones, tablets, laptops, and desktops.

The class assumes that you have a basic level of knowledge about HTML and CSS. There’s no software to buy or download for this class.

Meet Your Teacher

Teacher Profile Image

Chris Minnick

I teach beginners at every level.

Teacher

Hello, I'm Chris. I've been a web developer for over 20 years. I've authored and co-authored over a dozen books about web development, including HTML5 and CSS3 for Dummies, JavaScript for Dummies, and JavaScript for Kids.

I'm also a swimmer, a novelist, and a musician and I live on the beautiful Oregon coast.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, I'm Chris Minnick. Welcome my class Responsive Design. I've been a Web developer for over 20 years and the author of HTML five and CSS for Dummies , JavaScript for Dummies, John Ruskin for Kids and many other books. I enjoy finding ways to teach technical skills to beginners at all levels before we get started. Let's talk about what are the things that you should know before you come to this class for this one. If you have any previous experience with HTML and CSS, you'll be able to follow along just fine with this class. By the end of this class, you'll be able to define responsive Web design or are WD as college of business, and you'll be able to use the latest technologies to implement our W. D. In a website. I'm gonna be showing you how to build a responsive three column layout containing images and captions. This is one of the most useful Web layouts you can make not only gonna be used as we're using it here to make an image gallery, but can also be used to make three column website with a mix of images and text or taxed images and widgets or whatever you like. This particularly layout also happens to be very simple to create, thanks to a new feature of CSS called Flex Box Layout. We'll get to that in a minute, but first I want to talk a little bit about what responsive Web design is. 2. What is Responsive Web Design?: responsive Web design is a way to design Web pages that makes them work on different size screens. And here's an example. On left, you see a mobile device with a Web page that isn't fit to the mobile screen. You have to zoom in and scroll in order to see the whole thing. With the version on the right, the website actually changes that's layout or responds for the size of the mobile device. It's important to note the responsive design uses the same Web page for both mobile and desktop devices, but just changes based on the size of the device. So why should you care about whether your site is responsive? Here's the first reason. In 2016 for the first time ever, the percentage of people who are using mobile devices to visit websites exceeded the percentage of people using desktop or laptop computers. If your website doesn't work on mobile or doesn't work correctly and mobile devices, you're missing out on at least 52% of visitors and even more if you count tablet users. And the second reason to use responsive Web design is that Google likes it more. Google searches Air Done using mobile devices that I computers today, and as a result, Google has made it very clear that they favour websites that work well on mobile and desktop computers. But they've got even further and specifically endorsed the techniques of responsive Web design as the preferred way of making sites work on mobile devices. The message is clear. If you want to reach more potential users or customers, make your site responsive. 3. What is Flexbox Layout?: So now let's talk about the technology that we're going to use to make our website responsive. It's called flex box layout. Here's how it works. Flex Baxley Out is an efficient way to lay out a line and distribute space among items with different sizes or even changing sizes in a container by container. We mean the HTML element that surrounds all the elements that we want to distribute space between. This is the key thing to remember about Flex box. Make sure that you put the items that you want to lay out into the same box. Here's an example of an item inside of container, and then here's an example of two items inside of container, and then we can put in more. You can keep adding items, and the flex box will automatically adjust the space between the items and the grid to fit the size of the container. And flex boxes can also be vertical 4. Demo: Write the HTML: So enough talk, Let's code I want to introduce you to the website will be using to write our response of code code pen dot io. Copan is a website that's designed to help Web developers quickly right in share Web pages and Web applications without having to worry about installing software or allow the other prerequisites of Web development, which will explore in detail in other classes. If you want to just get into it and learn something new and share the results, code pen dot io is a great way to go. To get started with code pen, just click on the create button right here and click on new pen. A new window will open, and Code Pen has several pains here for writing the different kinds of code involved in Web applications. There's HTML, CSS and JavaScript. Today. We're not going to be using the JavaScript pain, so I could just minimize that one, and I'm going to expand the HTML pain just a little bit now. The first step in creating are Responsive Image Gallery is to create the container that will hold all of the different images. So I'm gonna do that using an html development, and I'll give it an I D equal to portfolio. And then we'll close that div. And now we have our container and we'll be putting all of our images inside of this container. And then inside this container, we can create a div with a class of artwork for each of the images that we having in our image gallery. And I'm going to just save this, that clicking on the save button and I'm gonna paste in some rose for additional images just like that, we can look down here and this is our preview window right now. Doesn't show anything because all we have is containers. But if we were to add something such as this is my picture, you can see that each item inside of the container currently stacks underneath the previous one. This is great for now, smells move on. Let's add in some images. Code pen has an assets button right here, and you can click on that and then browse through design assets that you can use inside of your project. So you click on it in the design assets window opens and then you can click on photos and We'll make this a little bit bigger and you can scroll through these photos. You can search. There's quite a selection here. I'm going to search for dogs and the research. And then a lot of images of dogs will come up and to use the imminent, you can just click on this down arrow here and then select copy as image full. We're going to use the full size images so that you can see how responsive design adjust the size of the image based on the size of the screen. So click on copy as image full, and then you can put your mouse here in the HTML pain and use control V or Command V or select and it paste to paste in the image. And so right there is the code for the image. And then we can go back to the preview window by closing the design pain, and you can see that there's our image and it's really large right now. But right underneath that you'll see the text that we put in earlier. This is my picture, and this is another so, so far, so good. Now we'll go back to you assets and we'll take another picture and we'll do copy as image full. And we'll put this one into the second space right here and well paced it. And then we'll find another image. Copy has image full and paste it in. And you can keep on doing this all the way down until you filled out all of the different spaces, and I'm going to speed up this process just for the purposes of this video. Then, once you're done, you can close the design assets window again, and then you'll see that you have a Web page with Siris of very large images, and you can scroll all the way down and one images stack on top of the other until the very bottom of the page click on Save and then the next video. We're going to see how to start making this page responsive. 5. Demo: Get Started with Flexbox Layout: Now we have a Siris of images inside of items which are inside of a container. It's time to start adding some CSS to start turning us into a responsive grid. The first thing we're going to do is start making the images fit inside of their containers . And so the way will do that is we'll just add in CSS selector for images. And then we'll add a property max width, and we'll set that to 100%. And then once we do that, you'll see the images now fit the size of the screen. And so if we just the size of the screen now, the image size adjusts. And that's the first and very most important step to take to make your images responsive. But we're still not using flex box, and we still don't have a grid. Right now. We just have one name is displaying on top of another image, no matter how big screen is. So to make this responsive, we have to add some additional CSS. So we're going to select our portfolio now by using an I D selector, and they're going to make this container into a flex box and the way you do that is by saying display flex assumes I add display flex to the portfolio I d you see that all of our images now flow horizontally. So we're getting closer. So I'm gonna look at the items inside of the container. So that would be the items with the class of artwork. And we're going to add some styles to those to make this layout in actual grid, select the artwork items inside of portfolio by saying portfolio with a subclass of artwork . And then I'm going to say flex one. And what this does is it makes all of the items inside of the flex box be the same width notice. Now, if I remove this the with so different we add in the one. And now each item has the exact same with If we made this a vertical flex box by changing the flex direction from the default of Row two column now with flecks of one, each item has the same height. But when it changes back to row, which is the default value and now we have a single row with each item being the same with because our flex is set to one. I'm going to put some margin between these items, so I'll say margin is 10 pixels now. The last thing left to do is to make this flex box wrap so that we created grid instead of just a single row, and so do that by setting a maximum with for the images of 420 pixels, which the good size for mobile devices. We have a long row of pictures with each picture at 420 pixels. But what we want is for these images to wrap, and so the way will do that is will change our flex wrapped property to wrap, and now our images rap and we have more or less a grid. We have some work to do to clean this up, but it's starting to look like an actual grid. No can make the window smaller. And when we get down to a size that's less than the width of two images that it goes down to a single row in the next video, we'll make some additional adjustments to make the captions look better, and just to clean this up and make it look more like Responsive Artist portfolio grid 6. Demo: Make It Responsive: in this video, we're going to finish up our artists portfolio and get ready to export it. So what we need to do now is to add some style to our captions. So I'm going to actually add a new class for captions. Well, do this. Using a P tag, P class equals caption, and then we're going to do that right here with this one as well. We'll say P class equals caption and then close that. And you could do this all the way down for all of the images if you wanted and noticed by adding a P that puts the text underneath the image. This is because the paragraph element, like the development, is what's called a block element. It has a line break before and after it, and by default, these block elements stack on top of each other. So now in the CSS, I'm going to add a selective for caption and will set the margin at the left to 10 pixels and the margin at the top two minus five pixels, and that'll make it just kind of nuzzle up against the picture. So that looks pretty good there. I'd like to make the final look a little bit less corny, so I'm going to add a style to the body element. This will change all text within the body. We can change the font family to a sans serif and the color to something more gray rather than black. So Gauthier A Okay, so that's looking All right. Now let's take a look at our grid. That's not bad. But notice that the images don't shrink when the browser window shrinks. We need to make some changes to our CSS in order to make that happen. Right now, our maximum with on the images 420 pixels in effect, this is going to make the image always be 420 pixels, as opposed to when we had the max with set to 100% which would always make the images fit. So we need to make the images fit, but we want to have some sort of minimum with so that they'll still rap. So we're gonna use the men with property to do that, and I'll set them in with property of 200 pixels to start with, and I can see a desktop size. We have two rows here of images and can shrink that browser window. And now the image sizes decrease until there's ah, break point, which causes another row to be created. And we can keep going down, down, down until we get to the point where we just have a single row. And so this is how it should look on mobile devices. In the next video, I'm gonna show you one more thing that we need to do before this is going to actually work on mobile devices. And then we're going to export the code so that you can run this outside of code pen or even upload it to your own website. 7. Demo: Testing and Sharing: in this video, we're gonna do a few more things to get your artist portfolio ready to export and upload to your own website. So the first thing they do is to make this actually work on mobile devices, click on settings and then here, click on insert the most common view port meta tag. Not going to go into what this does exactly in this video. For now, just know that it helps to make your Web page scale and change size correctly for mobile devices. Chrome has a nifty mobile emulation mode that we can use to see how this will look on mobile devices without actually having to uploaded to the Web and downloading it to our phone. So the first thing we're gonna do to use this is to change our view. Two full page, and then we can go to the Crow menu here and select more tools and then developer tools, and that will cause a window to open down here at the bottom of your screen. Right here is the device toolbar. Click on that. It's going to simulate mobile device so you can see right here. Now we have a simulated mobile device and appear. You can select the type of device, and I'm going to set this right now to an iPhone X. And we look at this than it looks great there. IPhone six. No problem at all. Their iPhone 678 and we look at a galaxy and we can look at it on an IPAD pro to exit device mode. Click on the toggle device toolbar. I kind again. And now we're back to desktop mode. You can close the developer tools here by clicking on this X, and now we're back in the code pin and you can change back to the coding view by selecting change view and then clicking on editor view. So there it has. Congratulations. You've built your first responsive website. Now, when you're ready, you can export this from code pen by going to change you. Then go to editor view and then down here, the bottom. You'll season icons and scroll through. These will see this one here, which is export, and then click on export dot Zip and it'll download the page to your desktop. You can also embed this if you don't want to mess around with code you can click on the embed link. You'll get some code here that you can copy and paste into your WordPress site by using WordPress short code into another page by using I frame or HTML. By using these, you can share your page anywhere you like. And there we have it. You've built a responsive artist portfolio that you can download or just copy and paste into your WordPress site or your Blawg or anywhere else, where you want people to be able to see your photos. Make sure to write this course and to follow me here so you can see my upcoming classes on Web development. Thank you.