No Stress Website Creation with CARRD

1. Lesson 1 Introduction: Welcome to our fundamental course on Mastering card, where we'll lay the groundwork for your journey into the world of website creation. In this course, we'll focus on understanding the basic function of elements within card interface without the pressure of actually building a website. As educator, having a solid understanding of website creation tools is becoming increasingly important. Whether you're considering creating a classroom hub or a professional portfolio, knowing how to navigate platforms like cards is invaluable. Throughout this course, we'll familiarize ourselves with a card interface, exploring its various tools and functionalities. We'll learn how to navigate the interface efficiently, understanding the position and use of different tools and grasp the basic of customizing elements. By investing your time in mastering these foundational skills, you'll be better equipped to tackle more advanced courses involving card in our upcoming courses like time activities, creating an online syllabus. Creating a classroom website and more. Understanding the ins and out of the platform now will not only save you time and frustration later, but will also provide you with a solid foundation for unleashing your creativity in future projects. As we conclude this introduction, I want to emphasize the significance of what you're about to embark on. Mastering guard isn't just about creating websites. About unlocking the world of possibilities for your teaching journey. Imagine having power to design interactive teaching materials that transcends the boundaries of the traditional classroom. With Guard as part of your toolkit, you'll be able to create engaging resources, dynamic lesson plans, and interactive assignments that keep your student actively involved in their learning. Even outside the four walls of your classroom, by incorporating card in your teaching arsenal, you'll not only enhance the way you deliver content, but also empower your students to explore, engage, and learn in new and exciting ways. So let's embark on this journey together and harness the full potential of card to revolutionize your teaching experience. Welcome to Card Basics. I'll see you on the next one. 2. Lesson 2 Signing up: In this lesson, let's discuss about signing up for card. When it comes to signing up, you have two options. First, you can use your personal email address. This is a suitable choice if you are a part time teacher, juggling with responsibilities across two or three schools. However, if you're a full time teacher dedicated to one school, utilizing the email address managed by school Admins is advisable. This ensures that all announcement, maybe from the HR department or emails from your dean, as well as communications with your students are centralized in one email address. Well, that's my recommendation. However, if you prefer, you can sign up with your personal email address, especially if you plan to purchase the P plan or the P plus plan, which will start from $19 a year up to $89 a year. It's a worthwhile investment, especially for Techi savvy teachers seeking to enhance interactivity in their classrooms. Card represents an excellent option for blending or blended learning classrooms. You can begin by selecting a template under the Profile tab section for an instant website or explore a landing page presets for creating a classroom website. Note that the Forms section are exclusively available in the pro version, and it requires you to subscribe for a yearly subscription to utilize all the pro version under the Forms tab. To get started, simply click a template down here. Make sure you select the free template. If you encounter a pro version, it's easy to spot the P template because there is a tag on the upper right corner of the card that says Pro. Okay, it's an indication to consider subscribing, well, to a pro plan. Currently, you won't find any pricing links or buttons on the landing page of card. If you want to view the various pro plans, you'll need to select a Pro template and then click on Select. The pricing details are accessible by clicking the Learn More button. So if you want to know the price, just click this button. Card offers various pro plans, ranging from PLT, which allows you for three websites or 31 page website to a pro plan that can accommodate 25 to 50 websites. Subscribing to the P plus plans will give you advanced settings, site downloads, and also this one. This is my favorite password protection for private class access. Encourage you to explore cards benefits in your classroom, and that includes our lesson for now, and I look forward to seeing you on the next one. 3. Lesson 3 Preview, Sorting and Organization: In this lesson, let's explore the buttons that you see at the top center of this dashboard. The first one right here is this preview button, it's with lack of a better word for this button. Let me just call this my preview button. In here, you can see the number of sites that you created. So right now I have 25 sites. 19 of that is my published site, and five is my draft site. And I only have one template as of this recording. And that is my online syllabus template. But have one portfolio. So if you want to organize, you can always add a folder. So right now I have two folders that I created, one for portfolios. I only have one as of this recording, and that is from Mr. Sam Oxen's creative folio. And this one is an old folder. When I was teaching I Academy, I have 11 sites created for my students for their activities, classroom websites, time pressured activity, all of that are inside this folder. I have no archive sites, but if you want to archive your site, you can always look into this folder to open that site with card. If you want to add a folder, just click this button right here. Okay? So let me just click again my preview button. And this one is to sort your sites in order, for example, if you want to start from the newest sites that you created or from the oldest and so on, okay? You can also change the way you view all your card site by clicking these three buttons right here. If you have maybe a few sites created, maybe this one is a better view, and if you have an increasing number of card sites, maybe this one will help you. On the next lesson, we are going to explore a new site. That's all on the next lesson. I'll see you on the next one. 4. Lesson 4 Exploring Templates: In this lesson, let's click on the new site. It's up here on the right side, upper right side corner of your dashboard. So let's click that. And inside this page. If you want to start on a blank canvas, you can click this button. So for example, you have the layout ideas that you want to apply on a website, then definitely you need to start from scratch. Okay. But if you need a website immediately, you can choose from all the stunning website that you see down here. If you see a P tag on top of the template, it means that you can only access this template if you are on the paid version because some of the elements that are used inside this card website is only available if you are on the paid version. Okay. So if you're on the free version, don't worry because the free version is also dynamic and will give you a professional looking website. Okay? So let's go up here and let's explore the categories that you see on this page. We have the profile so if you want to create maybe a teacher website or your own personal website, you can choose from these templates. Again, if you see a pro version tag on top of the card that is only for the paid version. So the next one is a landing page. This one, if you want to create a landing page, for example, for your online classroom, for your online syllabus, you can click on this tab and you can choose from the available templates down here, okay? For the rest, you can explore the tabs like forms. So if you are on the paid version, you can have forms inside your website. So like this one, you can ask for their name and email address and if you want them to subscribe to your website. So all of that are available for you. Inside the form category, if you are on the paid version, for example, if you are on a P plus plan or higher. Okay? You also have your portfolio down here and sectioned. So card, the main feature of card is for you to have a one page website. But you can also like this one, you can also simulate multiple pages using section breaks. We will discuss about section breaks on the upcoming lessons in this course, right? So that's it for this video, and I'll see you on the next lesson. 5. Lesson 5 Difference between the Free and Paid version of Templates: In this video, I will show you the difference between the free and the paid version. Let's start with the free version. Okay? So if you want to preview a website in card, especially for the templates, you can click that demo button. It will show you the published version of that site. Okay? So this one is a free free version template. So you can access this with your account if you are using the free version. So as you can see, we have the social media platform down here and three buttons on the second section. And this one is the title and the subtitle of this website. You also have a full background. So that's the free version. As you can see, it's minimalist in design, and it's very functional. All you need to do here is to change the background image, change the links for these buttons. And, of course, the text that you see here, because right now it's all dammi text. It's all Lorem Ipsum, okay? Let's go back to our dashboard, and let's go over to our pro version or the paid version of templates. If you are using the free version, you may not have access for this card right here. Okay? If you click on Select, it will not go to your edit page, but it will prompt you to subscribe for a pro account. So let's click on the demo, and I'll show you why you cannot access this with the free version. As you can see, it's almost the same. We have the social media platforms down here and you can also send emails for the owner of this site, and you can click on and show your work, right? Let's go back and the About page. Okay, pretty much up to this point, it is all basic. But if you go to contact, this is available only for the paid version. Okay? So you can have forms inside your website. Okay? So let's go back to our main page or landing page. So that's the difference. That's the only difference for this at least for the two website that I'm showing you, right? Let's go back to the dashboard. So if you want to have a more dynamic website, more interactive, it is not a bad idea to purchase the pro version of this platform. $19 for a year is a very reasonable price. And you can get all the features. You can have custom domains. You can add forms, embed codes, and all of the cool stuff that a teacher can do with card. So that's about it, and I'll see you on the next one. 6. Lesson 6 Customizing Colors and Fonts: There are two methods for designing a website, starting from scratch or choosing a template from the selection. For example, let's choose a template and customize elements such as colors, phones and other important features. Remember, if you wish to modify styles, font sizes, or colors within each element, you need to access their properties. Let's begin by navigating to our landing page tab and selecting this template down here. Let's start by clicking the Select button. In this template, you have different types of elements. The image element, the text element, and also the button down here. Let's scroll down so you can see the whole arrangement of elements. Right about here, you can find close proximity of different types of elements. So let's start here. You have the title page or subheadings, and if you select the text element, the properties will slide in from either left or right of your screen. Simply go to the appearance tab, and down here you have the colors. You can change that by clicking the thumbnail and moving the slider right here and then changing the colors inside this palette. But as you can see, all the headings are changing because they belong to a style called overline. So let's undo and go back to our appearance tab and change the style to none. So now you can change the color of this text. So let's change this to red. And let's go down here. Let's change this from Roboto to RAM or REM. And for the size, maybe 2.75. And then go down to weight and slide this all the way to the right. Let's see. How about the line spacing? Let's move the slider just a touch and also with letter spacing. You can experiment with indent. Well, that didn't work. And for the margins, let's see. So you can use margins if you want a space, especially at the bottom part of your text element. You can also change the appearance from upper case to normal or lower case. You can also use small caps. But for this example, let's put it back to uppercase. You can experiment with the alignment. Obviously, it will not move, even if we set it to a left align. Let's add a gradent. Let's click inside this textbox and maybe changing this or adding a green gradient to our base color, which is red. You can also change the angle by sliding this from left to right and looking at the result. And to modify the gradient or the transition, you can slide step one and step two. Okay, so by doing this, you can separate the text with different colors. You can also add an outline. So let's go with blue and change the width by sliding this area down here. If you are done, and if for some reason you change your mind and you want to go back to the original style, just go up here and change the appearance to overline. I'm going to click Done. Let's move over to our button. To change the color, I'll use the appearance tab and go down here. For my background color, I'm going to switch this to orange. As you can see, when I move my pointer over the button, it changes to a bluish color because there is a value inside the Hoover text field. If I want to change that, all I need to do is to click on the thumbnail. Okay, let me just scroll down here so we can see the palette more clearly. I will change this to black. Now, if I hover my mouse over the button, the background color will change to black. Okay. You can experiment with the properties down here, but since this one is set to default, changing one color will affect all the colors of elements with the same style. Let me just undo all my actions so it will preserve the value of the default style. Then while the button is still selected, I'm going to the appearance style section and set this two none. So if I change the color of this button, it will only affect the buttons that I've selected. It won't affect every element with the same style. I will end this lesson for now and let you experiment with different elements inside this page or with your chosen template. Play with the properties and observe the results on the screen. This will help you to familiarize yourself with the properties function within card and assist you in designing your website in the future. That's all for now, and I'll see you on the next lesson. 7. Lesson 7 Adding Sections and Elements: In this lesson, we are going to talk about adding sections and elements. In this example, we have different types of elements, the image element, the text element, and the button element down here. And if we scroll down, you will see this one is a container with two columns. On the left side is text and on the right side is an image, a placeholder. Down here, you have a divider set to zig zag with a light opacity of black. Now, I will duplicate this and you will see two dividers. I'm going to select the first divider and you will notice there's a space between these two elements. While the divider is still selected, I'm going to go up here to add an element. I'll just click the plus sign. And select container. By default, there is only one column. I'll select the divider again and add another element, which is the text element. It will not go inside the container because the container is not selected when I added the text. This will be my subtitle for this section. And I'm going to call this contact us. Then I'll go up here and I will look for a subtitle like this one, and go to the appearance section just to know what type of style this text has. Right now it is set to heading two. So I'll go back to my subtitle, contact us, and change this to heading two. Okay, I'll close this and select the appearance style section again or the style button and click none because I want to change the line spacing to one and the letter spacing to 0.75. Okay, then I'll click Done. By setting the style to none, this will not affect the rest of the subtitle that are set to heading two. I'm only affecting this title right here. I'm going to click on the container, and then I'll go up here to add another element. Maybe I want to gather information from my site visitors. So I'm going to add a form. The basic form has fields for name, email, and a message section. My issue with this form is, if I go down here, you will see that the buttons are rounded. From the appearance section, you'll notice that the styling of this is set to default. What I'll do here is I'm going to copy the color code for this button from the background color. Then I'll go back to the appearance section of the form element and navigate to the bottom tab to paste it here. Okay, I think it has the same color. So I'll just adjust the corner rounding to 1.875. And for the height, I'll decrease it to 3.875. Then I'll go up here and change the styling to label plus icon. Next, I'll change the icon to arrow right light. So it will have the same styling structure as the button down here. Finally, I'll click Done. That's it. It's very minimalist, but at the same time, this section right here maintains the same design consistency as the whole page, and that's it for now, and I'll see you on the next lesson. 8. Lesson 8 Fundamental Elements: This lesson, we are going to explore the fundamental elements of a card website. Let's start with the background. You can change the color or add gradent to your background. You can also add an image, or you can use a slideshow. Even video, you can use it as a background. Next is the page. The page also has a different properties that you can modify. You can change its style from a box which has a white background, or you can set it to default that has a transparent background. Additionally, you can set it as a white box or a tall box. It will depend on your design layout for your website. You can also center the page. As you are seeing right now, the page is currently centered on the screen. Experiment with the width and other properties in the properties panel, which we'll discuss in detail in the following lessons as we continue to explore the features here in card. Next is the container, which is the most important element to understand when designing a website in card. It will hold other elements like text, images, videos, and a lot more. If you click the plus button to add another element, you'll notice that it goes out of the container if the container wasn't selected before. To ensure the elements are added inside the container, click and drag them inside the container. You can modify their positions within the container. Additionally, you can change the properties of the text element inside the container individually. Let's move the text element outside the container, so it will be the title overall heading of the page. Another element is the control element, which depends on the style of controls you set for the website. For example, this one is a section break, but you can change it to a scroll point or header and footer. You can add more containers into a one page website. But if you want to navigate through different sections with the use of a button, you might want to change the type of control to a scroll point, while the section break can simulate another page or multiple pages. Going to select the text element because I want to add another control point. But this one will be the header marker. I'll also set another control point to be my footer marker. Then I'll add another container to hold all my footer information for the website. As you can see, you now have a complete well, basic sections of a full page website. You can continue adding more containers to house additional information about your website. You can add additional elements inside the container like an image placeholder, or you can go to the container type and set it to two columns, which will give you two columns by default. You can go to the right column and use it as a spacer. You can also add text to the second column. You can also add an icon and another maybe image placeholder. You can put it back to its default type, but it will give you one column, which is a little crowded. So if you want to organize information, I suggest you put it back to two columns. Additionally, you can add more columns by clicking the Add button right here, like what I did. So now I have five columns with 20% space for each of them. I can move some of the elements inside those columns, and I can also set the fifth column to be my spacer. And that's it. I suggest you experiment with columns, containers, controls like section breaks and scroll points, so you can be more familiar and have a strong foundation in laying out your website. Okay. That's it for now, and I'll see you on the next one. 9. Lesson 9 Text: In this chapter, we are going to explore some details on certain elements you see here in card. Let's start with the text element, and I'll also explain the elements exclusive to the paid version of this program. Again, you can access all the elements that you need right up here when you click this plus button. The first one on the list is the text element. I'm not going to add text because I already have samples that I will explain to you. I'm just going to click the first one right here. As you can see, the text is bold because of the two asteris on both ends of the text. It's a simple code that you can find right down here. So if you want to make a group of text bold, just enclose them with two asterisk. The second example is in italic. The italic text requires one asterisk on both ends. If you want, for example, to italicize a word or a sentence, just enclose them with one asterisk on both ends. The third one right here has a hyperlink. Sometimes we don't need to create a button to link us to another page. Sometimes we only need to link a word in our body of text. Like what you see here. So the word here is hyperlink. When I say click here, the visitor can click on the word and it will connect them to the URL that you set for this word. Okay. In my example, the word here is enclosed with a bracket. So that would be the word that we are going to apply a hyperlink. And the URL is enclosed in a parenthesis. So right after the close and open bracket. Without the space, you need to add the hyperlink or the URL inside the close and open parentheses. You can click this link if you want to know the allowed URL types. The fourth example is the same as the hyperlink. But the only difference is when you click the link, it will open to another browser, leaving the original page on another browser. This is helpful if you want your visitor to go to another page on another tab. So if you want to open a link to another page, just repeat the process from our previews example on how to create a hyperlink. However, this time after the URL, you need to add a forward slash, then at symbol and then the word blank. And close it with a parentheses, so the code would look like this, which will open the link to another page. To change the color of the word or a group of texts, let's combine some of the techniques we've learned so far. In this example, we are going to enclose the word orange with two asterisk on both ends and then close it with brackets to make the word bold. Additionally, we are preparing this word to have a different color. Can add a color code or the actual word of the color. In my case, orange, or you can put also red or blue, yellow. It's up to you on what color you want your visitor to see on your page. And then close it with braces. So the code should look like this. The last example here is a combination of changing the color of a word, adding a hyperlink, and making the word bold. Simply repeat the process close the word with the link to a URL with double asterisk, specify the desired color with braces, and enclose the entire equation with brackets. Next to it, you need to provide the URL of the site you want to connect the word with. So the equation should look like this, and that's it. The last thing you need to do right now is to save your work and check out the published site. That's all for now, and I'll see you on the next lesson. 10. Lesson 10 Image: In this lesson, I'm going to teach you how to create rounded corners for images. It's actually quite simple, if you think about it, but I just want to share some of my experience regarding the image element. As you can see, I have two columns. Now, I'll click the plus sign and add an image. Since the container is selected, the image was added inside that container and went directly to the first column. Now, I will click on it and go to my Image tab. I'll upload an image from my computer's directory by clicking on Upload and selecting the image. I don't want to crop the image, so I'll double click on this icon and then click Accept. Now, while the image is still selected, let's go to the appearance section and change the corner rounding property. Elements like image and container have a property called. Corner rounding. However, for the image, it's a bit different. You'll see that the corner rounding property disappears when I slide the width to edge to edge. So that's a limitation for the image. The corner rounding disappear at a certain point. If you want corner rounding for your image, you can slide it down to max or make it a little bit smaller. For maximum corner rounding, you can slide it to full bleed, but make sure the container has rounded corners because it will follow the shape of the container. You can adjust the size of the rounded corners by sliding this area. Now, here's another example. I'll select this container, then I will turn off the corner rounding. While the container is still selected, I'll add an image by clicking the Plus button up here because of my previous action. The image is bigger and it's now occupying the wool container. Okay, I struggle a little bit because you need a steady hand when selecting the container. Later, I'll show you an easy way to select a container. Now, we're inside the container because the appearance indicates that we're inside the container. Let's select the image first and upload an image. I'll select the same image, and I will not drop this image, so I'm going to double click on this icon and then click Accept. Inside the appearance section to select a container, click the image first, then scale it down. Then that's the time to select the container. Simple as that. Now, let's go back. The container is still selected, let's click on the appearance and slide the corner rounding to one. Now, select the image and slide it to edge to edge. And that's how you add corner roundings to your image using the container. That's all for now, and I'll see you on the next one. 11. Lesson 11 Video: There are several ways to add a video to card. So let's start with a background, a page, and a container. I'll go up here to my plus sign and add a video element. The video went straight inside the container because the container was selected when I added the video. Inside the properties panel, you have two options to add video inside card. The first one is to upload and the second one is to embed. With the embed option, all you need to do is to paste the URL of your video and click Done to view your video on a published site. Just remember that only a few URLs are allowed or accepted when you use the embed option for videos, especially inside the video element properties. Let's go back to upload. Then I'll click the Upload button and look inside my computer's directory. Here I have a simple video snippet. I'll select that and click Open. Let's go ahead and save this. But before publishing the site, you need to fill out the required information for this website. So I'll just fast forward this video and click Publish. The URL is not important at this point, so I'll just click Publish. Then I'll view the new site, wait for it to load, and click Play. The video is now at the center of our page and our container. But what if you want your video to have no controls and just play. So let's do that. I'll post this video and go back to my card. I'll click Okay. Then I'll click the video element and then scroll down here under the options. I'll enable Autoplay and Loop playback. I'll also turn off the show player controls option. I'll go to the published site and refresh it to see the result. Now, you don't have the player controls anymore, and it will just play. So let's go back to our card I'm just going to click Okay, then I'll click the video element again and go to my appearance section. I'll adjust the size to the right. As you can see, I cannot complete the whole slider because of the restriction inside the container. So I'll just scale this down maybe up to 98%. Then I'll select the container and then go back to the appearance tab. I'll slide this area and add corner rounding. Then I'll click the video element again and slide it all the way to the end of this slider. Now you have a rounded video, so it will take the shape of the container. I'll click Done, save this and see the result of the published site. Again, I'll go to the browser and refresh this to see the result. Now you have a video with rounded corners. Aesthetically, I think this one looks good. You can add a title on top of the video and also a description below to complete the whole page. I'll go back to my card. I'm going to click Okay. I'm going to start with the fresh plate. I'm going to select the container inside the appearance tab. I'm going to slide down or turn off the corner rounding of this container. Then I'm going to click the Plus button up here and add a video again. I'm going to change the type to embed. And then let's go to our video on YouTube. This is Unlisted video. Right click on the video and copy the video URL, and then go back to Card and pase it right here. Then I'm going to click Done and save this site and then publish changes. Then I'm going to go to my browser and refresh the page and then play this video. So now I uploaded a video from my YouTube channel, which is set to unlisted and place it inside this container. Let me just go back to my card. I'm going to select the video again, then go down here and uncheck the show player controls, enable the loop playback and also the autoplay. Then I will go back to my appearance tab and slide the size to edge to edge. As you can see, I cannot go all the way through this slider. So I'm just going to scale this down and select the container, slide the corner rounding of this container to 1.75. Then click the video again and slide it to edge to edge. As you can see, even if I try to slide this all the way to the right, the size of the container would restrict me from doing that. But my purpose for this example is for my video to take the shape and corner rounding of this container, so I will have a smooth cornered video player or frame. I'm going to click Done, save this site, and publish changes. Again, I will go to my browser and refresh the published site. As you can see, this video is not available after the changes I made from card. So all I can do is to click this icon at the lower right side of this video, so it will go to YouTube. Let me close this browser and go back to my card. Click Okay, and click the video element again. Go to the first tab and click or enable this show controls. Disable the loop playback and autoplay, and then click Done. Save this and publish the changes and go to my browser and refresh the page. Whenever you experience this issue or this problem, just go back to your video element and enable the show controls and then disable the loop playback and autoplay. I'm going to pause this video for now and go back to my card. I'm going to click Okay, select the video element and delete. I'll show you another example. I will select the container first and then add an embed element. Then I will go to my video on my YouTube channel. Again, this one is set to unlisted. Then I will right click and copy the embed. Then I'll go back to my card and inside the property s panel of my embed element, I'll scroll down and look for the code property. Inside the textbox, I'll paste the code from YouTube. You can also add a label for this one. Inside the style, you have two options inline or hidden. I use Hidden if I'm pasting JavaScript or HTML tag that will not appear on the page, but will do its work on the back end of my website. And because this is a code from a video inside my YouTube channel, I will set this to inline. Let me just add a label. I'm going to call this YT for YouTube and then go up here. I have two types of selection. Later, I will change this to a responsive code, so I'm going to stay with code. I'll go down and click Done. I'll save this and publish changes. Again, I'll go back to my browser and refresh the page. As you can see, the video element is not responsive, so I will use chat GPT to generate a responsive code for this video. Inside chat GPT, all you need to do is to type in a question. Make this code responsive and then paste the code, the embed code from your YouTube video and then paste it inside chat GPT enclosed in a quotation, and then click Send. It will generate a code for you, and all you need to do is to just copy and paste that code into the text box provided here in card. After that, click Done, save your work, and then publish changes. You can either view your site from here or go back to your published site and then refresh the page. And that's it. Thanks for watching, and I'll see you on the next lesson. 12. Lesson 12 Gallery: If you want to showcase images on your personal website or classroom website, you can use the gallery elements. Let's start by clicking on the container first, then going to our plus icon and then select Gallery. Now, while the gallery is still selected, let's navigate to the property panel. Click on the first option and choose Upload. I'll select my favorite images and click Open. I won't edit anything in this window, click Accept. Down here is a caption labeled untitled. Instead of adding a title, I prefer adding a sentence inside this caption. Since I haven't prepared a sentence yet, I'll use dummy text. I'll go to my Lorem Ipsum generator and then generate a sentence. Already have one sentence generated, so I'm just going to copy it and then paste it into the caption box by pressing Control V. You can add alternative text or text, which is a good practice. And if you want to link this image to another site like Pixabay or Pexel, you can add the URL in the textbox. For now, I'll just add the image by clicking the ad button and then click Upload. I'll select an image, click open, and then inside this window, I'll click Accept. Then I'll paste the Domitex into the caption for the image. Okay, so let's add two more image. I'll fast forward this process. Don't worry. The paid version of card will provide you some protection, ensuring your images can't be downloaded from your website. Just check this box down here and you're good to go. I will leave the setting as default for now. You'll understand the difference between the two modes later. Next, I'll click on the appearance tab. First, let's select the gallery, then change the style to fit. You also have options for fixed and full, but I leave this to default for this example. I'll set the alignment to the left just to see the result on the page. I think I will leave this one to Auto for now. You can experiment with this later. You can also adjust the spacing between images. Why? Going back to the Image panel, I'll add some corner rounding. Finally, I'll click on the last tab in the appearance properties. Currently, there are no captions for the images when I hover over them. If you want to add captions, you can choose to display them below the image. However, because my caption is too long, if I change the style to bottom, it gets cut off right here. Show the entire sentence, I'll select this option that allows the text to span multiple lines. Lastly, there are three visibility choices like always hover and not hovered. Let's begin with hover. So when I hover my pointer over the image, a sentence with a light white background will appear below. If we switch to not hovered, it will be the opposite of our previous option. In this case, when I hover my pointer over the image, the caption will disappear. I think I'll stick with hover for now, which means the caption will appear when I hover over the image. I will change the visibility back to always because I want to change the background color of my caption. Next, I'll proceed to adjust the background, perhaps changing it to red or shades of red. Of course, I will maintain the opacity so that you can still see a bit of a background image. Then I'll set the blur to one and add a little padding for the option. Then I'll change this to hover and alter the style or position of our caption. Let's start with top or perhaps center. How about full? Okay, I'll set this one to center. Then I'll click Done, save this site. After that, I'll publish the changes. Since the images are in four k resolution, this might take time depending on your Internet connection. Now, I'll click View site and wait for the images to upload. Let's try the first one. If I hover the mouse, the caption will appear at the center. Let's scroll down so the rest of the images can upload and try bringing our mouse over these two images. All right, let's go back to our card and click Okay. I want these images to go full screen. As you can see, on the published site, clicking them does nothing. I want them to fill up the screen. So I'll go back to my card, click on the gallery, and in the first tab, there are two modes. Currently, it is set to default. Let's change this to Lightbox and see what happens. After clicking done, I'll save this site and then publish changes. Now, when I go to the published site and refresh the page, if I click on the image, it will display in a full screen presentation. And you can also see that there are two arrows on both sides, allowing me to navigate through the gallery. To close the light box, I just need to click the close or X button on the upper right corner of the screen, and that's it. That's how you use the gallery inside card. And that's all for now. So see you on the next lesson. 13. Lesson 13 Slideshow: Let's talk about the first feature not included in the free version, the slide show element. I'll show you what this feature can do for your website. So after seeing these capabilities, you might decide to upgrade to the paid version to unlock its full potential and invest in enhancing your website. Go ahead and click on the slideshow. Because we didn't select the container before adding the element, it went outside our container. So let me just click and drag this inside the container. Let's go to our slideshow properties. Go to the First tab. Right now, it's untitled. But you can change this later after we upload a new image. I'm going to click Upload. Then I'll navigate to my computer's directory and select a random image. Well, for demonstration purposes, after selecting one image, I'm going to click Open. I won't edit this anymore, so I will just click Accept. Next, I'll change the alternative or I'll text to IMG one for Image one. Then I'll click this Twirl to give me more space and click Add. Now, just repeat the process of uploading the image. Then click Open, and then click Accept, change the Alt text to image two or IMG two, and then add and upload again. I think three images are enough for this demonstration. So the best thing about this slide show on the paid version is you have this feature that will protect your image from downloads. So if you want to protect an image, just enable this box right here. I will scroll up, and then I will select the container. Under the appearance tab, I'll make sure the right corner rounding value for my container. Then I'll select the image and slide the width to edge to edge. Next, I'll adjust the height, maybe slide the width down. If you're having problems with the corner rounding of your container, for example, the image did not follow the corner rounding of the container. The solution is to change the shape of the image and then increase the width to edge to edge. I can't move this to the extreme size because of the restrictions placed by the container. So I'm going to click Done and then save this site and then publish these changes. And wait for this to be published and click on the Button View site. But because I already have this site published, I'll just go to the published site and refresh the page. And that's it. That's how you add a slide show to your website. We can also add buttons on both sides of this slide show so your visitors can click the buttons and go to the next image of the slideshow. So let's add buttons to our slideshow. First, you need to select the image or the slideshow element. Then under the appearance tab, scroll down and look for navigation. Change this to a minimal button or minimal navigation. As you can see, it doesn't have any elaborate design, a simple left and right arrows or directions. You can also change this to circles or squares. Let's switch back to circles and change the background and color of the navigation. So for the color, let's say red, and let's give this a white background. You can also adjust the thickness to let's say seven and the size to 3.25. After that, simply click Done, save the site, and then publish changes. For this example, I'm going to click View site, and that's it. Now you have navigation for your slide show so your visitors can click and manually control the transition. That's all for now, and I'll see you on the next one. 14. Lesson 14 Creating the Navigation Bar in CARRD: For this chapter, we are going to start with the creation of a simple navigation bar. So I'm going to create a new site and look inside the landing template. I'll scroll down and choose this template, which is under the pro version. The first thing I'll do here is change the site title. While you can put icons or logos here. For this demonstration, I'll just type in school name. However, as you can see, I cannot actually view the right side of this section. If I click this or select this container, the type of container is set to columns, but the right side is covered by the menu window or this menu toolset. So I'm going to add a temporary container drag that container over the main navigation bar. Now, I have a clear view of this section containing my navigation bar links and my school name. I'm going to select this icon and delete it because I'll be adding a button, which I'll drag to the right side of this column. I'm going to select a container and scroll down here to make sure that the left and right columns are set to 50%. The alignment for the left column will go to the left and the alignment for the right column is set to right. Then I'm going to click the appearance tab and ensure the width is set to full bleed. The height is set to auto and the vertical padding is reduced to zero. Can either use the slider or simply click on the value and enter the number zero. Next, let's move down to the contents and slide the width to 100. I'll scroll down and ensure everything is set to default. Then just click Done. This navigation bar is only for desktop. So we're going to create another one for the mobile version. If I click on the container and go to the appearance section, scrolling down to the mobile section of this properties panel, you will not see any features that will let you set this to desktop. The only way to make this visible only to desktop is to go to the setting Stab and navigate down to visibility. Then set this to desktop only. This can only be done by the paid version of card. After that, simply click Done. Let's move on to the buttons. I'll click this button to open up the property s panel, then go straight to appearance. As you can see, there are some choices down here icon plus label, label plus icon, icon plus wide label, and so on. However, I'm going to choose label only. As soon as I activate this option, you'll see that all the buttons on the page will be affected because their appearance is set to default. What I'm going to do is to undo this action. So as you can see down here, it goes back to its original style. Let me click this button again. Then inside the appearance section, I'll change the style to none. Or I can just add a new style and call this NA or a short term for navigation bar. Then I'm going to click and set this to label only. Scrolling down, I'll change the color of the background. It doesn't matter what color it is because I'm going to slide down the opacity to zero. But first, let me slide this all the way up because I need to copy this code. Control C to copy, then I'll go back and slide this to zero. Next, I'll go down here and paste the color code of the original background. For the hoover effect, I already have a specific color code. I'll just type it in here. It's just a very pale white with a touch of a very light reddish color. Or you can just go to any text here and then go to the appearance and copy the color code of the text. So the color of our first button up here will be this. And when I hover the mouse, it will just show me a very pale background color. Now, I'll select the button again and scroll down so I can set the corner rounding to zero or turn off the corner rounding. When I hover the mouse, it will just show me a box with a label button inside. I'll scroll down again and go to the weight of the text. I will set this to medium. Then for the letter spacing, I'll set this to 0.0 75 or 0.0 75. Again, it's up to you what would be the letter spacing of your navigation links. I'll scroll down again. I will set the spacing to zero. And for the margins, I'll set it to 1.75. After that, I'll just click Done. You can test the button by placing your pointer over the button. After that, let's add some more and change the title of this button. Let's select the button to open up the properties panel. Inside the first tab, I will click this down arrow so I can change the label name to home. Let me just correct my spelling and make it H. Before closing this accordion, we will set the URL to home. So first, I'll just type in the number sign and then home. This will serve as a name for the section break inside this page. Going to click Done, and I'm going to check my Nav links, take a hard look at it and make some last minute decisions if I want to change the spacing or something like that. So for now, there's nothing to change. So I'm going to go back to the properties again, click the dropdown selection so you can see the ad button. Okay? I'll add another one and change the label to Class. You can type in whatever links you have in mind, or it depends on how you create or structure your classroom website. But for this demonstration, I'll just go with class. For the URL, I'll just use the hashtag or number sign again. But this time, it's just a number sign. It won't go anywhere and it will not disrupt navigation or the links within the website. It will just return to the homepage. Going to click Done, and again, check the Nav links. At this point, you can change your mind, change the spacing or the letter spacing or the margins. And I think there's nothing here to change. So I'm just going to go back to my property panel. I'm just going to click this drop down arrow to close this section, and then I'll click Add again to add another button. This one I will name this activities because this page will house all my classroom activities. And for the URL, I'll just change this to number sign. Then I'll click Done. If you want to add more buttons, simply repeat the process and you can review the previous video recordings or lessons and discourse. Don't forget to save your work, including the title description. And if you have a folder, you can save it there. If you're using the paid version of card, you can choose your extension or domain extension. Or you can publish it with a custom domain, which we'll discuss in the next chapter of this course. Once you've completed all the requirements, just click Publish. Since this is a template, you'll need to go to each element and add images to all the placeholders on this page. That's all for now, and I'll see you on the next lesson. 15. Lesson 15 Responsive Navbar for mobile devices: In this lesson, we're going to create a navigation bar for mobile devices such as iPad and cell phones. So when you open this on a smaller screen like your mobile device, it will change the navigation bar into a Hamburger menu. It will alter the links on your navigation bar. So the first thing you want to do here is click Save. Let me also show you another way to view your website through this button right up here. So again, save your work and then click this button. As you can see, if I resize my browser window, there are no navigation links until I adjust the size. The reason for that is if I close this browser and go to the settings of my navigation bar container, you'll see that under visibility, it is set to desktop only. That's why the navigation bar disappears when the screen size changes. If you click the down arrow, you will see four choices like normal, the two restrictions, which is desktop and mobile, and one exclude. Let's set this two desktop for now and go to my first tab. I want to duplicate this because this will be our mobile menu. Okay? Let me click and select the buttons and delete them because I will change this to an icon. Okay, let me drag the icon inside this column. As you can see, the properties panel is covering my icon. So let me just click this left icon right up here, so the properties panel will move to the left side of the screen, allowing me to see the icon more clearly. I will change the icon to menu, specifically the Hamburger menu. This one looks a bit bold, so let me switch to menu light. I will also go to one of the buttons down here, and then I will copy the background color from the appearance tab to maintain consistency with our website colors. Selecting my icon, I'll paste the code under the icons color. All right. Now I have my Hamburger menu. Let me click Save and then publish. I'll click View site and resize my browser window. As you can see, there are now two navigation bars. The second Navbar is also visible in the desktop version. However, when I reduce the size to a smaller screen, it disappears from this version of the page. So I'll pull this back to my browser, go back to my card. Click the container, go to settings and change the visibility to mobile only. Then I'll click Done. I will select a container for our mobile only navigation bar and add a Control. For this one, I will name it home. After clicking Done, I'll add another control, selecting the mobile only navigation bar again. I will click the plus button to add another control. This time, I'll change the type to header marker, and then I'll click Done. Next, I'll save my work and publish changes. Click Okay and return to the published page and hit refresh. Now, as you can see, the mobile navigation bar is not visible in the desktop only view. However, when I pull this out of my browser and resize it, I now have a Hamburger menu for a smaller screen. Clicking it will navigate back to my homepage. So when I click the Hamburger menu, it will just go back to my homepage. So let me just go to my card. And if I click the Hamburger menu and go back to the first tab, there's a temporary URL, which I'll select and change to mobile Menu. I'm going to click Done. I'll scroll down and select the whole page to add a Control. I'll name this. But first, I'll return to my menu icon, go to the properties panel, and under the URL, copy the section name I set for this menu, and then I'll go back down here. I'm going to scroll down and then select the section break and then paste it here inside this text fill. Moving on to buttons, I'll duplicate the sets and drag them below the section break. If positioning them is tricky, I'll reverse the process by dragging the menu break on top of the buttons. After closing the property s panel, I'll select the buttons and under appearance, I'm going to click NN to ensure their style doesn't affect the main navigation bar buttons. I will add another container for these buttons. As you can see, the buttons is set to mobile only because the last action that I did was changing the visibility of the container to mobile only. So I'm just going to drag the buttons inside the container, and I'm just going to change the type to columns. And then drag the sets of buttons to the right side of this container. I'll set the left one as a spacer. Then I'll adjust the width of the button to 20 plus 20 to 23 or so in the appearance tab before clicking done. Now, I'll save my work and publish the site. Returning to the published page, I'll resize the browser window to confirm that the Hamburger menu appears for smaller screens. And when I click Home, it will just navigate back to homepage. In the next lesson, we will refine the settings of our navigation bar, get creative with animation, and explore different ways to view the navigation bar on mobile devices. That's all for now, and I'll see you on the next lesson. 16. Lesson 16 Fixed NavBar Refining the NavBar for Mobile devices: Let me show you something here. When I pull this out, resize the page, and scroll through it, you can see that the navigation bar is included in the one page structure of the website. However, if we want the navigation bar to stay on the screen as we scroll through the pages, that will be our lesson for today. Can we make it stay on the screen on a mobile device while we scroll through the pages? Let's start by dragging this page to our browser group. Then I'll select the mobile only container navigation bar. And in the properties panel, let's navigate to the settings. By default, it is set to element and style. These are the two tabs that you can see here inside the settings properties. If we click on Style, it will show us two more options. Which are default and mobile. We are going to write this code inside the mobile settings. Let's go down here and type in a code. This is a very simple code that you can copy and paste. I'll include it below the video so you can just copy and paste it here inside this text field. We start off with position. Let's add a column, then typed in fixed, followed by a semicolon. This would be the format for this code. And then typed in top, which is zero. For the left side, this one is also zero. The width, I'll set this to 100%. Then I'll just add in a background color, which is white. If you are going with the primary colors, just write the name of the color. If you have a specific color in mind, you can just write the code. Instead of white. You can just add hashtag followed by FF or something like that. Lastly, this one is the Z index, which is set to number two. This code will ensure that the headings or navigation bar will stay on the screen as we scroll down through the pages. It's like placing this navigation bar on a second layer. So the first layer will be the whole page, and the second layer will contain the navigation bar. I'm going to click Done, save my work, and publish changes. I'll navigate to the published site and then refresh the page. I'm going to pull this out so it will float so I can resize the page. As I scroll down, you'll see the navigation bar stays on the screen. I will go back to my card editorial because for the next refinement we need to make for our website is to modify the links or the navigation links for the mobile screen. Scroll down at the very bottom of the page. Then I'll select the container for our mobile menu. Let's try to modify something here. I'll start with the first tab inside the container's property panel. Then I'll change the width of the column to 20% and align the right column to the right. Moving to the appearance tab, I'll select the set of buttons. Within the appearance tab again, I'll set the width to the maximum or 30. Actually, let's set this to a maximum size. Next, I'll change this to wide label plus icon. Then I'll return to the first tab and go to the first button, changing the icon to home. For the URL, I'll change this to number sign or hashtag home. Moving to the second button, I'll change the icon to Play. As for the URL, I'll just typed in a number sign. For the third one, let's change the icon to clock. Again, a hash tag for the URL. If you haven't set the section breaks or scroll points for this page, I'll click Done, save my work, and then publish the changes. Going back to the published site, I'll refresh the page and pull this down. As I resize the page, it will go to the mobile version. As you can see, as I click on the Hamburger menu, you can only see two buttons. We're going to fix that. It's expected because we need to twix something inside the property s panel and add another container inside the card editor. I'll drag this back to our browser group. Then return to my card editor. I'll select the container for our mobile menu and navigate to the appearance tab. Under the content section, I'll change the width to Auto. Next, I'll click Done and scroll up to the temporary container we placed on top of our page. We don't need this anymore, so we can just delete that. I'll save my work and publish changes. Now, I'll go to the published page and refresh it. Right now we are still in the mobile menu section. I'll simply select and delete the word hashtag mobile menu from my address bar. All right. I'll pull this down and resize the page again. As you can see, I still have two buttons. But where is the first one? The home button. Because the navigation bar is on layer two, it's covering our first button. So the homepage is under this section of the navigation bar. Okay? That's why we only see two buttons down here. I'm going to drag this back to our browser group, go back to my card editor, and scroll down to select the container of our mobile menu. Then I'll add another container and place it before the mobile menu. This will act as our spacer so we can see the links or the navigation links when we change the size of our website. The space provided on top of this mobile navigation link will be the place that will be occupied by the navigation bar of the mobile version. Let me show you what I mean. I'll click Done, save my work and publish changes. Now, if we go back to our published site again, I'll erase the mobile menu section from the address bar. I'll refresh the page again just to make sure and view this on a smaller screen. Now, if I click on the Hamburger menu, we can see the three navigation bar links on the mobile version. I'll drag this back to our browser, go back to my card editor, select the mobile menu container, and maybe adjust the padding a little bit. I'll click Done and save changes. Then I'll go back to see the result. You can modify the spacing, the margins, and the paddings of your mobile menu. You can also adjust the gaps or spaces between the buttons. You can change the colors or whatever you want for the mobile menu. On the next lesson, we will try to be creative with the transitions from the desktop view to mobile view in terms of navigation links. That's all for now, and I'll see you on the next lesson. 17. Lesson 17 Being Creative with the NavBar Links: This lesson, we are going to add animation to our navigation links for the mobile version. This is my attempt to add creativity into the presentation of the Nav links when access from a phone or tablet, making the experience less boring for your students as they navigate through your site. Let's scroll down to the bottom of the page and select the sets of buttons that you see down here. Next, we'll move on to the animation settings under the visible property we will change this to slide left and adjust the stagger value 0-0 0.5. Additionally, we can enhance the appearance of the mobile menu buttons. Let's create a style, a new style called Links Animation. After that, just close this drapdwn list and click Done. You can preview the animation by clicking the buttons on the tool set at the upper right corner of your screen. If you are satisfied with the animation, save your work, publish changes, and view your site. Resize the page to mimic the screen size of a tablet or a phone. As you click the Hamburger menu, you'll notice the animation in action. You can also hover your mouse over the links to check the animation for H buttons. Now, let's drag this page back to our browser group. As you can see, there's no landing page layout here except for the navigation bar because we are currently within the mobile menu, which is visible only on mobile devices. I will select and erase this set of section links on our address bar, and then we are going back to our card page editor. I'll click Okay. From here, I'll fast forward through the recorded video. I'll do that post experimenting with different settings and values in the appearance tab, tweaking the properties of H buttons until I am satisfied with the result. So feel free to explore different options for your mobile animation, and I'll see you on the next. 18. Lesson 18 Custom Domain: This lesson, we are going to create a custom domain. Currently, we are using the default or preset domains like card.co, such as in our project navbardmo.card.co. However, if you want to use a custom domain, we can change this to something like a ww.slathd.com, and I can use that for my card website. However, since I already use that website for another site, I can only use a subdomain for this one. Therefore, I'm going to use a subdomain called classroom.slerthd.com. I'll explain how to do that in this lesson. If you want to add a custom domain, the first thing you need to do is to save your work. Then on the Properties panel, scroll down until you find the action property. Currently, I'm using a domain name, ETB Navbar demo.or.card.co. Too many. Okay. So if you want to have a custom domain, just click this option right here. S. Let me just erase what's in the textbook so we can start fresh. As you can see, there is a gray area down here, which is currently unavailable. If you want that to show, simply type in your custom domain inside this text field right here. Now, I'll type in classroom as my subdomain, and my domain name will be slerthd.com. You'll notice there is an indicator right below the text field showing that this domain is available. Again, Syler three D is my main domain, and my subdomain is the word classroom. If I change this to www dot, it will indicate that this domain name is not available. Because I'm already using the ww slarthd.com on another site. So putting ww slartd.com will not work. And the field down here will remain grade out. I'll just typed in back my classroom dotslerd.com. Now, as you can see, the text field down here is now activated. All you need to do is to apply the information you have here and set it up with your preferred domain provider. For that, I'll be using godaddy.com. I log into ww godaddy.com dot ph. So the charges are in Philippine Peso. Before you sign up to go daddy, you can simply type in the domain name you want in this text field. I'm going to type in my cool classroom site. Oops, let me just correct my spelling. And then I'll click Enter. As you can see, the first one right here is my Cool classroom site dot pH, which is 969 Pesos. I believe this is for the first year. Down here is where you can find mycolclassroomsite.com. It says here that you only have to pay one Peso or 999 pesos for three years. Okay, let me check that. So all you need to do is to click on the domain name, and down here, just click Make it yours. Okay, inside this card, you can see that the default is set to three years. So I'm just going to change this to one year, and now it is 729 Pesos. As you can see, it's not one Peso, right? So just to be clear, it's not one Peso, but 729 pesos for the first year. Okay, you can also add a full protection, which will have an additional cost. And for the total, it will now be 1128 pesos. You can also look for a much cheaper domain. If you scroll down here, there are many options for you. Just click and add that to your card. Once you signed up for Go Daddy, you can now access your own dashboard. From here, you can type in your domain name and add it to your card. Right now we are inside my Go Daddy account. I have some of the website that I purchased listed here. One of them is slertred.com. Let me just navigate down here and go to myslertred.com domain. I'll click on DNS. If you're using another provider, just look for the DNS settings. Okay, now I'm in my DNS management dashboard. Right down here, you can see, let me just fix my browser. Okay, now I have my card page editor on the left and my go daddy Syler three D dashboard on the right. So as you can see, the first option here is to set A type. So I'm going to set this to A, I'll copy the second text field, which is for the host. If you're using Go Daddy, it's under name. I'll paste that here. Make sure that the word is typed in properly for the target, I'll copy that and paste it into the value text field. Okay, I think that's about it. All you need to do is to click Save and add another record. For this one, it will be a C name. I'll copy the host again. So just click this icon right here to copy and then paste it here, double checking the word, I'm copying. Okay? I think that's good. Now for the target, I'll copy and paste it into the value text field. Then save this and then I'll go back to the dashboard. Okay, I'm done with Go Daddy. I'm going back to my card page editor, and I'm going to publish the site. As you can see, the view site button is grade out because the website classroom.slerthd.com is processing in the background. So all you need to do now is wait. So I'll just click Okay. And that's it for this lesson, and I'll see you on the next one. 19. Lesson 19 Sharing Your Website with QR: Sharing your website with Card is very simple with a QR code. Just go to your dashboard and click on the gear icon, which is the manage site icon. Then under overview, click on this icon right here. This will generate a QR code for your website. You can download this QR code and share it with your students via PowerPoint, or you can print it out and place it on the Blackboard or whiteboard. But if you want your QR code to be more impressive, you can use a website that will give your QR code a more creative design. So let's go to google.com and type in QR Monkey. I use this website to generate QR codes for my class activities, and for the website I create within card. Now, let's go back to our card and copy the link. Then go back to armonkey.com and paste it in the URL tab. The next step is setting your colors. You have two options, one for the foreground and one for the background color. For the foreground color, let's choose blue. And for the background, let's choose red. Now, it's a weird choice of color combination, but I just want to show you that there will be a warning if the colors don't have enough contrast between the background and foreground to work with all QR codes readers. For now, let's leave it as blue and red. The next tab is to add a logo image. If you add a logo, it will be placed in the middle of the QR code. This is another way to personalize your QR code for your student on a specific activity or website. You can also use the logo of your school to maintain consistency with your school's identity. Next is the customized design tab. Here you can set up the type of body shape and the frame shape around your QR code. And down here, you can choose the eyeball shape. After pressing eight QR code, it will generate the QR code based on your specification. So now you have blue and red QR code with a frame and eyeball shapes occupying the three corners. I suggest you experiment with QR Monkey and be creative with your logos and colors. That's it for now, and I'll see you on the next lesson.