#webauthoring

One of the things that gives a designer a headache when starting to code a website, is cutting and inserting icons from the layout they've placed into the site they're coding on. Because the icons must be inserted pixel-by-pixel or they will not be displayed in the wrong place. I used to be very frustrated and annoyed when I had to do this boring stuff, until I came to know Font Awesome. And I feel like I've found heaven on the earth. Like how I enjoy a delicious bowl of hot ramen on a chilly autumn night. 

Okay, so before we run out, What is Font Awesome?

Font Awesome has been known to be one of the libraries of font letters that are visual symbols used in web pages. It's a font, guys, but not a normal font like A, B, C. They are icons.

Font Awesome can be built into formats with various font files like otf, eot, ttf files, etc., so it can be easily installed and used as it is compatible with most operating systems on computers today.

Then Is it difficult to install Font Awesome?

The answer is extremely simple.

First, visit Font Awesome's website and download its library. Then create a path to link the file “font-awesome.min.css” to the html file you are working on.

You can refer to this picture

Next, you just need to return to the company's website and select the icon set to use. For example, if you want to use this coffee cup icon, for example, its name is "coffee", then follow the instructions below.

In addition, we can change the color, resize and even rotate 90%.

Big advantage of Font Awesome

If we use images, the loading speed of the website will be slower because we have to load an image quite heavily. But with Font Awesome, you only need to load a CSS file, a Font file and only load it once, so the speed will be significantly improved.

An image cannot change its color or size. As for the size, we can use CSS to set the width and height, but if we do so, the image quality will be affected. But with Font Awesome, you can easily change the size and color of the icon with the usual CSS properties of the font like color, font-size or any other CSS property for the font.

So, those things are enough for you to see the greatness of this font set? 

Remember that recently I shared a game to learn Grid in CSS, well, today I bring you another very interesting game to learn Flex Box ... We must thank again our dear friend Thomas, without a doubt it is an ingenious way to learn coding while you have a good time. Give it a chance and play while you learn!

Flexbox Froggy Pro introduces 8 ponds, each with a mix of 20 levels. Replay a pond and face completely new levels each time. Challenge yourself to beat them all! Practice and improve recall of CSS flexbox properties and values.

Enjoy! :) 

Web design

In laymans terms, web design is designing a web page. Remember I talked about web pages in my “WWW” post.

I thought HTML was difficult but when I started learning it online, before I started learning it in college, I realised that it wasn’t so difficult. Now learning HTML in college makes it more remarkable, clear and exciting because having my course mates around makes it easy to understand with various questions and answers. I feel super confident about how my web development journey is going. Just so you know, HTML is a markup language. A markup language is a way of using a text to describe information, and it functions by the use of elements and tags. The code may seem a bit overwhelming if you are starting out, but the main point is that this code is an HTML document and your browser is translating this code into the webpage that you see. 

Let's start with their Acronyms and Meanings.

Acronyms Meaning

WWW World Wide Web

HTML Hyper Text Markup Language

HTTP Hyper Text Transfer Protocol

HTTPS Hyper Text Transfer Protocol Secure

IP Internet Protocol

TCP Transmission Control Protocol

DNS Domain Name System

CSS Cascading Style Sheets

DEFINITIONS

WWW: WWW is a system of interlinked documents that are accessed through the internet.

INTERNET: This is a global system of interconnected computer networks that use the TCP/IP standard to link devices.

That is, WWW = Internet because WWW is a service that runs on the Internet.

WEBPAGE: This is a hypertext document and they are usually text documents formatted using the HTML

HYPERTEXT : This is text displayed on a computing device with links (Hyperlinks) to other documents which the reader can access.

WEBSITE: These are multiple pages grouped under a common theme, name or web addresses.

Web pages stored on Web servers are accessed by Web browsers.

WEB SERVER: This is a program running on a device that stores, processes and delivers web pages to clients (example Web browsers).

WEB BROWSER: This is a software application for retrieving, presenting and navigating documents on the WWW. Examples are Firefox, Chrome, Edge, Safari and Opera.

