Jan 24, 2018

My Coding Journey: How to Style Your Website with Bootstrap

Copyright 2018 The Original BritishPandaChick

Last time on the My Coding Journey . . .

The series made its return by covering the first 10 lessons of Bootstrap, a CSS framework developers can use to make mobile responsive sites and apps. This crash course to Bootstrap is a review of the lessons in the Responsive Design with Bootstrap section in the front end developer certification at Free Code Camp. During the last post, I showed you how to create buttons with Bootstrap classes and make mobile responsive images. Most importantly I showed you how to add Bootstrap to your HTML file so you can begin adding Bootstrap classes to your own code.

If you need a quick review on any of today's Bootstrap topics, click the link below or revisit these lessons on Free Code Camp's site. Free Code Camp is a open source community committed to helping developers learn how to code and contribute to open source projects. Just sign up for a free account on the Free Code Camp website then start coding!

===> Click here to review the latest post of the My Coding Journey series!
===> Click here to make a Free Code Camp account!

This week the series is continuing on with Bootstrap in the Free Code Camp Bootstrap course. During this post, I'll cover the next nine lessons of the course. These lesson will wrap up the Cat Photo App project students build during the HTML & CSS course. During today's lessons, I will be showing you how to use Bootstrap to style elements on your site. You will be learning how to add icons to your site with Font Awesome, lining up elements, and how Bootstrap can transform a site's form.

If you aren't ready to tackle today's concepts or are still trying to catch up in this series, feel free to use any of the blog posts in this series to review any of the concepts in today's post. So far this series has covered the fundamentals for web design, HTML, and CSS. I've even shown You can also review HTML & CSS with Free Code Camp's HTML & CSS course.

11. Ditch custom CSS for Bootstrap.

Developers love using Bootstrap for customizing website since these styles are often built into the framework, doing all the work for you and giving you less code to write. On the cat photo app, you can delete some of the custom CSS styles already added in the style tag. If I added Bootstrap classes to any tags with custom styles, only the Bootstrap styles will show. Therefore, if I wanted to change the <h2> headline from blue to red, I'd need to change the class to text-danger or use CSS to customize the color.

The first item Free Code Camp wants students to do is style the <h2> headline and make the orange cat photo image responsive. You can do this with Bootstrap classes like text-primary and img-responsive. I already showed you how to use the img-responsive class to make images fit the size of any screen. The text-primary tag is one of the tags that lets Bootstrap change the color of text. When the class is added to specific HTML tags, the font color will change. The text-primary class will change the font color to blue.

12. Use spans for inline elements.

Free Code Camp wants to add some style to inline elements like the specific words or buttons on the Cat Photo App. These cases are examples of inline elements. You might remember seeing some span tags in previous projects featured on these blogs. Span tags make it possible for developers to style small parts of the text inside another HTML element. You can review span tags with my previous post The Ultimate HTML & CSS Cheatsheet.

===> Click here to review span tags in The Ultimate HTML & CSS Cheatsheet

In order to complete this lesson, students need to style the word love using span tags. First, add your span tags in your code around the words you want to style. Make sure you use opening and closing tags. Next, you add the Bootstrap class you want to use to change the color of the text. Free Code Camp wants the word love in red so I'll use the text-danger class. Text-danger tells the computer to change the color to red.

13. Create custom heading.

Let's start adding some style to the Cat Photo App's heading. Free Code Camp wants the <h2> headline on the same line as the orange cat photo. In order to get everything on the same line, developers put the elements they want together inside div tags. I'm going to put two div tags around my <h2> headline and image. Inside the opening div tag, I will give the tag a class name "row". Row tells the computer these elements will be lined up in a row side by side. Once this class is added, you will see your elements automatically line up next to each other in the sample project.

Once your elements are in a row, it is time to give some spacing between the two elements. I can do this using the Bootstrap grid system. First, I'm going to give each element its own separate set of div tags. Then I will add the Bootstrap classes. When using the grid system, developers need to use the format "col-xs-*" as the class name. This will tell the computer how many columns wide the element is for what type of screen. I will use "col-xs-8" for the <h2> headline and "col-xs-4" for the orange cat image. This will automatically adjust these elements on the Free Code Camp project with just the right amount of space between the elements so it doesn't look cramped.

14. Add font awesome icons to buttons.

Now that the heading is looking better, it is time to give some attention to the buttons. Free Code Camp uses this lesson to introduce Font Awesome, a library of icons developers can use for their projects. These icons are vector graphics stored as an .svg file. During this course, Free Code Camp tells students to add Font Awesome to their sites using the following link in the head tag:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

This link will connect your project to the Font Awesome library, making you ready to use any of the icons for your project. Free Code Camp already does this for you, but you can practice this in CodePen or in your own text editor if you are planning to add any icons to your site.

