Feb 7, 2018

My Coding Journey: What You Need to Create a jQuery Playground with Bootstrap

Copyright 2018 The Original BritishPandachick

The series wrapped up the Cat Photo App project Free Code Camp has students work with during the Bootstrap course. This post was showing the ways Bootstrap can be used to style parts of your website without writing the standard custom CSS. Just one Bootstrap class can add lots of style elements that would take lots of lines of regular CSS.

During this post, I showed you how to use Font Awesome icons on your site, what Bootstrap classes can line up elements on your page, and how to change the colors with Bootstrap. Click the link below to read my blog post or just catch up with what is currently happening in the series.

===> Click here to read the How to Style a Website with Bootstrap post.

Today’s post is building a jQuery playground.which will be used later in Free Code Camp’s jQuery course. This playground will be using lots of Bootstrap. Throughout this post, you’ll be putting the grid system to work to organize elements on the page. You’ll learn some new Bootstrap classes and see how they work in your code.

If you aren’t ready to tackle today’s lesson, make sure you revisit all the posts in the My Coding Journey series. I already covered topics on web design, HTML & CSS. I’ve even created little tutorials which walk readers through some of the Codeacademy projects.

Feel free to use any of these posts as extra practice or review. You can also use the HTML & CSS course in Free Code Camp’s Front-End Developer Certification portion of their curriculum.

===> Click here to make a Free Code Camp account.

20. Create a Bootstrap Headline.

First thing we need to do on the jQuery playground is add a headline. Free Code Camp wants an h3 element so add an <h3> tags to your site. Inside your opening and closing tags, add the text jQuery Playground.

Now let’s turn to the Bootstrap. We are adding two classes to the site. Inside the opening tag, add text-primary and text-center as a class. Remember we can have multiple classes for any element as long as is there a space between each class.

21. House our page within a Bootstrap Container Fluid Div.

This site needs to work on all screen sizes so let’s add the container-fluid. Nest your new <h3> tag inside a div tag. Give the div tag a class container-fluid.

22. Create a Bootstrap Row.

This site will have lots of inline elements, meaning we’ll need some rows. Underneath the <h3> tag, add another div tag. We won’t be adding anything inside the div tag in this step, but you do need to give it a class so all the elements will line up in a row. Therefore add a class row to your div tag.

24. Split your Bootstrap row.

Free Code Camp wants students to have two columns inside the row div tag we just made. This is where you’ll be using the grid system mentioned in the last two Bootstrap posts. Put two div tags inside the row div tag. These div tags will be for each column.

Inside each of the new div tags, add the class col-xs-6. This will tell the computer the columns will be six columns wide each. We won’t be adding any elements inside these columns right now so you won’t see any changes right now.

25. Create Bootstrap Wells.

It is time for a brand new class! One of the newer Bootstrap classes in today’s post is the well class. This class creates a sense of depth in your columns.

In order to do this, you’ll be adding the well class to another div tag in each of the col-xs-6 div tags you made. Make a brand new div tag inside each col-xs-6 class. Give each of these new div tags a class well. Don’t worry. This is the last div tag you’ll be adding.

Copyright 2018 The Original BritishPandaChick

26. Add Elements within your Bootstrap Wells.

Time to add the rest of the elements. This time, you’ll be nesting buttons within the well div tags you just made. Add 3 button tags inside each well.

Now inside the sample project on Free Code Camp’s site, you’ll see some of the items starting to take shape. You should have six button tags total on the site when you are finished.

27. Apply the Default Bootstrap Button Style.

Let’s add some more classes to customize the buttons a bit. We are going to use the Bootstrap class btn-default. For each button, add “btn btn-default” to the opening button tag. You’ll automatically see the buttons on the Free Code Camp site get a little bit bigger to look like actual buttons.

28. Create a Class to Target with jQuery Selectors.

Free Code Camp begins this lesson with an important reminder about classes. There won’t be corresponding CSS for every class. Developers use classes just to help them when they use jQuery.

Selecting elements needs to be easy especially in jQuery with developers often referring to classes to help them add functionality to different elements. In this lesson, we are going to add the class attribute target to the button. In each button tag, add the class target after btn-default in the opening tag.

29. Add ID Attributes to Bootstrap Elements.

Bootstrap isn’t all about using as many classes as possible. Developers can also use ID attribute. IDs are great for making unique changes to a specific element. The only downside about ID attributes is that they can only be used once per page.

Let’s start this lesson by adding an ID to each well div tag. On the left well div tag, add an ID tag name left-well. Add the ID right-well to the right well div tag.

Copyright 2018 The Original BritishPandaChick

30. Label Bootstrap Wells

The final Bootstrap lesson for today is labeling the Bootstrap wells. This means adding some text tags. Inside the left well, add an <h4> tag inside the div tag with the col-xs-6 class. This should be above the well div tag.

Put #left-well as your headline’s text. On the right well, add another <h4> tag above this well div tag only using the text #right-well instead.


That’s a wrap today! We made a lot of progress on the jQuery playground project today. A large amount of this post was just organizing our page by setting up rows and wells using Bootstrap classes.

You started adding the buttons inside the wells and gave a little bit of style thanks to some of the Bootstrap classes discussed in other posts. Finally, we started adding IDs and we began labelling some of our elements.

The jQuery is almost done and the next post will be putting the final touches on this project. In a couple of weeks, I review the last three lessons in Free Code Camp's Bootstrap course. This post will be a quick review on commenting code as well as labeling the buttons.


All images belong to The Original BritishPandaChick.

No comments:

Post a Comment

Important Announcement: Future of The Original BritishPandaChick

This week's topic for the Ambitionista Twitter chat was all about reinventing yourself. During the chat, we discussed what this means an...