New announcement. Learn more

☏ 027 437 9929
TAGS

HTML cheat sheet for Rocketspark Website Designers

Hands up if you're a designer with a slight phobia of code ✋

Oh good, I'm not alone 😅 
On my website design adventure, I've picked up a few snazzy little tricks to help enhance website design without going too far down the scary coding rabbit hole!

What I've learnt is a little bit of code can do some awesome things for your website, AND you don't even really need to understand it - Just Copy and Paste!

I'll be adding to this list as I learn more - so be sure to check back!


These are some basic codes I find helpful

These codes can be posted in Heading sections as well as the <html> section in text paragraphs. 

<b>  </b>Make text bold
<i>  </i>Makes text italicized
<font color=# >  </font>Changes font colour 
<hr>Inserts a horizontal line
<br>Inserts a line break
For a Button: Mailto: *add email address*Insert a link to email address
For a Button: Tel: *add phone number*Insert a link to a phone number

Example:

Simple, Effective <br><font color=#D2008C>Website Design</font> <br>& SEO Cambridge
Simple, Effective <br><font color=#D2008C>Website Design</font> <br>& SEO Cambridge


Adding Emojis and Symbols!

Yes you can do this pretty easily too! 
Visit this website and search through the library of different emojis and symbols. All you need to do is find the HTML code for that emoji and slap it into your text 😍 📩 📞 🔞 🔆 ✅

Example:

&#10004 Open Contract<br><br>&#10004 Local Expert <br><br>&#10004 With you until SOLD
&#10004 Open Contract<br><br>&#10004 Local Expert <br><br>&#10004 With you until SOLD


Buttons

To get side by side buttons in the same stack use this code in the heading section (note your will need to reformat buttons, but it works a treat!):

<a  class="button-content custombutt_link align-center" href="/insert your page name/" ><span class="custombutt">Insert your button name</span></a>   <a  class="button-content custombutt_link align-center" href="/Insert your page name/" ><span class="custombutt">Insert your button name</span></a>

Example:


Lottie Animations

Lottie animations are awesome - and can help you add a little bit of movement to your website! To make them work - you need to grab the '.json' file code. Rocketspark already have a fantastic blog on how to add these to your websites Check it out

You can make something like this:


Anchor Links

Zip visitors around your website with tactically placed anchor links. This simple bit of code can be added to buttons or intext links and can direct visitors to specific parts of your website that is relevant!

For instance - you might want to add a 'contact me' button but just zip people down to your footer!

Add this HTML code where you want to go:
<a name="insert button name"></a>

And add this to the button URL that will take visitors:
/insert page name/#insert button name



I'll be adding to this list as I learn more - so be sure to check back!