Your Website in Minutes! Simple & Fast Online Portfolio with CARRD!

1. Lesson 00 Course Introduction: Hey, everyone. Looking to build your own online portfolio without the tech headaches, the coding stress, or the expensive tools, you're in the right place. I'm Dan Vincent Canelo, and I created this course, especially for creatives, students and professionals who want a clean, modern website. Fast. No experience needed, just your ideas and a few clicks. In this course, I'll walk you through step by step how to create a unique landing page that reflects a personal style, how to build essential pages like About Me page, gallery page, exhibit page, and even a social media space, all in one leak design. And yes, we're going to make sure that your site looks amazing on mobile devices because let's face it, most people are browsing on mobile. The end of this course, you'll have a beautiful, fully functional portfolio site that you can proudly share with the world, whether you're an artist, a student, or just someone ready to build their online presence. Ready to launch your website in minutes. Let's get started. 2. Lesson 01 Changing BG and Saving: Hey, everyone. In this lesson, we are going to start with a new document. I'm here in my dashboard. I have 25 sites on my account. And yes, I'm on the paid version. But if you are doing this on a free version, you can still follow along. Just be reminded that some of the features will not be available for you. One of the major features that will be missing is the ability to set visibility on mobile devices. And of course, if you are familiar with Gard, you cannot use forms. Okay? As you can see, I have several sites that I use for my class. I also have my personal portfolio and one that I made for a friend. And this site, which will serve as the design, we will recreate in this course. Okay? So let's start by creating a new site can scroll down and look for a design that you like. But in this course, we will start from scratch or with a blank page. You can click down here or right up here. Let's create a new page. As you can see, we have the background, the page element, and the two sets of texts. But let's start with the background. Ignore the other elements on this page for now. Like the page element and the text element inside it. Okay? So let's focus on the background. I'm going to click on the background, and as you can see, the property s panel is on your left. We're going to change the style to image. Side the style section, you have two options. You can either pick an image from the library or upload your own. Okay? So let's try the first option. This is the Upload button. I'll click it and it will open my computer's directory. Then I will select an image, then click Open, and it will be uploaded. Okay? You can resize the view by clicking and dragging the corners. Once you're satisfied with the size, simply click Accept, and that will set your background image. But for demonstration purposes, I'll go with the second option, picking from the library. I'll select a simple background. You can scroll through and look for one like this one. However, this background looks too strong. So I'll go back to my library and choose a different one. Okay, I think I'll go with this one. At the time of this recording, the library has limited selections. If you have an image that better represent your personality perhaps or your brand, click the first option. If you're satisfied with the background image, simply click Done. Don't forget to always save your work. If this is your first time saving, you'll need to fill out the publish panel. For the title, I'll type in my portfolio. For the description, I'll just type in creative works. Next, you can place your website into a folder to keep it organized. If you're using the free version, you might not have this option. But if you're in the paid version, you can arrange your sites into different folders. This step is optional, but since I'm using the paid version, I might as well click here and select my portfolios folder. Now let's scroll down. By default, the first option is to publish to.card.com, URL. Okay, so you can change the site extension right here. But first, we need to type in the name of your website. You can choose any name as long as it's available. Okay? As you can see, this name is available. To change the domain extension, you currently have the longer card.co version. It's card.co, but you can switch to the shorter card.co version. Okay? Once you are satisfied with the settings, just click Publish. Let's wait for it to render a little bit. And now we can view our site. And that's it for now. In the next video, we'll modify the elements inside the page section. Okay? Well, that's all for now, and I'll see you in the next lesson. 3. Lesson 02 Page Settings: Now that we have a background for our website, let's modify the page settings. Click on the page, and inside the property s panel, change the style to default. Let's make the width a little bit wider and and I'm just going to tweak the vertical padding a little bit. Sometimes I make small adjustment just to see how they affect the page. For the contents, I will set the alignment to center because I want to place the elements in the middle of the page later on. For the spacing, I will be setting it to zero. Down here, you'll see the mobile settings. But for now, we're just going to skip this step and click Done. The images I will use in this course will come from my own artworks and as well as some placeholder images that I call dummy pictures. In the next lesson, we will add more details to our landing page and remove these text elements. Again, don't forget to save your work, and I'll see you in the next lesson. 4. Lesson 03 Landing Page: Hey, everyone. Welcome to Lesson Number three. Let's start by selecting our page. Then click on the Plus button up here and add a container. Then go ahead and delete all the text elements inside this page. Next, I'm going to select the container and add a gallery. I will add three more sections to my gallery by clicking the Add button. If you scroll down, you will see that you have the ability to protect your images, but only if you are in the paid version. This is just another feature of card that provides a little bit of peace of mind by protecting your artwork or images. Now, let's go to the appearance tab. Under the gallery tab, set the style to fix. Then for the spacing, I'll just slide this to zero so there will be no space between the placeholder boxes. If you are familiar with card, you might be tempted to fix the mobile version of the landing page right away. However, I suggest doing that maybe later in your workthog. Okay? So for now, I'm just going to click Done. Next, I'm going to click the gallery element again. Then inside my properties panel, under the first tab, I'll add my first image to the gallery. I'm going to select an image in my computer's directory, and then I'll set the visible size of my picture click this icon up here to rotate the image. After that, just click Accept. For the caption, I'm going to type in about me. This will be the first link on my website. Now, if you're scrolled down, you will see the link URL field. Right now, I don't have any sections on my website to link it to. So I'm just going to type in a number sign just to prepare this section for later, okay? If I hover my pointer over the image, nothing happens. There's no animation or anything. All I know is that this is the first placeholder, and I'm in the right spot to insert my image. Well, that's the plan. But down here, I have no idea which section this selection falls under. So I'm just going to click Done. Maybe I'll click on the gallery and try to test where to place my second image. I'll assume this is the right one. So I'll go to my properties panel under gallery, which is the first tab and upload an image. I'll select one from my computer's directory and click Open. After that, I'll resize the image and click Accept. But that's not the plan. I want it to go here. My solution is simply click and drag it down so it will snap into the correct placeholder. Down here, I'm just going to type in gallery for the link URL. Again, I'm just going to put a number sign. Then I'll click Done. I'm going to click on the gallery again and maybe set the position to top. Then I'll scroll up and set the other one to top as well. Before we go any further, I'm going to click Done. And let's save our work and see what happens. Remember, we have four image placeholder. Two of them have images, and the other two are empty. So I'm just going to click Publish changes. And as soon as I do, you'll see a warning saying unfinished element. To fix this, we can either go to the element or simply cancel. I'm going to click on the gallery again. It doesn't matter where you click on the Element. Let's close this for now by clicking on this little Twirl icon. Then I'll click on the untitled element and add an image. For this one, I have a simple graphic that I made inside PowerPoint. So I'm going to select that. And as you can see, if I resize this to get a clearer view, you'll notice that it's just a simple orange background with the words solo exhibit. I'm just going to click Open. Again, you need to resize your view by clicking and dragging the corners of the bounding box. Once you're satisfied with the area where you want this to appear in your gallery, just click Accept. I think I got the right spacing for this one. For the caption, I'm just going to type solo Exhibit. Oops. This one should be right down here. Okay, the next untitled element is about my social media. As you can see, the title I am Dan Caneo is aligned to the left side of my graphic. I'm just going to click Open. And again, I'll adjust the corners until I get the right view area. Then I'll click Accept. For now, I think that looks about right. I'm just going to caption this social media. I'll scroll down and add a number sign for the Link URL. Oops, I forgot. I also need to add a number sign for my solo exhibit link. I'll just do that. And click Done. I'm still not convinced that the spacing of this image in my card is correct. I think it's too close to the edges. So let me move to my second monitor and bring my Power Point presentation into view so you can see my slides. I'll go to my first slide and maybe adjust the position of some text inside my slides. Or maybe let's try this. I'm going to erase my surname and leave I am done. Hmm. Maybe not. I'll type my surname again and instead change the text so it fits the final image. I think 45 would be the right size. Okay. You know what? Let me just edit this inside my card editor to see if I can still modify this section using the bounding box. I'll adjust it and then click Set. Okay, for now, I'll just leave it as is. Then click Done. At this point, you need to double check all the values and adjustment you set inside your property panel. Make sure that the right links are in place and that your images are protected, especially if you're on the pain version. I think that's it. If you're done checking, just click Done. Don't forget to save your word. Wait for it to publish. And once it's done, just click Okay. Oh, one more thing before we end this lesson. Let's click on the gallery again and go to the appearance tab. Then right up here under the caption stab, make sure to change the style to top. So the caption you set earlier will appear whenever you hover your mouse over the image. For this one, I'm going to click span multiple lines. I do this just to make sure if the title is too long, it will not be upset out of view. And then right down here under visibility, let's change it to hover. Now, whenever I hover my pointer over the image, the caption will appear on the screen. Finally, save your work, publish the changes, click Okay, and all you need to do now is to test each image. That's all for now, and I'll see you in the next lesson. 5. Lesson 04 About Me Page: You might notice a slight change in the colors of some of the image elements on my landing page. If I go to my Power Point or slide presentation, you'll see that I change some of the background and color coded them. For my solo exhibit, I change it to green. And for my social media, I change it to blue. Changing it is very simple. Just select the background, and inside the paint bucket tool, you'll see my custom GradenPalet. Save or download it as an image. Then go to your card editor and replace the element inside the gallery. If you need a refresher, just go back to our previous lesson. Now, let's select a container, hit the plus icon, and add a Control inside the property panel typed in about me. This will be our first section in our personal website. Remember how we place the number sign inside each element in the gallery. Now it's time to add a name or a link to that section. Go to the About Me page or section in the gallery and inside the link URL type about me. Now, every time I click on the first image on the landing page, it will go directly to the A me section. While the control is still selected, let's go up here and hit the plus button again to add a container. Select the container, and inside the property panel, change the style to column. Okay, make sure that it is set to 50% left and 50% right for now. Next, go to the appearance tab and change the width to 50. Can use the slider or manually enter a value. For the padding, I'll set it to one. Or if you're feeling precise, typed in 1.375 horizontal to two and gutters to auto. For the top and bottom margin, I'll either turn it off or set it to zero. Now, let's go to the contents section. I'm going to set both alignments to center, so everything is centered. For the background, I'll change it to graden. As you can see, there are gradual color transition, but I don't like that, especially the colors. I'll change the first top to blue or light blue. And the second stop to green. However, the transition is still gradual, so I'll adjust the percentage to 50 for the first stop and 50 for the second stop. Now, you'll see a sharp diagonal line across the container, but it's tilted at 50 degrees. So I'm going to change the angle to 90, which will separate the two columns into distinct colors. Let's check our properties panel. Okay. Everything looks good. Now, let's click Done. Click on the container again. I'm going to add a text element. I'm just going to type in about me. And after that, click Done. Next, I'll click on the container and add another element. This time, I'm going to add an icon. Wait, I'm just going to move this right here. Now, go to the icon properties, and under the type option, change it to home. There's too much information right here, so I will close this section and go to the appearance tab. For the size, I'll slide it to 1.5. Now, I'll click on my text inside the first column. Go to the appearance tab, and then under alignment properties, change the alignment to left. For the icon, I'll change the alignment to right. After that, I'll click Done. Next, I'll click on the container again. For a faster workflow, I'll just duplicate this container and delete the icon. I'll also delete the A M text from the duplicated container. Now that I have an empty column, I'll select the container and go to the appearance tab. Under background properties, I'll click reverse to swap the colors inside the container. I know I have a habit of clicking the container repeatedly thinking it's the same thing, but the same result will apply to both columns. Anyway, while the container is still selected, I'll add an image to the first column. Then I'll upload and resize the image so that it fits properly inside the gallery. Once I'm done, I'll click Accept and then click Done. Next, I'll select the image, go to the appearance tab and change the width to edge to edge so it will fully occupy the first column. Then I'll click Done and save my work. Finally, I'll publish the changes, and wait for them to be applied. Don't forget to save your work every time. Once published, I'll click Okay. For the second column, I'm going to add a text element. I'll click and drag it to my second column. Since I don't have a description or a simple bias sketch yet, I'm going to use dummy text. Let me get to my Loren Ipsum generator from my second monitor. Inside this text field, I'll generate and type in two paragraphs. I think that's about right. So I'm going to click copy, go back to my card editor. Switch to my first tab and paste the dummy text right here. For aesthetics, I'm going to delete the second paragraph and click Done. Now, I'll select my text element again, go to the appearance tab, change the weight to thin and click Done. Okay, before we proceed to the next step, I notice something here. You can see that the green background of the image is showing. I want my image to occupy the entire first column. So first, I'm going to click on the container and show you my experience with this issue. You might think this is a spacing problem. But if I go to the spacing property and slide it to the right, you'll notice that nothing happens. The way to fix it is to click on the image and adjust the height inside the appearance tab. Just slide it until you reach the desired result. Then I'll click Done. And that will be the layout for the About Me page. Before we proceed to the next step, I'll save my work and publish changes. You can view your website portfolio by clicking this button right here, or just click Okay, and go to your previous browser, and all I need to do is to refresh the browser. Then click on the About Me section on my gallery. It will take me directly to the About Me page. Now, I'll go back to my card editor. I'll click on the first container, and in the container animation settings, which is the third tab in the properties panel, I'm going to set the on visible option to fade up. Did you see the animation? I'll set the animation for the second column to fade up as well. Then I'll click Done, save my work and publish the changes. To view my site, I'll go back to my previous browser and refresh it. Then I'll navigate back to my landing page, go to my homepage and test the link again. The homepage seems to be working, but I think I need to double check. I'll return to my card editor and select the home or house icon. Inside the property panel, I'll go to the first tab and update the URL too. Oh. I'm going to save my work again, apply the changes, and go to my previous browser to refresh the page. Then I'll select the first image, which is this one, and it will take me directly to the About Me page. Now, I'm going to click the home key again, and there we go. Back to my card editor. I'll click Okay, scroll up to my landing page, and inside the animation tab, I'll change the visible setting to fade up. I think the duration and other settings here are just fine. If you want to test the animation, just click Replay. If you want the animation to play every time it becomes visible, enable the replayable option right here. Next, I'll scroll down here to my about me container and set it to replayable as well. The same for the next container. Don't forget to save your work. Always save your work. Okay? Now, I'll go back to my previous browser, refresh the page, and check the A M section. That's all for now, and I'll see you in the next lesson. 6. Lesson 05 Gallery Page: In this lesson number five, I'm going to create another section or page. I'm going to click on the second container of the About Me page because I want to add another control, and I want this to appear after the selected container. While the control is still selected, I'm going to change the name to my gallery. Then I'm going to click Done. For a faster workflow, I'm going to select my first container and then duplicate it by clicking this button right here. Then I'll drag it after my gallery control section. I'm going to do the same with the second container, dragging it after the first container under the M gallery section. Then I'm going to change the image. I'll use another image that I don't think it's in my folder yet. So I'm going to I'm going to go to my slide presentation and select the third slide, which is the artwork. Then I'll download it as a JPEG image. After that, I'll go back to my card editor, hit the change button, click on the Artwork image from my Google slides, and then click Open. Finally, I'm going to drag the bounting box so the image will view properly on the page. As you can see, my image is positioned horizontally. So I'm going to change that. I'll go back to my image editor, and you'll see this button right here. This one will rotate the image. I'll click it once, and if you want to rotate it in the opposite direction, just hit this icon a couple of times. Once it's positioned correctly, I'll click Accept. Now you can see some parts of the image are visible while others are not. Okay, so before modifying this column, I'm going to change the A M text to artworks. I'll just update the text and click Done. Finally, I'm going to save my work for now. I'm going to select a container and change the column size to 80% for the right column. As you can see, only half of the first column is colored green. The color is actually part of the background, not the column itself. Okay? Next, I'm going to change the alignment to center and delete the text inside the second column. This may seem like two separate issues. But again, the background is just a color gradent separated by the color stops inside the gradient property. Before we fix that, let's first click and select the image. Then inside the property panel, inside the appearance tab section, I'm going to adjust the height to a point where I can see the artwork. Finally, I'll select a container and continue adjusting the appearance settings. I'm going to scroll down to my background settings and adjust this to 80 and step one slightly just enough to keep the green shade visible in the first columns background. This will do for now until I decide to make further changes later. Then I'll click Done. For my second column, I'm going to add another element, a gallery. By default, it appears directly after my container. So I'll click and drag it to my second column. Now, for the gallery, I'll add my first image, which is this Lotus right here. If you want to select the whole image for the gallery section, just click this first icon right here. This option cancels the selection box or the bounding box. After that, click Accept. And now you have your first image inside the Artwork gallery. Next, I'll close this first accordion and add another artwork, repeating the same process for this gallery. I so right now, the image are in a straight line. I'm going to select the gallery again, and inside the appearance panel under style, I'll change it to fit so that it fills the space provided by the second column. Of course, I'm also going to change the width to edge to edge. Under the alignment section, I'll send the alignment to center and click Done. After that, I'll save my work and publish the changes. Now, I'll select the container again, and under the image tab inside the appearance panel, so many tabs. I'll adjust the size too. Maybe roughly 18 or so just to cover the entire background. This is me changing my mind, okay? If I want the background to be visible or not in this section. Next, I'm going back to my gallery to check if I need to make any further adjustments. And I think that's it. Now, I'll click on my first column, which contains the image, and inside the appearance panel, I'll adjust the height so it occupies the entire first column. I'll move the slider to the extreme right, which is about 50. I can still see part of the green background in my first column. So for now, I'm going to adjust the position and slide the width up to full bleed. This will cover the green background in the first column. So now the background color for this section is completely covered with the image inside both the first and second column. If I hover my pointer over each image, you'll see a caption that says untitled. So the first column image is still selected. If I click on the gallery and go to my first tab, you'll notice that each element inside the gallery is, well, untitled. Now I'm going to click the first image and type in Lotus as its title. Okay? You can also add an alternate text to describe the image, but for now, I'll just leave it blank. Next, I'll close this and add a caption for each image in my gallery. Of course, I'm going to fast forward this process. I don't want to bore you. Okay. Once all the artworks are named, let's save and publish the changes. All right. Let's scroll back up and check everything. If I click on the gallery in the landing page or homepage, it should navigate to my gallery section. I'm going to copy the name of this control, which is my gallery. Then I'm going to paste it in the gallery image URL. Then I'll save my work again and publish changes. Now I'm going to click on view to preview my published website. As you can see, if I click on the About Me section, it navigates to the About Me page. If I click on the gallery, it takes me to my gallery page. However, if I click on an image, nothing happens. To fix that, I'll go back to my card editor. I'll click Okay and scroll down and select the gallery. But since I don't see the option here, I'll close the last section of the accordion and scroll down again. Now, I'll go to the mode section and change it to Like box. As you can see, I have several options down here. You can experiment with them, but for now, I'll just click Done. Then I'll save my work and publish changes. In my browser, I'll refresh the page. And now, every time I click on the image, it will open in a light box mode. I'm going to test each image. You can also use the next button to navigate through them, and that's it. You now have a page showing all your artworks, and that's all for now, and I'll see you in the next lesson. 7. Lesson 06 Exhibit Page: Our next page is about the exhibit page. I also created a slide that has the word exhibit. We also need our Loren Ipsum generator that will give us a dummy text. Let's go back to our card editor and make sure to select a container because we are going to create another control for the exhibit section. While the control is still selected, I'm going to name this exhibit. I just want to emphasize that I don't have any solo exhibit experience, maybe in the future, I hope. Okay, moving on. Let me duplicate the first container. This will be the header for my exhibit page. Then I'm going to add another container that will be the body of this section. Next, I'm going to change the type of this container to columns. The column sizes will be 20% for the left and 80% for the right. Okay, the position is not right, so I'm just going to click and drag to reverse the sizes, so that's 80% left and 20% right. Now, the background color is not aligned with the columns. So let's fix the color stops by moving the slider until you get the right position for the colors. Then I'm going to add an image on the second column. Just make sure to move it in the right column. Then look for the image inside your computer's directory. This is the slide converted to JPEG. Next is to move the bounding box so it will view properly on the page. Don't forget to rotate the image before hitting Accept. For the first column, I'm just going to change the first stop to grayish white. Then I'm also going to add another image element to go inside the first column. I will be using this image, a digital painting study that I made with a frame. Now, this one is too big. So in the appearance tab, I'm just going to change the size so the frame is also in view. As you can see, the image is in the middle of the color. I want to add text or the exhibit details for my text, so I'm moving this to the top. I'm going to select the image and add a new text element. Then I'm going to give my painting a name Secret forest. The title is too close to the painting. To fix that, I will be adding a little space around my painting title by adding margins around the text. Next is to add details or a dummy detail for my exhibit. Inside the Lauren Ipsum page, I'm going to copy this dummy text and paste it in the text field. I'm also going to increase the size of my painting title. The text is a little strong, so we are going to tone it down. I think this will be a clean minimalist layout for this page. So I'm just going to save my work and publish changes. Make sure that this control is linked properly. So I will copy the control name, then scroll up to my landing page, go to my solo exhibit and paste it in the link URL text field with the hash tags, of course. And I will check and scroll down to change the name for the exhibit section to exhibit. I think that's about it, so I'm going to save my work. Go to my next tab and just refresh the page. All you need to do now is to check the page if it is working properly. Now, one more thing. I think I want a different name for my exhibit page, and just change it to the VincanGallery. Hey, you can always change your mind, right? This is your personal site after all. And that's it. Thanks for watching and I'll see you in the next lesson. Oh 8. Lesson 07 Social Media Page: Let's move now to the social media page. First, we are going to select the container because we are going to add another control. Then I will name this Social Media. Then I'm going to go up here and duplicate our header container. This will go down here below the control. If you are having trouble placing this correctly, just place it below the container and move the controls to separate the two containers. Now, I will find a similar layout up here and duplicate it. Then I will drag this container down to my social media page. Then I'm going to the appearance tab to change the color stops. The first stop, I'm going to make this light blue. And for the second stop, I'm going to make it dark blue. Then change the percentage until you are satisfied with the result. I will be showing a slight blue shade to the second column. Then I'm going to change the image, then move the bounding box to show just the part that I want to be visible on the page. Then I'm going to select the text in the second column and change this to four inquiries. Then I will add another element. This time, I'm just going to put a button. I'm just going to place it above the text. This button is for Facebook, and inside the appearance tab, I will change the style to wide label and icon. Then I'm going to change the color to blue. Slide the width to max, change the height of the button a little bit. It's too close to the text, so I'm just going to add a margin in between the text and the button. Then I'm going to add another button for my Instagram. Facebook icon is not check icon, so I'm just going to change it to a Facebook icon. And for the Instagram button, I will change it to Instagram icon. Now, if you want to change the color and go to the appearance tab while the button container is still selected, you are going to end up changing the whole set of buttons. To change the individual color for each button, just go to the first tab and change the color in the button properties. I'm going to change the Instagram button close to the color of Instagram. Then I'm going to change the header text to social media. Now, I'm going to select this text and add another element. If you are on the paid version of card, you can add a form to your website. As soon as I add the form, the image is now smaller than the first column. To remove the spaces, select image, then in the appearance tab, move the slider for the height so that the image will occupy the whole column. I'm just going to change the position to right. Now, I'm going to link this page to the landing page. So I'm just going to copy the control name and scroll up to my landing page, select the gallery element, go to my social media section of the gallery and paste it in the Link URL section. Don't forget to save your work and publish changes. I'm going to click Okay, go to my published site, hit the refresh icon. Then click to go to my social media main page. Now, I don't have the link yet for my social media pages. So for the meantime, this is what I'm going to do. I'm going to go to my card editor click this number sign here, then click the social media section. By clicking the number sign, card will show you the different section inside your site. First, I'm going to click the button elements. Then inside the first tab, I will be changing the URLs to a hashtag. This will temporarily add a link to my button. Now, this will not take you anywhere when you click the button on the published page. When you are ready with your social media pages, just replace the hash tags to an actual link. You can also add another field to your form by experimenting like adding a phone number, but adding another one will change the size of your container. You can adjust the image size, but for now, I'm just going to disable this field. Again, don't forget to save your work and publish changes. Go to the published page and refresh the page. Check your site, and that's it. In the next lesson, we are going to make our site more responsive so it will view properly on mobile devices. I will see you in the next one. 9. Lesson 08 Mobile Version Home Page: Hey, everyone. In this lesson, we are going to set a layout design for mobile devices. This is only possible if you are on the paid version of card. You can set the visibility of an element on the fourth tab in the property s panel, which is the setting stab. Under the visibility, you can set these two different views. It is also worth mentioning that there is an icon up here that will show you what is visible on a mobile device. Right now, the landing page is visible and the layout is not properly set for mobile devices. Let's go back to the desktop view and set the container to desktop only. Then click on the mobile icon again to see the landing page grade out and water marked as desktop only. Let's go back to desktop view. We will add another container for the mobile layouts. Let's add an image element and add an image from our computers directory. With an image only element, you don't have any room for any modifications. So let's erase this and select the empty container and add a background image. This way, we can change the width to edge to edge. Once you do that, the height will appear in the property span of. So we can also change the height of the image. We can also set the type to column. This way, we can add more elements inside the container. I'm just going to set the alignment to bottom and left. I'm also going to change the position to bottom. So the column will start at the bottom of the container. Then I'm going to add a text element that will go to the first column. Then I'm going to change this to I Dan Vincent. Inside the appearance tab, I will change this to white and make it a little bigger and maybe change the weight to semi bold. For the second column, I'm also going to add a text element. I'm going to change it to digital artists. The color is white because the last action we did for the text element is we turned it into white. Then I'm just going to change the size and weight to be a little smaller than my name. Although the name and the digital artists are in the same row, if we look at it on a mobile device, they will fall on the same column. Now, this is set to desktop only view because the last settings we did for the container was set for desktop only. So let's change the visibility of this container to mobile only. Let me show you what will happen if you adjust the settings of these elements using the regular properties inside the properties panel. Nothing happens because what we are modifying right now is the desktop view. So if you want to adjust the properties for the mobile view, scroll down here where the mobile properties are located. Hit the manual button, go to the mobile view. Make sure the element is selected. Go again to the mobile section and experiment with the settings of different properties until you are satisfied with the result. I will be changing the size of the text, height of the image, and the space between the elements by sliding the Gutters property. Let's go back to our desktop view. Check if there are any alignment issues that I need to fix. I think that's it. So let's move to another section of our mobile version of the landing page. But first, let me save my work and publish changes. I'm going to select the container and add a button element. I just need to move the button below the container. Looking at it, it's a little small and out of place. So I will add another container and move the button inside. Remember, the settings of this container inherited the previous layout. As you can see, there is an image place folder in the background. Let's go to the appearance tab and change the background to none. If you are having trouble viewing the elements, you can always change the position of the property panel, okay? While the container is still selected, let's go to the appearance tab and change the spacing around the boton. Definitely not the width. Let's change the height to auto. Remove the paddings by changing the values to zero. I will go to the bottom and change the text to about me. This button will connect to the about me section of this site. But first, I'm going to change the icon two a user, IC. Then I will change the URL to hashtag about me. I will be adding three more buttons using the same process like changing the name and linking the URL to the section control of this site. I will do it off cam, so that's it for now, and I will see you in the next lesson. 10. Lesson 09 Refining your Mobile Version Site: In this lesson, we are going to refine our layout for the mobile device. First, I'm going to view it on mobile, and then I will make sure that the container for the button is selected. Then inside the mobile manual section under the appearance tab, I will be sliding down the height to Auto. You can see, we still have spaces in between buttons. To remove the spaces, we need to go back to the proper too panel in the mobile section and slide the spacing to zero. Now, one of the design issues we see here is each button has the same color. It is very hard to separate them as a button. To separate the colors of each button, we are going to go back to the first step. Then we will start changing the color of the second button. Click on the background property and change the color to a lighter shade. To make our workflow a little bit faster, I am going to copy the color code. Then I will go to the third button and paste the code to the background property. From this color, all you need to do is to slide the selector slightly upward. Again, I will copy the code, go to the last button and paste the code to change the background and make it slightly lighter than the previous button. Look at the colored gragent. For now, I think I'm okay with this one. Don't forget to save your work and publish changes. Now let's move on the header container of each section. As you can see, the text and the icon are not aligned. To fix that in the mobile view, go to the mobile property in the appearance tab, then select the layout to default. Let's go to the second column because the background color is not properly in contrast with the text. If we go to the desktop view, we can see everything is fine, but in the mobile view, the colors will make the text very hard to read. At this point, you need to make a creative decision to ensure that the text is readable on both mobile and desktop views. I'm going to move the slider in the color stops in the appearance tab until I get the desired gradient. Then I will go to my desktop view, and then I will change the text color to white. Then go back to the mobile view to check if I need to change the background color gradient. You can move the slider and maybe change the color for the color stops to a lighter color. Then I will go back to the desktop view to check. Everything is good here, so let's go to the next section. Again, let's set the layout for the container to default. This pink element right here is out of place. So let's set the visibility to desktop only. Let's go to the third section, then change the layout to Default. Then I will select the second container. If we go to the desktop view, you will notice that the background color is neutral, so it won't be too hard to modify in the mobile view without affecting the desktop view. Just like in the previous container, all we need to do is to move the slider in the color stops properly. The next issue that we need to change is the blue element right here. This section is the second column in the desktop view. To fix this, let's change the visibility of this element to desktop only. Let's go back to the mobile view, go to the next section to fix the header container. Change the layout to default, then modify the color stops. Now, I will push the percentage to 100%. I will go to my desktop view and change the color stops here. I will also copy the first color stop of the header container and then paste it in the first stop of the second container. Then I will go to my mobile view and modify the color stops and maybe change the color of the second stop to a lighter shade. Now, check everything in the desktop view. And everything in the mobile view. Let's go to the published page, hit the refresh button, then test the links and lay out in the mobile view. Okay, make sure that you also save your work in the card editor so it will reflect in the published page. For this one, I'm just going to click View site. Then float the browser and resize it to a smaller size. Check for links and responsiveness of each button, and that's it. I hope you've learned the basics of creating a simple, responsive and modern layout design using card. Thank you for spending your time with me. I truly appreciate your willingness to explore and grow your skills. Remember, every design you create is a reflection of your unique vision. So keep experimenting, keep learning, and don't be afraid to make mistakes along the way. This lesson help you, feel free to share it with someone who might need it too until next time, happy designing and take care always. I will see you in my next course.