How to Create a Website Using HTML/CSS Code Editor
Expanding Mobirise HTML Website Builder’s capabilities to the next level with Code Editor Recently I did a simple HTML mobile friendly website for a friend of mine running a construction business. On his site and branding materials he asked to list all the services his company provide. So we started with small and cosmetic repairs, went through family houses and finished the list with residential and industrial complexes. I thought if this starting this article after spending two days playing around with the Mobirise HTML5 Website Builder’s most powerful tool – the HTML/CSS Code Editor.
As you may recall from my previous articles I’m more of an Illustrator and Photoshop kind of guy, and making websites kind of came as a necessity to provide to the requests of the clients. I initially started with WordPress and just recently discovered the existence of this marvelous piece of software – The Mobirise HTML bootstrap builder. The way of building web sites it offered just seemed natural and right. So I decided to implement this great tool in my everyday work.
Ready made HTML codes and tips to ease your life further
In time I enjoyed the great capabilities of Mobirise HTML5 Builder many times and as it happens in the process started noticing some minor gaps I just couldn’t fill and had to overcome changing the vision or making a compromise. Small gaps indeed, but since I follow the motto that If something is worth doing it – it’s worth doing it the way it should be I wondered.
“This program is so cool – I thought – no way they didn’t think out a way refining things” Well, they did – it appears the decision of the more advanced design cases lays in editing the code. So if you desire creating something just really great and appealing HTML5 website - Mobirise’s the tool for you and if you need further more refinement than the vas variety of options offers you – Code Editor is the extension just for you. And the good news is it doesn’t require a vast amount of time or reading to achieve amazing results with the Code Editor.
Just how much coding skills are needed to make use if this tutorial?
To use the ready-made HTML codes stated here – almost none. All you need is to copy/paste in the correct places and change some values to match the vision of your site – mostly colors and fonts. The exact places you should make your changes are well described in the comments inside the code to help you find them with ease.
Overview
To learn how to create a webpage using HTML and CSS, let’s take a closer look at the Code Editor’s interface. As everything it Mobirise it’s quite natural and intuitive. You pull it out clicking blue </> icon appearing when you hover your mouse over an already inserted block in your Mobirise project. In the Code Editor fly out you get two options – just styling the appearance with additional CSS declarations or add both CSS and custom HTML at the cost of losing the block parameters editing function.
You also decide how the code editor should look like. If you go to Account into the App Settings, you will find the option to choose one from 3 themes for your code editor you like the most.
For M4 (Bootstrap 4 based) and AMP (Accelerated Mobile Pages) themes, there is a full-screen mode only, so you can conveniently edit HTML and CSS. To check the changes, you usually need to click on the blue eye-like button in the bottom right corner of the code editor. In these themes, you just need to apply changes and see them right in the app. You are always able to undo and redo anything both in the code editor and in the app when changes are applied.
My advice is – take a full advantage of the powerful software’s capabilities – let it do most of the work and learn quickly how to create a website using HTML and CSS. Select a block closest matching the appearance you are aiming and customize it to the most through the block parameters and CSS declarations. Just then hit to unlock the HTML editor and add custom code as necessary. This all might sound a bit common, so let me give it a flesh with some examples. As a no-code person, I’ve tried finding the simples and easiest ways and will now share them with you.
Something interesting to note – Mobirise’s Code Editor helps you write correctly coloring the text while you type ( you would want to avoid red) and most importantly – not letting you Save and Close if something incorrect in the HTML/CSS code is being detected. In my case – mostly forgotten” } “ at the end.
Giving some spice to the text
Some very cool and impressive things can be done with the text appearance using a few lines of HTML code for website pasted in the Code Editor’s Custom CSS area. Changing the color of the highlighted text and the color of the highlight itself – it’s sometimes handy to have this trick in your sleeve. To do this, use the following code:
Change the first letter or the first row of a paragraph like in a storybook or magazine use this Custom CSS:
Changing the way you quote – adding cool quotation marks and text highlight instead of standard quoting style is also easy. To apply this effect to the text in an entire block use this code:
Creating an editable accordion block
With the help of Mobirise’s Code Editor you can easily add entirely new blocks to your site, still keeping the ability of editing them as you would with the predefined ones. You just need to paste the codes in their appropriate places and you’re ready to go. Actually regarding the large arsenal of predefined blocks it’s kind of hard to think of something missing but still – here are the codes allowing you to add an accordion block to your Mobirise project:
Inside <head> code (in page settings dialog):
Ready made HTML codes and tips to ease your life further
In time I enjoyed the great capabilities of Mobirise HTML5 Builder many times and as it happens in the process started noticing some minor gaps I just couldn’t fill and had to overcome changing the vision or making a compromise. Small gaps indeed, but since I follow the motto that If something is worth doing it – it’s worth doing it the way it should be I wondered.
“This program is so cool – I thought – no way they didn’t think out a way refining things” Well, they did – it appears the decision of the more advanced design cases lays in editing the code. So if you desire creating something just really great and appealing HTML5 website - Mobirise’s the tool for you and if you need further more refinement than the vas variety of options offers you – Code Editor is the extension just for you. And the good news is it doesn’t require a vast amount of time or reading to achieve amazing results with the Code Editor.
Just how much coding skills are needed to make use if this tutorial?
To use the ready-made HTML codes stated here – almost none. All you need is to copy/paste in the correct places and change some values to match the vision of your site – mostly colors and fonts. The exact places you should make your changes are well described in the comments inside the code to help you find them with ease.
Overview
To learn how to create a webpage using HTML and CSS, let’s take a closer look at the Code Editor’s interface. As everything it Mobirise it’s quite natural and intuitive. You pull it out clicking blue </> icon appearing when you hover your mouse over an already inserted block in your Mobirise project. In the Code Editor fly out you get two options – just styling the appearance with additional CSS declarations or add both CSS and custom HTML at the cost of losing the block parameters editing function.
You also decide how the code editor should look like. If you go to Account into the App Settings, you will find the option to choose one from 3 themes for your code editor you like the most.
For M4 (Bootstrap 4 based) and AMP (Accelerated Mobile Pages) themes, there is a full-screen mode only, so you can conveniently edit HTML and CSS. To check the changes, you usually need to click on the blue eye-like button in the bottom right corner of the code editor. In these themes, you just need to apply changes and see them right in the app. You are always able to undo and redo anything both in the code editor and in the app when changes are applied.
My advice is – take a full advantage of the powerful software’s capabilities – let it do most of the work and learn quickly how to create a website using HTML and CSS. Select a block closest matching the appearance you are aiming and customize it to the most through the block parameters and CSS declarations. Just then hit to unlock the HTML editor and add custom code as necessary. This all might sound a bit common, so let me give it a flesh with some examples. As a no-code person, I’ve tried finding the simples and easiest ways and will now share them with you.
Something interesting to note – Mobirise’s Code Editor helps you write correctly coloring the text while you type ( you would want to avoid red) and most importantly – not letting you Save and Close if something incorrect in the HTML/CSS code is being detected. In my case – mostly forgotten” } “ at the end.
Giving some spice to the text
Some very cool and impressive things can be done with the text appearance using a few lines of HTML code for website pasted in the Code Editor’s Custom CSS area. Changing the color of the highlighted text and the color of the highlight itself – it’s sometimes handy to have this trick in your sleeve. To do this, use the following code:
::selection{ /* Safari and Opera */I made it with semitransparent highlight color, but it works as well with solid – RGB or HEX (like the one on the lower row)
background:rgba(9, 67, 136, 0.5);
color:#000;
}
::-moz-selection{ /* Firefox */
background:rgba(9, 67, 136, 0.5);
color:#000;
}
Change the first letter or the first row of a paragraph like in a storybook or magazine use this Custom CSS:
/*select to which stile to apply: paragraph - p, heading - h1-h6*/To apply to the whole first line instead of the first letter, replace –letter with –line Since we’re creating responsive sites here the length of the first line can significantly differ on various screens. You should also consider the structure of your first line to keep the effect with more or less words affected by the different formatting. The best way is to preview the page, change the width of the browser’s window observe the appearance and edit the beginning of the text you’re styling if needed.
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:5px 5px 0 5px!important;
float:left;
/*set font family color and size*/
color:#FF3366;
font-size:3.0em;
font-family:permanent marker;
}
Changing the way you quote – adding cool quotation marks and text highlight instead of standard quoting style is also easy. To apply this effect to the text in an entire block use this code:
p {And change the colors of the quotation marks and background if needed.
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "201C""201D""2018""2019";
}
p:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
p {
display: inline;
}
p:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
Creating an editable accordion block
With the help of Mobirise’s Code Editor you can easily add entirely new blocks to your site, still keeping the ability of editing them as you would with the predefined ones. You just need to paste the codes in their appropriate places and you’re ready to go. Actually regarding the large arsenal of predefined blocks it’s kind of hard to think of something missing but still – here are the codes allowing you to add an accordion block to your Mobirise project:
Inside <head> code (in page settings dialog):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>In a custom HTML block’s editor:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- This is the accordion html website code -->In the CSS Editor section of the same block:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h2 class="panel-title">
<a class="mbr-editable-menu-item text-white" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">This is a Caption</a>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height: 0px;">
<div class="panel-body mbr-article mbr-editable-full">
<p>And this is the first paragraph</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h2 class="panel-title">
<a class="mbr-editable-menu-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
123
</a>
</h2>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body mbr-article mbr-editable-full">
<p>sdv adv ws vadfv adfv asd</p>
</div>
</div>
</div>
<!-- This is an accordion element - copy/paste if you need more -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a class="mbr-editable-menu-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
sdfcas
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body mbr-article mbr-editable-full">
<p>scqaerf qef qecv ef qerf qef e</p>
</div>
<!-- This is the end of the accordion element -->
</div>
</div>
</div>
/*@import url(undefined);*/Check the appearance and correct any colors as necessary. The background is being set semitransparent again. But works as well with solid RGB or HEX.
a {text-decoration:none;}
a:active, { outline:none; }
.panel{
align-content: center;
}
/*set the panel color here - not neccessary a transparen one */
.panel-heading{
background-color:rgba(10, 20, 66, 0.5);
color:#fff;
}
.panel-title{
text-align:center;
font-family:roboto;
}
0 Response to "How to Create a Website Using HTML/CSS Code Editor"
Post a Comment