Copyright 2018 The Original BritishPandaChick
In order to add one of these icons to your site, you need to use the <i> tag. The <i> tag lets the computer know this element is an icon. Developers often used the <i> tag in the past to make text italics, but now it is mostly associated with creating icons. During this lesson, you will use the <i> tag to create an thumbs up icon on the Like button.

First, wrap the word Like inside an opening and closing <i> tag. In the opening <i> tag, create a class named "fa fa-thumbs-up". The fa is the Font Awesome prefix while the fa-thumbs-up is the name of the icon being used. Now check your button on your site. Now a small thumbs up icon will appear inside your Like button.

15. Add Font Awesome Icons to all of our Buttons.

Now that you know how to add Font Awesome icons to your site, this lesson is having you repeat the same steps with the other two buttons. This time you are adding the classes fa fa-info-circle and fa fa-trash. The fa-info-circle will create an small circular info icon next to the Info button. The trash button will have a small trash can icon next to Delete.

16. Responsive style radio buttons.

Now that the Cat Photo buttons have a little style, we are going to add some Bootstrap classes to the form. We can use the col-xs-* format to determine how far apart the radio buttons can be spread out on the page. The class we set keep this width no matter what screen resolution we have.

First, the radio buttons need to be in a row. Nest the radio button tags in between div tags with the class "row". Now give each radio button a div class named "col-xs-6". This will tell the computer each radio button will be six columns wide. Your code should look like this when it is done:

<div class="row">
   <div class="col-xs-6">
       <label><input type="radio" name="indoor-outdoor">Indoor</label>
   </div>
   <div class="col-x-6">
       <label><input type="radio" name="indoor-outdoor">Outdoor</label>
   </div>
</div>

Once you add the code, a space will appear between the two radio buttons on the app.

17. Responsively Style Checkboxes.

Now that you know how to spread form elements on the page with the grid system, you will do the same thing with the other elements on the page. Free Code Camp wants each check box to be only four columns wide. This time, wrap each check box inside a div tag with the class "col-xs-4". Each div tag will evenly space out the checkboxes. Don't forget to put all the check boxes in a div class named "row". This will keep all the checkboxes together instead of stacked upon on each other.

18. Style Text Inputs as Form Controls.

The next item Free Code Camp wants to style is the input text field and the button. This lesson wants students to add a paper air plane to the submit button and extend the field bar across the screen. First, let's adjust the input field. Inside the input tag above the submit button tag, add the class "form-control". Form-control will increase the length of the input field so it extends across the screen, making it easier to read the cat photo place holder inside.
Copyright 2018 The Original BritishPandaChick

The last thing we need to do in this lesson is add the paper airplane to the submit button. Luckily there is an icon in the Font Awesome library you can use. Inside the submit button tag, wrap the word Submit in between two <i> tags. In the opening tag, add the class "fa fa-paper-plane". This will create the airplane icon right next to Submit in the button.

The last thing we need to style is the input field at the bottom of the form. In order to the style the form, you need to use the class form-control. Add the class form-control to your input tag and look at the input bar. Originally the bar was smaller, but the form-control class made the input bar fit the size of the screen. Now you just need to change the submit button's color. Inside the submit button's button tag, add the class "btn btn-primary" and the button will change to blue.

19. Line up Form Elements Responsively with Bootstrap.

The last thing you need to do for the Cat Photo App right now is line up the input bar and submit button with the rest of the form. We are going use the grid system to do this. First, put the input tag for the cat photo URL and the submit button's button tag inside a div tag with the class name row. You'll automatically see the elements move side by side each other on the app. Now wrap each element inside a pair of div tags. Give the div tag for the cat photo URL input a class of col-xs-7. The submit button's div tag will have a class col-xs-5 so there's just enough space between the input bar and the button.

Conclusion

That's a wrap for today's lessons! During this post you learned how to use Bootstrap to add more style to your website instead of creating custom styles for elements. Today's post also wraps up the Cat Photo App sample project in Free Code Camp. Make sure you check out the pen link below to play around with the pen's size to see how it would look like in different browsers.

===> Click here to see the Cat Photo App Pen!

It is time for another break from Bootstrap. When the series returns, I'll be continuing to review Bootstrap with the next 10 lessons in Free Code Camp's course. The next Bootstrap project is a jQuery playground which will give you an opportunity to play around with new concepts as well as concepts already featured in this series.

Notes

Images belongs to The Original BritishPandaChick.

No comments:

Post a Comment

My Coding Journey: How to Maintain Your Online Presence with Social Media

Copyright 2018 The Original BritishPandaChick It is time for part two of the online presence and personal branding guide in the My Cod...