create account

Beginner Video Tutorial #1 for the Bootstrap framework by magicmonk

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @magicmonk · (edited)
$172.62
Beginner Video Tutorial #1 for the Bootstrap framework
https://www.youtube.com/watch?v=h_iiv3AUcKQ

Bootstrap is a very popular HTML, CSS and Javascript framework for building responsive websites that can be viewed on different devices. For the complete beginner to web design, learning Boostrap to start with can be easier than understanding a lot of advanced CSS code. 

In this tutorial I will go through some basic structural HTML tags that set up a Boostrap web page, such as the meta tags that set up the viewport, importing the boostrap library and wrapping HTML content inside the container-fluid class.

Even though Adobe Dreamweaver is used as the development environment in this video, you can use any text editor to follow along to this tutorial.

Link to tutorial #2: https://utopian.io/utopian-io/@magicmonk/beginner-video-tutorial-2-for-the-bootstrap-framework
<center>
<hr />

For more tutorials by the Magic Monk, visit http://magicmonk.org<br>

<a href="http://magicmonk.org"><img src="http://magicmonktutorials.com/images/logo_medium.jpg"></a>

Over <b>1000</b> tutorial Videos
<b>8 million</b> Views
<b>20,000</b> Subscribers
</center>

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@magicmonk/beginner-video-tutorial-1-for-the-bootstrap-framework">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 3 others
properties (23)
authormagicmonk
permlinkbeginner-video-tutorial-1-for-the-bootstrap-framework
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"score":135.40752,"default_branch":"v4-dev","watchers":119254,"open_issues":368,"forks":56379,"license":{"url":"https://api.github.com/licenses/mit","spdx_id":"MIT","name":"MIT License","key":"mit"},"open_issues_count":368,"archived":false,"mirror_url":null,"forks_count":56379,"has_pages":true,"has_wiki":false,"has_downloads":true,"has_projects":true,"has_issues":true,"language":"CSS","watchers_count":119254,"stargazers_count":119254,"size":111851,"homepage":"http://getbootstrap.com","svn_url":"https://github.com/twbs/bootstrap","clone_url":"https://github.com/twbs/bootstrap.git","ssh_url":"git@github.com:twbs/bootstrap.git","git_url":"git://github.com/twbs/bootstrap.git","pushed_at":"2017-12-17T01:40:31Z","updated_at":"2017-12-17T04:44:28Z","created_at":"2011-07-29T21:19:00Z","deployments_url":"https://api.github.com/repos/twbs/bootstrap/deployments","releases_url":"https://api.github.com/repos/twbs/bootstrap/releases{/id}","labels_url":"https://api.github.com/repos/twbs/bootstrap/labels{/name}","notifications_url":"https://api.github.com/repos/twbs/bootstrap/notifications{?since,all,participating}","milestones_url":"https://api.github.com/repos/twbs/bootstrap/milestones{/number}","pulls_url":"https://api.github.com/repos/twbs/bootstrap/pulls{/number}","issues_url":"https://api.github.com/repos/twbs/bootstrap/issues{/number}","downloads_url":"https://api.github.com/repos/twbs/bootstrap/downloads","archive_url":"https://api.github.com/repos/twbs/bootstrap/{archive_format}{/ref}","merges_url":"https://api.github.com/repos/twbs/bootstrap/merges","compare_url":"https://api.github.com/repos/twbs/bootstrap/compare/{base}...{head}","contents_url":"https://api.github.com/repos/twbs/bootstrap/contents/{+path}","issue_comment_url":"https://api.github.com/repos/twbs/bootstrap/issues/comments{/number}","comments_url":"https://api.github.com/repos/twbs/bootstrap/comments{/number}","git_commits_url":"https://api.github.com/repos/twbs/bootstrap/git/commits{/sha}","commits_url":"https://api.github.com/repos/twbs/bootstrap/commits{/sha}","subscription_url":"https://api.github.com/repos/twbs/bootstrap/subscription","subscribers_url":"https://api.github.com/repos/twbs/bootstrap/subscribers","contributors_url":"https://api.github.com/repos/twbs/bootstrap/contributors","stargazers_url":"https://api.github.com/repos/twbs/bootstrap/stargazers","languages_url":"https://api.github.com/repos/twbs/bootstrap/languages","statuses_url":"https://api.github.com/repos/twbs/bootstrap/statuses/{sha}","trees_url":"https://api.github.com/repos/twbs/bootstrap/git/trees{/sha}","git_refs_url":"https://api.github.com/repos/twbs/bootstrap/git/refs{/sha}","git_tags_url":"https://api.github.com/repos/twbs/bootstrap/git/tags{/sha}","blobs_url":"https://api.github.com/repos/twbs/bootstrap/git/blobs{/sha}","tags_url":"https://api.github.com/repos/twbs/bootstrap/tags","branches_url":"https://api.github.com/repos/twbs/bootstrap/branches{/branch}","assignees_url":"https://api.github.com/repos/twbs/bootstrap/assignees{/user}","events_url":"https://api.github.com/repos/twbs/bootstrap/events","issue_events_url":"https://api.github.com/repos/twbs/bootstrap/issues/events{/number}","hooks_url":"https://api.github.com/repos/twbs/bootstrap/hooks","teams_url":"https://api.github.com/repos/twbs/bootstrap/teams","collaborators_url":"https://api.github.com/repos/twbs/bootstrap/collaborators{/collaborator}","keys_url":"https://api.github.com/repos/twbs/bootstrap/keys{/key_id}","forks_url":"https://api.github.com/repos/twbs/bootstrap/forks","url":"https://api.github.com/repos/twbs/bootstrap","fork":false,"description":"The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.","html_url":"https://github.com/twbs/bootstrap","private":false,"owner":{"site_admin":false,"type":"Organization","received_events_url":"https://api.github.com/users/twbs/received_events","events_url":"https://api.github.com/users/twbs/events{/privacy}","repos_url":"https://api.github.com/users/twbs/repos","organizations_url":"https://api.github.com/users/twbs/orgs","subscriptions_url":"https://api.github.com/users/twbs/subscriptions","starred_url":"https://api.github.com/users/twbs/starred{/owner}{/repo}","gists_url":"https://api.github.com/users/twbs/gists{/gist_id}","following_url":"https://api.github.com/users/twbs/following{/other_user}","followers_url":"https://api.github.com/users/twbs/followers","html_url":"https://github.com/twbs","url":"https://api.github.com/users/twbs","gravatar_id":"","avatar_url":"https://avatars0.githubusercontent.com/u/2918581?v=4","id":2918581,"login":"twbs"},"full_name":"twbs/bootstrap","name":"bootstrap","id":2126244},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","bootstrap","tutorial","video","education"],"users":["magicmonk"]}"
created2017-12-17 05:17:54
last_update2017-12-21 10:57:39
depth0
children9
last_payout2017-12-24 05:17:54
cashout_time1969-12-31 23:59:59
total_payout_value121.049 HBD
curator_payout_value51.566 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,296
author_reputation1,097,815,503,305,534
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,835,878
net_rshares32,853,434,288,833
author_curate_reward""
vote details (67)
@buildawhale · 
<p>This post has received a 10.04 % upvote from @buildawhale thanks to: @magicmonk.
Send at least 1 SBD to @buildawhale with a post link in the memo field for a portion of the next vote.</p>

