Sec S19W2 || Creation of an organized page layout (Basic concepts of CSS 3)

Hello guys,
It's a pleasure to be part of this week's engagement challenge which goes with the title Creation of an organized page layout (Basic concepts of CSS 3). Programming is indeed an interesting aspect of computing and I'm delighted to share my knowledge and understanding about it through this contest.

^{Background image Edited on Canvas}

Quiz

1. What is the full meaning of CSS

a) Cescading Style Sheets
b) Cascading Style Sheets
c) Cabonated Style Sheets

Answer: b) Cascading Style Sheets

1. Which of the following is not a way of implementing CSS.

a) Enternal styling
b) Internal Styling
c) Inline Styling

Answer: a) Enternal styling

1. Which selector is used to style group of specific p tages?

a) .p{}
b) p{}
c) #p{}

Answer: b) p{}

1. How do you save an external CSS file?

a) .css
b) .style
c) .sheet

Answer: a) .css

1. What way of implementing CSS to HTML, do professional use?

a) Internal styling
b) Inline styling
c) External

Answer: b) Inline styling

Theoretical Questions

Explain Why CSS is added to HTML file?

CSS which is known as cascading style sheets is added to an HTML file for many reasons and below I will discuss some of the reasons but before I go ahead I will like you to know that CSS is mainly use to beautify a webpage to make it attractive because it is like the clothes that is worn by a webpage.

When an HTML is without a CSS it is just like a skeleton 🩻 which you see the bones present in the body so when you add CSS to it covers the skeleton 🩻 body and makes it look beautiful.

Other reason why we add CSS to a HTML file are seen below.

• CSS is used with HTML to separate the contents and the design. As you know the content is the structure which is the HTML and the design is the CSS. Anytime you wan to make visual changes to a web you just have to go to the CSS and that can be achieved without delay.

• With CSS you can have a certain style which can be used through out the webpage all you will do is to call and use when the time comes. Example you have same style for all headings across the webpage so you only call the style and use in all your heading making you consistent in your code.

• Applying CSS on your code makes your page look beautiful and it will reduce the amount of HTML code which was ideally supposed to be in one place as CSS can control different sections of the code making it to load faster.

• One of the most important reasons why CSS is used in HTML file is to create a responsive design. As you know our screens are different, some use computer whereas others use smartphone so to be able to access same content you need to use CSS and make the website responsive.

The image below is a screenshot of a webpage without CSS and another with CSS to show you how these things look and the difference between them.

HTML Code without CSS	Display on browser

HTML code & CSS	Display on browser

What's the difference between Id, Class and Elements?

Every programmer must know the difference between I'd, Class and Elements for him or her to be able to write a well detail and organised code. Here I want to different them using a table below.

Id	Class	Elements
An Id is a unique identifier which is use to identify a single thing in the HTML code	A class is an identifier which can be used identify group of elements within the HTML code	Elements on the other hand are the structure that forms the HTML e.g the heading, footer, paragraph etc
Id is called Id in the HTML code and when called on CSS we use the # symbol an example screenshot code is seen below.	The class is also called class in the HTML code but is called using . in CSS an example screenshot code is seen below.	Here it start with an opening tag and a closing tag an example screenshot code is seen below.

^{Code display of use of Id}

^{Code display of use of class}

^{Code display of use of Elements}

List 5 difference between HTML and CSS, with practical example?

The difference between HTML and CSS with practical examples can be seen below. We will take them one after the other with a screenshot code for your clarification so read through.

• File Saving: HTML uses the extension.html while saving it's documents whereas CSS uses the extension.css the screenshot of how they are saved are seen below.

• Behaviour of the webpage: HTML is used to build a static webpage whereas the CSS when added is use to give the website an interaction such as hovering effects and other behaviours. See the screenshot for the code below.

• Presentation and content of the webpage: The HTML is use to present the structural look of the webpage or a skeleton view of the webpage whereas the CSS is used to add colour and other beauty to the webpage an example code of content and presentation can be seen below.

• Purpose: The major purpose of the HTML code is to give the structure of the webpage i.e the skeleton view of a webpage is handled by the HTML code whereas the CSS is use to give the structure an appealing design such as colour, position and many more an example code of content and presentation can be seen below.

• Syntax and structure: HTML uses the tags which has an opening an a closing tag to define elements whereas the CSS uses selectors to call the tags such as Id, class etc., an example code of content and presentation can be seen below.

List 5 website layout for a blog, give reasons why you choose such layout?

The five layout of website layout for a blog and the reasons I have chosen them as well as a sample screenshot can be seen below.

Single column layout: As the name implies single column layout, this is a webpage layout where everything is in a single page. Here everything you need about the page is displayed on a single page.

Reason why I chose it

• It is simple to use since everything is in a single page.

• Single column layout are more user-friendly than other layout. So creating a page for mobile users the single column is the best.

Two column layout: A two column webpage is such that the page has a main content side and a side bar which is use to display information. A good example is seen below.

Reason why I chose it

• Side bar here helps user to navigate to important information fastly e.g the Steemit sider bar where latest update are kept.

• Side bar can be use for advertisement as anyone who comes to the website can easily see what is important and new via the side bar.

Grid layout: As the name suggests grid layout, this is a website layout that has its webpage displayed in grid format.

Reason why I chose it

• The appearance of the webpage when it is in this layout is always very beautiful and it attracts people to want to navigate through it because of how it look.

• Most grid layout are responsive as they are always design to be adjustable to various screen such as mobile, computer etc.

Magazine layout: This layout is in a form of a local magazine which means it has several sections and it is a more complex type of layout because of the many things available on it.

Reason why I chose it

• This type of webpage layout carries a lot of things at the same time which makes it rich for the consumption of those who visit the site. Also company who has much to advertise uses this.

• The appearance is always very beautiful and a lot will wan to try to have such design as it is believed that is mainly done by professionals.

Full screen layout: As the name implies full screen layout this is a type of layout that has elements such as images that full the entire screen.

Reason why I chose it

• Since the said image or content covers the screen, people attention is drawn to it more easily so it is a focal point for anyone going through the website.

• The design is always attractive as it doesn't have too much on it.

What are Bugs and why do we debug and why do we Debug our code?

The word Bugs in computer programming refers to errors made during the coding which makes the code not to either run or to produce and unexpected result for us when we run the code on a web browser. There are many types of bugs such as the syntax, semantic, runtime and lastly logic error or bug.

Syntax error or bug occurs when we miss as little as a semicolon. Semantic error occurs when we use a wrong keyword which the computer doesn't understand or wasn't define hence won't be recognised. Runtime error as the name implies runtime it is an error that occurs when the code is running. Lastly the logical error or bug occurs due to wrong use of logic term like loops.

Reasons why we debug our code

The main reason why we debug our code is to fix the error which the code gas run into in other to obtain the desired result we have always wanted. So debugging is very important for every programmer and that is why it is recommended to always group your work in divs so that you can easily spot where your error is coming from.

So we debug for performance of the code, stability of the code and security. There are bugs which will make the details of those logging into the webpage to be open to attack.

Practical Questions

From the practical I have developed a website that carries header, navigation bar, right and left bar, main content page and the footer. The complete system can be seen below, I used the Steemit webpage as my sample.

HTML code for the webpage begins from the below image

CSS code start from the below image.

I want to finally invite @solaymann, @steemdoctor1, and @suboohi to also join the contest in this community today.

Note: All image except otherwise stated are screenshots taken by me from my PC