#1 What is HTML?

HTML stands for Hyper Text Markup Language and is the standard language for creating websites. The latest version is known as HTML5. 

#2 What is formatting in HTML?

HTML Formatting is a process of formatting text for better look and feel. HTML provides us the ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined.

#3 What are tags?

HTML tags are like keywords that tell the browser how to display certain things. 

The structure is following:

1) Opening tag:  states where the element begins

2) The content: this is everything that goes into the element

3) Closing tag: states where the element ends

#4 Does all tags have to be closed?

No, there are some tags like the <image> or the <br> tag that don’t require a  closing tag.

#5 How many types of heading does HTML contain?

There are six types of headings which are defined as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

Each type has a different text size with <h1> being the biggest one.

#6 How to create a hyperlink in HTML?

For creating a hyperlink you can use the <a> tag. The href attribute is the link destination. You can also add the target attribute and define if a link should open in a new window. 

#7 What is the difference between HTML elements and tags?

Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol.

Elements are the content between the tags.

#8 What are some common lists that are used?

<ol> is an ordered list and displays elements in numbered format.

<ul> is an unordered list and displays elements with bullet points.

<dl>, <dt>, <dd> tags are used to define definition lists and they display elements in definition form like in a dictionary. 

AWS – Amazon Web Services

AWS is a cloud computing platform provided by Amazon. AWS services can offer an organisation tools such as compute power, database storage and content delivery services.

VCS – Version Control Systems

A VCS automates the process of version control. It tracks the changes to a file or a set of files over time. It keeps a complete history of your code and other files, allowing an user to return to a previous version if needed.

ASCII – American Standard Code for Information Interchange

ASCII is 128 specified characters that are categorized into seven-bit integers which define standard encoding for letter, number and symbol characters. 

It also became the standard for the US government in 1968.

WYSIWYG – What You See Is What You Get

“What you see is what you get” refers to the ability of an editor/software to show the user exactly how their content will look. A very common example for that is Microsoft Word.

SDK – Software Development Kit

An SDK is used to create applications for a specific platform or programming language. A SDK typically includes an API, but it also includes other resources like documentation, sample code, and development tools.

SaaS – Software-as-a-Service

SaaS is a cloud based software delivery model that allows end users to access software applications over the internet.

IDE – Integrated Development Environment

An IDE is a software application that helps programmers develop software code efficiently.

WWW – World Wide Web

WWW is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed over the internet.

URL – Uniform resource locator

URL is another name for a web address. URLs are made of letters, numbers and other symbols in a standard form. People use them on computers, to make the computer fetch and show some specific resource (usually a web page) from another computer (web server) on the Internet.

APN – Access point name

APN is a gateway between a cellular network and the internet. It’s an important entry point for cellular devices because it defines the type of network access the device will receive and allows security.

HDMI – High definition multimedia interface

The HDMI cable transmits data (in form of digital 0s and 1s) from a source to device such as a TV, computer, laptop, projector or speaker. The Standard HDMI cable is one of the most common and has been designed to work with satellite TV resolutions of up to 720p and 1080i, with the bandwidth being capable of speeds up to 5Gbps.

LED – Light emitting diode

LED is a semiconductor device that emits light when an electric current is passed through it. Light is produced when the particles that carry the current combine together within the semiconductor material.

RAM – Random access memory

RAM is your computer or laptop’s short-term memory. It’s where the data is stored that your computer processor needs to run your applications and open your files.

WiFi – Wireless Fidelity

WiFi is a wireless technology used to connect computers, tablets, smartphones and other devices to the internet.

EOF – End Of File

EOF is a code placed by a computer after a file’s last byte of data.

01: Domain

Choose a domain that’s fitting with your business and make it easy to remember for your users. 
Try to use a .com address because that’s the most common one and people rather trust a .com domain than something else. 

02: Hosting

Find a reliable hosting and choose the right package for your use case.
Is it a small website? Then you don’t need the super mega pro package with 500GB of cloud storage. 

03: Technologies

Take a second to think about what technology would be the best fit for your website. 
What programming languages will you use, does using a CMS system would make sense? 

04: Purpose

Write it down – what’s the purpose of the website you’ll build? 
Is it to showcase a business, is it a social platform or maybe an online shop? Write down the purpose and start building up from that.

05: Audience

Figure out who the main audience is and build a website that will attract that audience. 

06: Sitemap

What content will you have on your website? Make a flow chart or a mind map to visualize the structure of your website. That helps with prioritizing what should go on the first level of the menu. 

07: Colors

Colors affect the whole look and feel of your website and they also affect how users feel while being on your website. 
With knowing what your purpose is, you’ll have it easier to choose the right colors.

08: Layout

Start with roughly sketching out your website and think about what you want to show on the main page. 
It’s good to have the overall content being shown on the main page.
You can summarize subpages and display a teaser on the main site.

