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.
Quiz
- What is the full meaning of CSS
a) Cescading Style Sheets
b) Cascading Style Sheets
c) Cabonated Style Sheets
Answer: b) Cascading Style Sheets
- Which of the following is not a way of implementing CSS.
a) Enternal styling
b) Internal Styling
c) Inline Styling
Answer: a) Enternal styling
- Which selector is used to style group of specific p tages?
a) .p{}
b) p{}
c) #p{}
Answer: b) p{}
- How do you save an external CSS file?
a) .css
b) .style
c) .sheet
Answer: a) .css
- 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
Upvoted. Thank You for sending some of your rewards to @null. It will make Steem stronger.
You have a deep understanding on web design by main looking at your work sir. Indeed you have presented a nice work here showing telling us how important debugging is when running a software program. Good luck to you.
Thanks boss
Greetings brother
Your post is full of information. You explain each and everything in fully detail. You love development I see. I appreciate your work on coding. My best wishes with you. Stay happy
Thank you my friend
Hello @simonwigwe your post is very detailed and well-structured. I appreciate the clear explanations and practical examples you provided, especially the differences between HTML and CSS and the various layout options.
The way you described CSS's role in enhancing web pages was particularly helpful. Thanks for sharing your insights and the practical examples of your website design.,wish you success 💖🤗🌸💐🌺.
Thank you my friend
We invite you to continue publishing quality content. In this way you could have the option of being selected in the weekly Top of our curation team.
Thank you @mesola for the support
Very impressive entry dear friend 👏 I'm glad to see that you have answered every question beautifully with the examples of CSS, HTML and their outputs too. Thank you so much for sharing with us 😊
You did very nice website layout. CSS in HTML is well structured.