HTML – Website Add-Ons

Posted on by Administrator Posted in Computer Science, HTML, CSS & JavaScript

You have now completed a fully working website. You have added a few webpages and created a fully working navigation system. All your pages have some meaningful and relevant content including pictures and text.

What’s Next?


This blog post will give you some ideas of add-ons you could add to your website to improve the look & feel of the site, add live content or add some interactivity to your webpages.

Using an online Text Editor
Using an online Text Editor can save you a lot of time to create HTML code for your main text.
Google Fonts
Bored with the usual Arial or Times New Roman fonts? Choose amongst a collection of hundreds of Google Fonts that can be used on any webpages.

Check the video tutorial on how to use Google Fonts on your website: https://youtu.be/peR9V-f9OkI

You will need to add the following code in the <HEAD> section of your code:

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the 

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: YOUR_CHOSEN_FONT;
}
Contact Us Form
Table of Data
Use this website to create a table of data such as a price list or a table showing opening times for the different days of the week.
Transition Effects
Use these examples to create a transition effects that will run when you page loads or is being refreshed.
Interactive Tabs
Check this page to create a fully interactive tabs.
Expand/Collapse Accordion
Check this page to create a fully interactive accordion..
Interactive Slide Show
Check this page to create a fully interactive slideshow showing images and slideshow navigation features.
Interactive image Gallery
Check this page to create a fully interactive image gallery showing image thumbnails and gallery navigation features.
Roll Over Buttons
Create some nice rollover buttons to add to your website or to create a navigation bar.
Responsive Navigation Bar
Create a fully responsive navigation bar which will adapt to the size of the screen and work great on smartphones.
Google Maps Widget
A google map widget could be a good add-on to your contact us page or your directions page. Find the map you want to focus on and embed it on your webpage.

Check the video tutorial on how to embed a Google map: https://youtu.be/BsvieSBad5Q

Live Weather Forecast Widget
Check this website that lets you add a live weather forecast widget to your webpage in just a few click. You can specify the format of your widget as well as the location for which you need the weather forecast.
Google Translate
Check this website that lets you add a Google translate widget to your website. However this will only works on live websites!

Did you like this challenge?

Click on a star to rate it!

Average rating 4.8 / 5. Vote count: 11

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!


Other challenges you may enjoy...