Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.1 Set Up a Hero Area

Hello everyone I am Reggie Dawson. Welcome to the Semantic UI framework and JavaScript projects course for Touch+. Now that we have our menu bar finished, we will set up the hero area that will hold our trailer video and background information. Now before we get started we need to install some types for Semantic and jQuery. With this project we use the Angular command line interface. By default, projects generated with this tool use TypeScript to build the components. Even though we imported the JS file into our project, we still need type definitions. TypeScript doesn't understand third party JavaScript libraries. And without the definitions, we will get some errors if we try and use methods from jQuery or Semantic. Navigate into your project folder in the command line. This will install the definition files with Semantic UI in jQuery. I installed it to the dev dependencies because it doesn't need to be included in deployment. This is because our Angular components will eventually be compiled to standard JavaScript. Then, navigate to the SRC folder and then into the app folder. Here we will generate our next component. And just like with the last component, our files will be generated for us. This component will also be added as a declaration of the app module. First let's go over to my-hero.component.ts. This time, we will keep on in it, since we're gonna use it. Then we need to add a method for our UI embed. Now if you are not familiar with it, this is definitely jQuery syntax. The UI embed is the Semantic module that allows you to embed web content, like YouTube or Google Maps. This embed needs to be initialized when the component is created. We do this with the embed method which is why we added the definition files. After that let's go back over to my hero.component.HTML. Remove anything in this file and then add a grid. Now first is a class that will push our content down the page a bit. This is because of the behavior of the fixed menu bar has it overlapping our content. This is typical behaviour in frameworks like these and we will address it in CSS. We add the container of course so the grid is not full width. Then we add a four wide column, inside we have a small circular image. Here we will just copy the image to the assets folder in our app folder. Then we add a label that will appear under the image. Then we add a 12 wide column that holds the header and the subheader. Since we set it into 12 wide, this will take up the rest of the row. Then we add a 12 wide column to start the next row. This will contain our embed that holds a YouTube video. By setting the data source to YouTube and providing the ID, we can embed a video. Now without initializing the embed like we did in our component, this will not work properly. Then we add a center line four wide column. My border's a class that we're going to add to style this column a little bit. This column will be a side bar to the video that will display information about the funding status of the project. Inside, we are going to add rows. The first row we add will hold a statistic. A statistic is great for this since we can use it to display how much has been funded so far. The information beneath it can give an idea of how far the project is from its funding goal. The statistic gives us a size and class to make it tiny, and a color class to make it green. The space class will be used to add some space between the rows in this column. Then we add another role that tracks the number of backers. We don't apply the color class to this one though. Then we add a row to track the days remaining for the campaign. After that we add a button that visitors can use to back the project. Fluid will make the button the width of the row. Then finally we add two more buttons. Notice how the syntax just changes to use the plural form of button. Setting these to fluid also makes the buttons the width of the row. After that, go over to my-hero.component.css. This is the component level style sheet that is referenced from our component. This will only affect the component that it is loaded by, in this case, the my menu component. The first class is how we will move our content down the page so the menu bar does not overlap it. My border will style the top of our column with a green border. Then the space classes will provide some spacing between the semantic opponents in the sidebar. After that, the last thing we need to do is go over to app.component.html and add the file to our project. But all we have to do is add a row with our selector. Go ahead and save the project and then navigate to it in a command line. When the project is finished compiling, go to localhost:4200 to preview your app. The hero area we set up should now be displayed. We should also see the video that we added. After that, we are done with our hero area. In the next video, we will set up the campaign info section of our project.

Back to the top