Imagine you just built a new website and it looks amazing. You’re pretty satisfied with the look and feel but when you want to show it to another person… it’s loading and loading and loading. The performance of a website plays a significant role in the success of it and in this article you will find 6 ways how you can optimize your images to ensure a good performance.

But why does the speed matter?

The performance of your website directly influence your conversion rates, search engine rankings and the user experience. Customers are used to fast websites that are easily and accessible and when they come to a website or a shop that’s loading immensly long, they will lose interest in it pretty fast. Loading is the very first thing that happens before a user will be viewing your website and if it takes too long, there was a bad first impression made.

So… are the images the problem?

There can be many factors why your website is loading slow. It’s not only the images. Here are some other reasons why a website can be slow:

• poor server performance
• JavaScript issues
• too many HTTP requests
• too many ads
• caching issues

And of course, the images. But hey, for every issue there is a solution and we will focus on how we can optimize those images today.

What does it mean to optimize images?

The optimization is about making the file size as small as possible without the loss of the image quality. This helps a lot to ensure a better user experience.

Okay, so how can I do it?

Compression

Images can be reduced by their filesize with a compression. The goal is to make the size as little as possible without losing the quality of the image. On websites, uncompressed images can take a while to load.

There are two kinds of compression:

• lossless compression
• lossy compression

What’s lossless compression?

The goal of the lossless compression is to reduce the file size while maintaining the same quality as before the compression.

Formats of lossless images are RAW, PNG, BMP.

What’s lossy compression then?

To reduce the filesize, the lossy compression takes away some parts of the image. However, that doesn’t imply that the image will look bad. The information that gets taken out is not like the upper right corner goes missing. It’s more like, some pixels get put together or the average of an area gets calculated. Formats of lossy compression are JPG and GIF.

A really good online compressor is TinyPNG.

Dimensions

The most popular way to optimize images is by simply resizing them. For your website you won’t need images with 6000×4000 pixels and 12MB. With resizing you can dramatically reduce the file size. Image editors like Photoshop can help you with this but if you don’t have Photoshop, you can also use GIMP or any software online.

File types

The most common file types to upload on a website are JPG, PNG, GIF or SVG. While PNGs are completely uncompressed they should be only used for simple transparent images where you really do need the transperancy. JPGs on the other hand are the best for photos with lots of colors because that file type can display a million of colors. And instead of putting tons of videos on your website, you can use GIFs instead but keep in mind, they only contain 265 colors and are losslessly compressed. SVGs are vector graphics and often used for background graphics. They don’t pixelate because they get newly calculated whenever the screen resolution gets changed.

Metadata

Images come with metadata and that is text information about the details relevant to the image itself and to its production. The metadata is typically invisible to the end-user. For photography, this means you can save all sort of data just like the date, time, GPS data, camera details, color profiles, etc.

Due it’s not visible to the end-user you can get rid of it for your website. You can either remove the metadata with Photoshop or use an online tool for that.

Use Caches

Caching is the process of storing copies of files in a cache so they can be accessed more quickly. Images on a website are a part that usually won’t change too frequently. Images can get stored in a cache to be accessed faster the next time the user goes on your website.

Use a CDN

A CDN is a content delivery network that delivers you images and other content. It speeds up your website and image loading time by storing your website’s files at multiple data centers around the world. Through that, whenever someone visits your site they can download the files from the nearest data center. There are free CDNs like Jetpack and CloudFlare.

After this overview on how to optimize your images, have fun with it! One last tip from my side: A good rule of thumbs is to make sure every image on your website is at least below 1MB.

The navigation of a website itself is probably more important than you might think. It can easily be overlooked, but if implemented correctly, it can positively affect your traffic, lead generation, and user experience. What is the ideal way to structure your website?

There are different types of navigation menus, including:

1) Horizontal navigation

This is the most common form of website navigation, running horizontally across the screen. It’s a standard in web design and development, and users are already familiar with it.

2) Dropdown navigation

This type of navigation is ideal for big websites with lots of pages and content. For the main navigation (the one on top), you should choose the most important topics for your users, and break down the rest of the pages underneath those topics.

3) Hamburger navigation

Another type of navigation that users are familiar with is the hamburger navigation. It’s mostly found on mobile websites. The hamburger navigation is a three-lined icon with a vertical dropdown menu when clicked. Even though it’s used a lot, it feels a little weird to see it somewhere else than on a phone or a small screen.

4) Vertical sidebar navigation

The vertical sidebar navigation has the menu stacked on top of each other, offering a seamless user experience. If it goes with the whole website, there is nothing that speaks against having a vertical sidebar navigation. However, it’s less popular than the horizontal menu. If you have to name your pages longer and you feel as if a horizontal menu is not doing it for you, give it a try!

Now that we know what we can choose from, let’s see what we want to do and don’t want to do with our navigation.