<p>To support our daily curation initiative, please vote on my owner, @themarkymark, as a <a href="https://steemit.com/witness-category/@themarkymark/witness-themarkymark">Steem Witness</a></p>
properties (22)
authorbuildawhale
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171220t222119700z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"drotto/0.0.2d"}
created2017-12-20 22:21:27
last_update2017-12-20 22:21:27
depth1
children0
last_payout2017-12-27 22:21:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length386
author_reputation25,556,307,153,773,449
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,422,277
net_rshares0
@omeratagun · 
Your contribution cannot be approved yet. See the [Utopian Rules](https://utopian.io/rules). 

* Hey @magicmonk. As you declare this is your first lesson. We would love to see how to install/put bootstrap under the folders lesson by you. Please add it into your video and reply my comment. 

Please edit your contribution to reapply for approval.

You may edit your post [here](https://utopian.io/utopian-io/@magicmonk/beginner-video-tutorial-1-for-the-bootstrap-framework), as shown below: 
![](https://res.cloudinary.com/hpiynhbhq/image/upload/v1509788371/nbgbomithszxs3nxq6gx.png)

You can contact us on [Discord](https://discord.gg/UCvqCsx).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authoromeratagun
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171219t140050864z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-19 14:00:51
last_update2017-12-19 14:00:51
depth1
children1
last_payout2017-12-26 14:00:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length702
author_reputation30,342,907,025,333
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,190,157
net_rshares0
@magicmonk · (edited)
Thank you for the suggestion @omeratagun. As my aim in this tutorial is to help newbies get started with coding in Bootstrap as easily as possible, I have shown people how to include Bootstrap using CDN, which will allow them to code in Bootstrap without downloading it. Downloading bootstrap into the local folder could be another unnecssary step that could put newbies off using it. However, as you suggest,  I will make a separate video to show people how to download bootstrap later. Thank you.
properties (22)
authormagicmonk
permlinkre-omeratagun-re-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171219t182744002z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["omeratagun"],"app":"steemit/0.1"}
created2017-12-19 18:27:45
last_update2017-12-19 18:35:42
depth2
children0
last_payout2017-12-26 18:27:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length498
author_reputation1,097,815,503,305,534
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,228,415
net_rshares0
@omeratagun ·
$0.18
Thank you for the contribution. It has been approved.

* Thanks a lot to see that you are willing to be more helpful. As you said, you are right and you gave already CDN in the video. Keep up on good work! best wishes!

You can contact us on [Discord](https://discord.gg/UCvqCsx).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authoromeratagun
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171219t184027247z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-19 18:40:30
last_update2017-12-19 18:40:30
depth1
children1
last_payout2017-12-26 18:40:30
cashout_time1969-12-31 23:59:59
total_payout_value0.134 HBD
curator_payout_value0.042 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length337
author_reputation30,342,907,025,333
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,230,097
net_rshares28,599,728,597
author_curate_reward""
vote details (1)
@magicmonk · 
thank you very much @omeratagun!!
properties (22)
authormagicmonk
permlinkre-omeratagun-re-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171219t184947153z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["omeratagun"],"app":"steemit/0.1"}
created2017-12-19 18:49:48
last_update2017-12-19 18:49:48
depth2
children0
last_payout2017-12-26 18:49:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length33
author_reputation1,097,815,503,305,534
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,231,376
net_rshares0
@upme ·
re-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171221t001757512z
You got a 8.65% upvote from @upme requested by: @magicmonk. <br> Send at least 1.5 SBD to @upme with a post link in the memo field to receive upvote next round. <br> To support our activity, please vote for my master @suggeelson, as a [STEEM Witness](https://steemit.com/~witnesses)
properties (22)
authorupme
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171221t001757512z
categoryutopian-io
json_metadata{"app":"postpromoter/1.6.0"}
created2017-12-21 00:17:57
last_update2017-12-21 00:17:57
depth1
children0
last_payout2017-12-28 00:17:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length282
author_reputation584,696,346,293
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,434,462
net_rshares0
@upmyvote · 
<p>This post has received a 10.26 % upvote from @upmyvote thanks to: @magicmonk.
Send at least 1 SBD to @upmyvote with a post link in the memo field to promote a post!
Sorry, we can't upvote comments.</p>

<center>https://i.imgur.com/dNNSypy.png</center>
properties (22)
authorupmyvote
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171222t055751456z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"drotto/0.0.2d"}
created2017-12-22 05:58:00
last_update2017-12-22 05:58:00
depth1
children0
last_payout2017-12-29 05:58:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length256
author_reputation2,697,753,443,622
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,643,430
net_rshares0
@utopian-io ·
$0.87
### Hey @magicmonk I am @utopian-io. I have just upvoted you!
#### Achievements
- This is your first accepted contribution here in Utopian. Welcome!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
👍  
properties (23)
authorutopian-io
permlinkre-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171219t233736388z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-19 23:37:36
last_update2017-12-19 23:37:36
depth1
children1
last_payout2017-12-26 23:37:36
cashout_time1969-12-31 23:59:59
total_payout_value0.690 HBD
curator_payout_value0.175 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,026
author_reputation152,955,367,999,756
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,263,936
net_rshares137,787,912,119
author_curate_reward""
vote details (1)
@magicmonk · 
Thank you so much, have voted you as witness already :)
properties (22)
authormagicmonk
permlinkre-utopian-io-re-magicmonk-beginner-video-tutorial-1-for-the-bootstrap-framework-20171220t000249661z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-20 00:02:51
last_update2017-12-20 00:02:51
depth2
children0
last_payout2017-12-27 00:02:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length55
author_reputation1,097,815,503,305,534
root_title"Beginner Video Tutorial #1 for the Bootstrap framework"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id24,266,332
net_rshares0
Help/Feedback