Introduction
Course 1 - Blog Front End
This great course from Kingsley Ijomah on YouTube is for complete beginners and it's completely FREE! It takes you step-by-step through building a complete Bootstrap blog from scratch! With a little bit of html and css, and a lot of Bootstrap, you will have a great-looking project to add to your portfolio!
Course 2 - Blog Back End
The follow-on course will teach you how to build an admin (back-end) system, and then you can start using the blog to publish your own articles.
About this page
I actually wrote the material for this section of my blog whilst I was doing Kingsley's Bootstrap Blog course back in June 2015, but I'm publishing it for the first time now. It's part of a learning / revision exercise for me also. I will go through each lesson again and read through my notes as I go along. I'll be updating this page with any additional information that I think might be useful for beginners / revision as well. Enjoy! :)
Lesson #1/14
When building an interface for a blog, website or web application of any kind, infrastructure is everything! However, that is usually also the least fun part of the project… Bootstrap, however, takes care of that. Rather than hand-coding everything from scratch, it allows the code to be downloaded in blocks - templates - that can be tweaked and fitted together like the pieces of a jigsaw.
Bootstrap is very easy to download, and best of all, it is free! For all aspiring programmers out there, it is a great way to get started. The tutorial demonstrates how to download / access the various elements, and how to structure them in folders in a way that is logical and easy to navigate.
Starting with the login page is a really great idea because it has the simplest design layout. It can be daunting to start with a page that has too many elements, because it could feel quite overwhelming.
When I downloaded Bootstrap, I couldn’t quite figure out how to get it to save directly into the ‘vendor’ folder, so I had to manually drag it in there.
On a side note, the ‘Basic Template’ on Bootstrap seems to be slightly different now. On the tutorial, the <title> was on line 7, but in the code that I copied from the template, the <title> is on line 8, but it made no practical difference.
When the login.html page was opened in the browser, I right-clicked and selected ‘Inspect Element’, followed by ‘Console’. The two error messages that were displayed were of the same nature, i.e. ‘Failed to load resource: net ::ERR_FILE_NOT_FOUND’, and the names of the files were displayed next to them, on the right hand side. I then went to the corresponding line of the code, line 11 <link>, and completed the pathway for the browser to follow. At this point, I got ahead of myself, and refreshed the browser, which still threw up two error messages. That was because I had not added the ‘vendor/’ file to the pathway yet. When I corrected my mistake and refreshed the screen again, I was left with only one error message. I then followed a similar process in order to get rid of the next error message, by copying the pathway, stopping short of the ‘css’, and pasting it into the <script> section on line 26.
We then got rid of everyone’s favourite line, namely “Hello World!” #Tragic...
In summary, this lesson gives a brief introduction to Bootstrap and how to utilise the resources that it offers. The lesson also teaches how to prepare the login page using html from Bootstrap. It also demonstrates how to ensure that the pathways to the associated files and folders are clear, and how to deal with the error messages when that is not the case.
Lesson #2/14
In this lesson, a considerable amount of code is written and a great deal is achieved. I watched the video through once before writing any code, and then I watched it again, pausing the video as I completed each step and making notes. The lines of code written in this lesson are written completely from scratch, however, they call on pre-existing resources within the Bootstrap template css files, which is touched upon briefly at the end of the lesson. We are still working on the login page, but we have moved on from the infrastructure to actually styling the page.
First we created a ‘container’ class, and then created a <form> within the container. The main heading of the login page, i.e. ‘sign in’, is within the <h1> parameters.
The two form fields that are needed for the login page are ‘Email address’ and ‘Password’. Each one is created within a <p> parameters. The ‘Email address’ label is initially both inside and outside of the box (or ‘placeholder’, as it is called), which is not really necessary, so we use “sr-only” to remove the external label. The tutor helpfully notes that the label can still be displayed for people who are visually impaired. The last step at this stage is to add class="form-control", which makes the form field stretch to the right hand side of the screen. At this point, I am not entirely sure what the purpose of doing that is, but hopefully all will be revealed.
<div class="container">
<form>
<h1>sign in</h1>
<p>
<label class="sr-only">Email address</label>
<input type="email" placeholder="Email address" class="form-control" required autofocus>
</p>
</form>
</div>
We repeat the process, still within the <form> parameters, for the ‘Password’ field. We change the labels from ‘Email address’ to ‘Password’ in order to indicate the purpose of the field. See the code below:
<p>
<label class="sr-only">Password</label>
<input type="password" placeholder="Password" class="form-control" required>
</p>
It may also be helpful to note at this point that it has not been mentioned so far that one must save the code as one goes along, otherwise nothing will happen in the browser.
Each new element is created within <p> (paragraph) parameters. The ‘Remember me’ checkbox is created next.
<p>
<label><input type="checkbox">Remember me</label>
</p>
At this point, when we refresh the browser, there is no gap between the actual checkbox and the label ‘Remember me’. We introduce a gap by expanding the opening <p> tag, and inserting a “checkbox” class:
<p class="checkbox">
<label><input type="checkbox">Remember me</label>
</p>
I am unsure why that works, but again, I await the explanation.
The ‘sign in’ button is created within a <button> tag, which is then styled by creating some ‘btn’ classes within the opening <button> tag.
The html that we have written utilises a number of css elements from the Bootstrap template that we downloaded in Lesson #1. By referencing the css in the bootstrap.css file, we can see the features of the various classes that we have used throughout the lesson, which answers the questions that popped up at various points during implementation.
In summary, we have created form fields, a checkbox and a button, which have each been styled by using pre-existing css resources; and we have learnt that labels can be hidden or displayed as desired / appropriate. Although Bootstrap already cuts out a great deal of the hand-coding required, we can still save more time by copying and pasting similar lines of code and changing the labels as appropriate. It is also important to read and understand the resources provided within the Bootstrap template in order to make the best use of it.
Lesson #3/14
Following on from lesson #2, I have had a chance to look through the css file, and I have located the "form-control" class (starting on line 2545 of the code) in the bootstrap.css file. I can now see why the form fields stretch from one side of the screen to the other, because the width is set at 100% of the width of the ‘container’, which is also predetermined in the css file (starting on line 1579). It is also apparent that some styling took place upon implementation of “form-control”, which similarly occurred upon implementation of the “checkbox” class.
In lesson #3 we learnt about ‘vertical-align’, and how to check our work using a box class, which in this case put a red dotted line around the perimeter of the class in question in order to aid our visualisation of the task at hand.
In order to style the login page further, we created our own css file. The form that we have created is already centred horizontally, but the aim of this lesson is for us to centre the form vertically.
This was achieved by adding certain properties to the body, container and form using css. ‘Vertical-align’ only works on tables, so we had to convert our container into a table in order for it to work. We also had to change the heights of the various elements mentioned to 100%.
On a side note we also learnt that setting the maximum and minimum height of container combats compatibility issues across browsers.
In summary, by changing some simple properties, i.e. dimensions and format, we were able to achieve the aim of the class, which was to vertical-align the elements of the login page that we had previously created.
Lesson #4/14 - Coding the Navigation Bar
Fun outcome of the day: Toggling is awesome! :D
In this lesson, we moved away from the login page, to the home page.
We created tabs in the navigation bar across the top of the home page using the following code:
<li class="active"><a href="#">Posts <span class="sr-only">(current)</span></a></li>
The code was recycled for each tab, i.e. Posts, About, Archive, Contact; and the only thing that needed to change was the name of each tab.
In the tutorial, when it was mentioned that the background was “active”, I wasn’t quite sure at first what that meant. I could see the word, but I didn’t know what function it was performing. It became clear, however, when we removed “active” class from the code for each of the tabs (other than the Posts tab) and refreshed the browser.
<li><a href="#">About <span class="sr-only">(current)</span></a></li>
All of the tabs had been previously been a darker shade of grey than the rest of the navigation bar. When we then made our changes, the shading was gone from all but the Posts tab. It was common sense.
A nice feature we were able to keep is toggling. It is very neat, and handy for viewing our blog on a tablet / mobile phone.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Toggling essentially adapts how the tabs are viewed according to whichever device is viewing our blog, i.e. smartphone, tablet, laptop or desktop. In this case, the navigation would be displayed as small tabs across the top of the page when viewed on a laptop or desktop. If the blog were to be viewed on a smartphone, however, the navigation bar would be displayed as a list. We were able to simulate that by reducing the width of our browser screen.
I don’t know many shortcuts within Sublime, so that is something for me to work on outside of these tutorials. At one point during the lesson, a whole line of code was selected, copied and pasted a few times. I had to manually select the line of code with the cursor, which was not as fast. Also, multiple words were selected and edited simultaneously when the “active” class was removed from the links. It would be very useful for me to know how to do that.
A good habit that these tutorials have helped me develop is to refresh my browser as I go along in order to check my progress and to make sure that everything works.
In this tutorial we recycled some of the code from the login page, editing it as required, whilst also copying some more code from Bootstrap. The ‘Navbar’ code was copied from the ‘Components’ section of Bootstrap, which also displayed what the navbar would look like. We adapted the code to achieve our desired outcome by deleting the features that we didn’t want / need, and either editing or keeping the rest as required. I also learnt the importance of ensuring that my blog can be viewed on different devices through the use of nifty features such as toggling.
Lesson #5/14 - Intro to the Grid System
Helloooo!
In this lesson we played around a bit with the Grid System. What we created is very simple and the code is minimal, however, it is extremely useful.
We essentially created a table with three columns. The outcome was mainly achieved using divs. First of all we created a container within which our grid would be contained. A new css file was created in order to set out how the grid is displayed. Two types of container were briefly explained / demonstrated in this tutorial: “container” and “container-fluid”. The latter makes the container the full width of the browser, which we did not want, so we used the former. The maximum allowable width of our “container” was set to 1000px within the new css file, namely default.css.
Next we created the first row of the table, and within that, we created three columns using the code below:
<div class="col-md-4 col-sm-2 col-xs-12 box">col 4</div>
There are a few interesting things to note about the code above, which are similar to the toggling principle we learnt about in the last lesson:
- The maximum width of the Bootstrap Grid System is 12.
- Each Column within our grid is set at default width of 4, so each column is the same width, and the width adds up to a total of 12.
- col-md-4 Controls the maximum width of the column when displayed on a laptop / desktop;
- col-sm-2 Controls the maximum width of the column when displayed on a tablet;
- col-xs-12 Controls the maximum width of the column when displayed on a smartphone.
Armed with that information about the Grid System, I look forward to the next, more in-depth, tutorial.
Lesson #6/14 - Coding Profile html
This tutorial is mainly concerned with adding the various elements needed for the left column of the blog. There is very little styling at this point. We did style the profile picture using a neat little class called “img-circle”, but that was all.
Building on what we learnt in the previous lesson, we created two columns, left and right, and we set the width of each column. We added a profile picture, a header, a paragraph, a twitter button and the social media buttons to the left column.
The profile picture and social media buttons were saved within a new folder, ‘img’, which was accessed via the html code.
We did very little coding in this lesson. The lines of code that we did write were copied and pasted, and all that was needed at that point was to amend / change the name of the file or the link.
I am looking forward to the next lesson so I can get styling! Yeah baby! Oh yeah, oh yeah!
Question:
<hr> Horizontal Rule? Why no closing tag?
Note:
The dev.twitter.com/web/follow-button page is slightly different now. The code for the button is neater and no longer has the line data-show-count=”false”. It now seems to default to “true”, so it shows the number of followers automatically. data-lang=”en” is no longer part of the code either.
The javascript code is now on a different page. You have to click on a link, which takes you to this page: dev.twitter.com/web/javascript/loading and the code can be copied from there.
Lesson #7/14 - Add css styling to Profile html
Whooaa there! Slow down dude! :D
We covered a lot in this lesson! At lightning speed! Once I caught my breath, I was able to review everything and allow it to sink in.
In order to style the left column with css, we need to be able to target it. We did that by adding the name, profile, to the column class in the html. That is more or less the only change that we make to the html file at this point. We then go to the css file and style the hell out of the left column!
I need to read up a bit more about margin-left and margin-right. I’m not sure which one does what! I believe that margin-right pushes things to the right by the specified margin width, and that margin-left pushes things to the left by the margin width specified.
Float and padding are others that I don’t remember / understand fully. I’m not quite sure what they do.
I had to revisit this lesson (again) because I couldn’t tell exactly what was achieved by some of the things that we did. I had to break it down into smaller steps and refresh the browser after each line in order to gain a better understanding of what the various commands actually do.
It is obvious enough what is happens when you change a font size. I do that in Microsoft Word every day.
At the beginning of this lesson, the social media icons were displayed as a bullet point list.
.profile ul li {
float: left;
}
That lined up all the social media icons horizontally, when they had previously been lined up vertically. The bullet points now overlap preceding icon.
.profile ul li {
float: left;
margin-right: 8px;
}
Adding margin-right: 8px has the effect of putting a gap in between the social media icons, to the right of each icon. The bullet points still overlap the preceding icon, but now only slightly.
.profile aside ul {
list-style: none;
}
The css above had the effect of removing the bullet points altogether.
.profile aside ul {
list-style: none;
padding: 0px;
}
By setting the padding to 0px, that removed the padding to the left of the first icon that must have been present somehow. It would be interesting to know where that padding initially came from?
.profile aside ul:after {
content: "";
}
This does not seem to have made any changes to the appearance of the page.
.profile aside ul:after {
content: "";
display: block;
}
Neither does that...
.profile aside ul:after {
content: "";
display: block;
clear: both;
}
That last line seems to have put a bit of space underneath the social media icons - between them and the dotted red line.
It would be interesting to see what happens if I remove the two lines of code that did not appear to do anything? See below:
.profile aside ul:after {
clear: both;
}
The space disappears. So, in its entirety, that chunk of code above had the cumulative effect of increasing that space.
We say a very brief hello to the html code again when creating a gap between the left and right columns. The width of the right column is reduced in the html code, and then we return to the css for some more jiggery pokery!
.profile {
margin-right: 40px;
}
This adds a nice gap to the right of the profile column (the left column), pushing the right column to the right.
And that is where it ends for now! Phew! :D
Lesson #8/14 - Coding Posts html
There’s more than one way to skin a cat; and in programming, there are also multiple ways to achieve the desired result.
I had some questions when I was doing lesson 7, most of which I was able to answer myself by breaking the code down and testing it line by line.
The last bit of css that we did in lesson #7 was regarding padding. We created a gap underneath the social media icons, separating them and the border that goes around the profile column.
At the beginning of this lesson (lesson #8), we were shown another way to create padding, using Bootstrap. This time we removed the css code, and achieved the same effect by using one line of html code.
Here’s a reminder of what we deleted from the css:
.profile aside ul:after {
content: "";
display: block;
clear: both;
}
This is the existing html for our social media icons:
<ul>
<li><img src="img/social_icons/twitter.png"></li>
<li><img src="img/social_icons/facebook.png"></li>
<li><img src="img/social_icons/linkedin.png"></li>
<li><img src="img/social_icons/googleplus.png"></li>
<li><img src="img/social_icons/pinterest.png"></li>
<li><img src="img/social_icons/email.png"></li>
</ul>
All we do now is add a class to the <ul> as follows:
<ul class="clearfix">
Et voila! That has the same effect as the four lines of css we used before. It is a lean programming solution!
In lesson #8 we added all the elements needed for the right column within the html code. We did no css at all.
We copied three things from Bootstrap, which were: labels, class="lead" and pagination. We did not reinvent the wheel at all.
The right hand column displays a list of blog articles. Each has a title, date, the first couple of lines of text from the article itself, a ‘Read More’ link, and some labels underneath that indicate the subject matter of the article.
A note regarding the ‘Read More’ link is that we don’t actually have a hyperlink to take you to the full article at this stage because the other pages of the blog haven’t been created yet. So, we use a # in place of the hyperlink for the time being.
In order to make the first couple of lines from the article stand out, we used class=”lead”.
We copied and pasted the following line of code into the html in order to create the labels, and simply changed the name of label from ‘Default’ to the desired word.
<span class="label label-default">Default</span>
For the pagination, we again simply copied the block of code required from Bootstrap and pasted it into our html. The question of making something active popped up again. We added class=”active” to the desired <li> in the pagination code in order to make it clear which page we were currently on. In this case, the button for the current page is shaded blue, whilst the others remain unshaded.
And that is it until the next lesson... :)
Lesson #9/14 - css styling Posts html
Top tip: Explore Bootstrap!
We did some minimal styling of the posts column. Essentially margin-bottom.
We also added the hyperlinks to the tabs across the top of the page, replacing the #’s that were in the html, with the relevant .html file name. Apart from the ‘login’ tab, none of them actually lead anywhere yet, but we have put the correct hyperlinks in place anyway.
Finito!
Lesson #10/14 - Coding Read More page 1
There was absolutely zero css in this lesson. We simply created and assembled some of the pieces needed for the first article page, and we pointed to it from the posts page.
We copied and pasted the code from the posts page; deleting what we didn’t need, and keeping the rest.
Some of the things that we learned in previous lessons were used again, such as setting column widths, creating rows, adding headings, paragraphs and other structural things. It was all pretty self-explanatory stuff. It’s actually looking pretty good already, considering we haven’t done any styling!
Onwards and upwards! :)
Lesson #11/14 - Coding Read More page 2
Creating a Form! Oh yeah!
When I create my Recruitment system, knowing how to create forms will be essential! My system is essentially going to be lots of form fields with which to capture vital information.
To begin at the beginning:
To create a form, you must start with a... <form> Ta-dah! :) No surprises there!
<form>
In order to separate out the form fields neatly, we create them with <p> tags (P-tag sounds like a gangster name haha!).
The paragraph is given a <label> so we know what’s what. We make it so that the label is not displayed, by using class=”sr-only” within the opening <label> tag.
The text area (i.e. the bit that the end user actually fills in) is created using a <textarea> Captain Obvious strikes again! There’s something so nice about simple solutions. You need a text area; I give you a <textarea>! Simples!
class=”form-control” was used within the opening <textarea> tag to make the <textarea> the width of the form, i.e. the width of the column.
Although we don’t want the paragraph <label>, e.g. ‘Message’, to be displayed outside of the <textarea>, we do want something inside the <textarea> that indicates what the end user is required to enter there. So, we use a placeholder=”Message” within the opening <textarea> tag.
A handy tool we learned about it in this lesson is required autocomplete="false" which means that when someone enters text into the message field, it will not prompt them to autocomplete with any text that they may have entered into that field in the past. That is also entered within the opening <textarea> tag of our ‘Message’ field.
Creating the two other form fields (‘Full Name’ and ‘Email Address’) is a very similar process. They each have an <input> area instead of a <textarea>, but the principle is the same. They both utilise class=”form-control” and they are both ‘required’, however, we don’t prevent ‘autocomplete’ for them, because the likelihood is that the same person will be using the same computer / device each time, so the cookies are their friends :)
The last structural thing we do within the form is create a button, which is simple enough:
<p><input type="submit" class="btn btn-primary" value="Leave Comment"></p>
</form>
We then added a styling element to the default.css, which styles all of the pages (because it is referenced within the html all of the pages):
body {
margin-bottom: 50px;
}
We also created a new css file (article.css) and referenced it within the article.html file. Most of the styling below is pretty self-explanatory:
article.css
form {
margin-top: 20px;
}
h2 {
margin-bottom: 0px;
}
.comment-num {
font-size: 16px;
color: #ccc;
}
We went back into article.html to add comment-num to the class so it could be targeted by .comment-num in the css:
<div class="col-md-1 comment-num">01</div>
#comments {
margin-top: 50px;
}
#message {
height: 100px;
}
Good lesson! Hashtag! :D x
Lesson #12/14 - Coding About and Archive pages
We recycled a great deal of the code from the article.html page for both the about and archive pages, which meant we were able to make a lot of progress very quickly. We didn’t cover any new ground as such, so I just have some general notes and observations about html.
Essentially, everything is rows and columns!
<div class=”container”>
<div class=”row”>
<div class=”col-md-9”>
</div>
<div class=”col-md-3”>
</div>
</div>
<div class=”row”>
<div class=”col-md-6”>
</div>
<div class=”col-md-6”>
</div>
</div>
</div>
Columns add up to a width of 12.
You can mix things up with <h> and <p> tags, etc.
You are always dividing things up so they can be targeted easily by your css files.
Everything is Awesome! :D
More coming soon! :)
No comments:
Post a Comment