HTTP: This is the communication client and server uses.

Note: Browsers don't use web addresses to find web servers. They use IP addresses.

IP addresses takes the form nnn.nnn.nnn.nnn and each computer connected to the Internet must have a unique addresses.

There are two types of Website

1. Static Website: This is where the content doesn't change unless the page is manually edited.

2. Dynamic Website: This website can serve up different content usually stored in a data base to different users. Example, Facebook, Amazon, Gmail. It also require programming or scripting language and often a database.

The server will usually display an HTML page to the browser whether Static website or Dynamic Website.

HTML give information and it is the one we use to build document to read online.

CSS define the presentation of HTML pages and add design.

JAVA SCRIPTS: This is a client side scripting languaage that provides dynamic functionality and interactivity to web documents.

The three standards of the web

HTML (Structure)

CSS (Presentation)

As my friend Lihn told me yesterday, "You always find a music for anything". What about the title of this post? It's a song from Paul McCartney called "Queenie Eye" and it fits exactly with the proposal of this post: talk about my website and my hero. Another good thing is: Paul McCartney is my hero, so, perfect match again! 

So, without Ruairi around to tell us the exact measures of paddings, margins and borders, give us some advice on how to organize our HTML archive, tricks on JavaScript or anything like that, here we are, all by ourselves, building our first website.

The first thing to do is find your personal hero, someone that worth it receive a website made by yourself. That answer comes to my mind very quickly: Sir Paul was performing in my country during October and receive the payment for the tickets that I sold to move to Ireland, during the week that Ruairi introduces us the briefing, so, coincidence or not, here we are.

And why this old fella is my hero, do you ask. Well, there's a lot of answers for it. Firsts things first, he is a Beatle, a legend alive, one of the most talented and creative musicians of all times. That does not need to be proved, but it is still here, creating and working until today. The song on this post title is from 2013 and it is not his last song released. He's 75. His concerts last about three hours, time while he does not even stop to drink water.

He is vegetarian for more than 40 years now. Thus he also supports a lot of institutions that defend the animal rights and is one of the creators of Meat Free Monday, an initiative to promote one day a week without eating meat, to people to try and see that it isn't that complicated or hard. He also promotes music in a way to treat and cure people and also to give a new path to children and teenagers living at risk to be involved with drugs and violence.

If those reasons aren't enough to love, admire and wants to pay homage to someone, well, he's Paul McCartney and deserves one more website. And I'll create it! 

In the previous post, I briefly talked about some popular Wordpress applications. Then in this post, I will summarize some Wordpress themes that I find most beautiful and like, divided into 4 topics: Personal Blog, Portfolio, News, Company Website and E-commerce Website.

A WordPress theme is a collection of files that control how the content on your website is displayed. Without a theme, a website consists of only the main components, such as content and features. But like a skeleton, it does not have a beautiful display layer.

Personal Blog

Yosemite Lite

Feature:

Simple and clean design, no fancy elements

Perfect for personal, style and travel blogs

Supports compilation and works well on all popular browsers

Striker

Feature:

Simple but art-oriented design

Compatible for localization and WPML

There is a theme customizer

Customer support

Moesia

Feature:

Use block front page to easily manage custom homepage

Use parallax backgrounds

Ready to translate with lots of social media icons to choose from

Activello

Feature:

Built-in awesome font icon

Unlimited color options

Optimize SEO friendly compatible with Schema structure

Responsive and retina-appropriate

News

ColorMag

Feature:

A huge and ever-expanding library of designs

Optimize SEO with high speed

Using a unique post system

Compatible with other page builders, like Beaver Builder and Elementor

News Portal

Feature:

The layout is designed in the form of an online magazine

Retina ready for a wide selection of tone sets

Great Responsive theme with SEO

MH Magazine Lite

Feature:

Very good responsive theme and optimized for SEO

Support for custom widgets like MH Custom Posts, MH Custom Pages and MH Spotlight

Supports all current browsers.