We say yes to…

1) Simplicity

A simple and intuitive navigation is the key to a good user experience. Users should be able to find what they’re looking for without any obstacles. A good rule of thumb is to have a maximum of six navigation options in your menu.

2) Consistency

Go for only one layout for your navigation and keep it the same on all subpages. If the menu randomly changes on a subpage, it creates confusion. Make it easy for the users to navigate on your site.

3) The most important information goes on the first level

Make it easy for the users to find what they’re looking for as soon as they visit your website. There is something called the „three-click rule“ that states that every user should be able to find what they’re looking for within three clicks.

4) Don’t forget the search bar

Make sure to implement a search bar within your menu and make it easy to find. There is nothing more annoying than not finding what you’re looking for on a website, and then in addition to that, you can’t find the search bar. I don’t have to tell you that a user will jump off your page after that.

And we say no to…

1) Overloaded menus

Too many pages in a menu can be overwhelming for a user, so make sure you have your menu and structure organized. Plan out what will be the most important pages for your users.

2) Confusing labels

Make sure it’s clear to the user what they can expect when clicking on a link. Try to avoid overcomplicated words or technical terms that users may not understand.

3) Too much color and fonts

Keep your menu simple and don’t overfill it with colors and different kinds of fonts. You may want your website to stand out, but the navigation should not be the part that’s outstanding. So, keep it simple and clean.

Choosing the right colors for your web presence is crucial to its success. Colors have an impact on the mood and emotions of your users and even influence their behavior. With the use of the right colors you can bring across a message without the need of using words. But what exactly is a color scheme and how can you pick the right one?

What is a color scheme?

In simple terms a color scheme is a combination of colors. Each scheme consists of one or more of the twelve colors from the color wheel. By combining them, you can create tons of different color palettes for any usecase. Keep in mind that different colors and combinations bring different moods.

Okay, but how do I pick the right color scheme?

#1 Color theory

Color theory is both the science and art of using color. Get familiar with it and how certain colors affect the mood and the emotions of the viewer. 

#2 Brand identity

Choose colors that are fitting to your brand identity. If you have a company that sells natural products for example you would go with earthy tones and shades of green.

#3 Demographic

What’s your target audience? Different colors can appeal to different demographics, so consider the age, gender and cultural background of your audience when choosing your colors.

#4 Tools

There are many tools online that will help you create balanced color schemes. With a color wheel you might get a better feeling for the colors and see how your selected color will go with a complementary color. (That would be the color on the opposite side of your chosen color on the wheel)

#5 Don’t use too many colors

Some of you might like it colorful, however the quality of your website should benefit and not suffer from the chosen colors. A too colorful website could lead to letting your website appear unprofessional, overwhelming and distracting.

#6 It’s feedback time!

Get some feedback and ask your users, family, friends what they think about the colors and how the overall image of the website appears to them. You might get very different answers out of that.

#7 Last but not least…

Finding new ways to get your message delivered can be a challenging thing but don’t forget to have fun with the process of trying out new colors and see how you like it!

We hear it quite often: responsive design. But what exactly does it mean and why is it so important? Nowadays users access websites through many different devices like smartphones, tablets, laptops and desktopts. The goal of responsive design is to ensure that the user experience stays on top and the website looks good on all kind of devices.

But what does responsive design actually mean?

It is a way to develop a website that automatically scales the content to match the screen size on which it is viewed. For example: a classic horizontal website navigation gets hidden behind a button on a smartphone and when you click on it, the menu is vertically aligned to fit the screen.

Instead of having to programm different versions of a website to make them fit different screen sizes, you can make only one website that scales with the screen size of the user. This way ensures that the website looks good on every device, elements are easily accessible and the user journey is uninterrupted.

Is it worth to invest into responsive design?

The short answer here is definitely yes. What makes it so important to invest in are following topics:

Improving the user experience

If your website is responsive, you gurantee your users a great experience regardless on what device they are using. Users will spend more time on your website if it’s easy to navigate and visually appealing.

Reducing bounce rates

It takes a user about 0.05 seconds to form an opinion about a website and if they like it or not. Keep that in mind when looking on your website, if it’s not displaying images correct or if the interface seems confusing, the user already decided to rather dislike it.

Improve SEO

SEO is important and optimizing your website in regards of that means a better ranking on Google. The better the SEO, the more likely is it that new customers visit your page. With a responsive website you have more time to invest in keywords and research of the cometitpors and it allows you to focus on ranking better on Google.

Cost-effective

Imagine having to update several versions of your website… and now compare it to only have one website that’s optimized for multiple devices. With a website like that you can save money by only having to maintain and update only one website what makes the process way faster.

More sales

Users are more likely to make a purchase on a website they like. If the design is appealing and the user journey easy to go through, you can achieve more sales or form submissions on your website.