Building A Website: Part 5
Creating The First Course Page
Now that we have created five classes we can create a course page. The course page will also be a post, but instead of having content it will have the different classes listed. This is a page that I will probably change as time goes on, but when designing it is important to not always hold out for a ‘perfect product’. A finished product that can be improved upon is better than a perfect product in progress 100% of the time because it is actually live. Website are not not something that are built and never need to be touched again. You will always be making changes. That’s just how it works. So to start with, our course page is simply going to have the title of our course and then tiles for each our our classes. Let’s get started.
Go ahead and create a new post, giving it a title of “Getting Started As A Web Designer”, and create a new category of “course”.
Make it full width, publish it and let’s go to the front end editor.
From here drag a post element over into the row.
Select to only show the “Getting Started As A Web Developer” category, make the layout a list, delete the limit, and change the content layout to boxed.
Then scrolling down down only show the post tile and change the display excerpt to ‘none’.
Next let’s style it. Go the the container section in the styling tab and give the container a padding of 5% all around, a border of #f0f0f0 2px, and corners of 5px. it doesn’t look good as boxed and with the border, so change it back from boxed to default for the layout.
The rest of the styling we are going to do with some CSS. I want to have the boxes lift off the page when a user hovers over them. This is a neat CSS trick that I like to use a lot, and you don’t really need to know CSS to do it. Once you copy the code you can re-use it anywhere.
Let’s save our changes and go to the customize page. Once there inspect a class post.
It looks like it has a class of ‘post’, which makes sense. So in our CSS section we are going to add the code:
.MWDclass .post{
border-radius: 6px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.MWDclass .post:hover{
-webkit-box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.75);
box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.75);
}
What this will do is any post under a class of ‘MWDclass’ will pop out of the page on hover at a speed of .5s. We are using a custom class because we don’t want every post we create to pop out of the page, only the ones that we give the specific class to. So publish the changes and let’s go back to the the course page. Once on the page open up the post element and give it an id of ‘MWDclass’. Switch the courses to be in ascending order instead of descending while you are at it so they are in the right order.
Save the changes and test it out. If everything is working and it looks good, then we are all set. If we ever add more content to this page we can restrict access to it the same way we did with our classes, but right now i see no need to restrict it. The last thing we need to do is copy our page url and add it to our course button on our homepage.
Now you should officially be able navigate through the entire course.