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

canvas background

_{Friends today we have gathered again to learn an interesting topic "Creation of an organized page layout (Basic concepts of CSS 3)" given by @starrchris. In this post, you will get to know many useful things about CSS which is used for the styling of websites. CSS is so important in web designing as it is with CSS you can make your website look more attractive. Let's get started with the contents of the discussion.}

---

Quiz

1. b) Cascading Style Sheets

2. a) External styling

3. b) p{}

4. a) .css

5. c) External

---

Theoretical Questions

Explain Why CSS is added to an HTML file,?

CSS which is known as "cascading style sheets" is added to the HTML file to separate the content structure of the HTML file from the presentation style. Without further ado, below is the more reason why CSS is added to the HTML file.

---

• SEPARATION OF CONCERNS:

CSS is added to the HTML file to handle the visual styling since HTML is used for the structuring of content. With the help of this separation it more easier for a web developer or programmers to maintain and update the design and content separately.

---

• EFFICIENCY:

CSS is added to HTML files to reduce the amount of code in HTML files, so it would be easier for web developers, programmers, etc to read, which also helps to improve page load time.

---

• FLEXIBILITY:

CSS offers a variety of styling options that HTML files cannot handle alone. CSS is added to improve layout control, animations, responsive web design, color schemes, etc for different types of screen sizes and devices. What this means is that CSS is added to HTML files to make a responsive design that can be viewed on both mobile, tablet, and laptop.

In summary, CSS is added to an HTML file to create a beautiful web page that looks more attractive and appealing. It's added to add beauty to a website.

---

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

Well, firstly I will say that the differences are based on their use and how you select both as your way of styling. Having said that I would like to use tabular form and show you their differences

Key points	Elements	Class	ID
By Definition	Elements are the basic building blocks of HTML documents which have the following: <div>, <h1> <p>, and others.	class is known as reusable attributes that are used to apply to multiple HTML elements.	ID is a unique identifier that is assigned to HTML elements.
By use	It is used to define the content and structure of the webpage	It is used when you want to give the same style to multiple elements	It is used when you want to style a single element or when you want to reference a single element
By selection in CSS	All instances of an element can be styled via the use of the name of the element which for example; p { color: yellow; } styles all <p> elements with yellow text.	It is selected by using dot (.) followed by the class name, which example can be like this .example (color: green;) styles all elements with the class example with green text	It is selected by using a hash (#) followed by the ID name. For example, #unique {color: purple;} style the element with the ID unique with purple text.

---

List 5 differences between HTML and CSS, with practical examples.

Okay, let's take a look at the 5 differences between HTML and CSS, with the practical example below.

Eg.1: Purpose

HTML is used to create the structure and the content of a website (webpage) Whereas; CSS is used to style and layout the website (webpage), controlling the design and presentation of how the webpage should be displayed.

Example of HTML based on Purpose

HTML	Output

---

Example of CSS based on Purpose

CSS	Output

---

Eg. 2: Syntax

HTML makes use of attributes and tags, while CCS makes use of declarations and selections.

Example of HTML based on Syntax

---

Example of CSS based on Syntax

Eg. 3: Location in Code

HTML can be written directly in the HTML file, while CCS can only be written in an external stylesheet, in inline or the <style> tag

Example: Linking CSS to HTML

Eg. 4: Content

HTML files define the structure and content such as paragraph lists, headings, and others. While CSS defines the visual look and feel of the content when it is displayed. It adds colors, spacing, fonts, and others

Eg. 5: Accessibility

HTML makes use of semantic tags to help readers have an understanding of the structure of the content. While CSS is used to enhance the visual accessibility of the webpage.

HTML	CSS

Output

---

List 5 website layouts for a blog, and give reasons why you choose such a layout.

The 5 website layouts for the log and the reason for choosing such layouts are given below.

S/N	Layout	Reason why I choose such layout
1	Single column layout	I choose this as my number one because of its simplicity of content.
2	Two-column layout	I chose this because it is a layout that I can use and balance my design
3	Magazine layout	I chose this layout because of how advanced the layout is when it comes to display
4	Grid	I chose this layout so I can easily navigate through my work
5	Masonry Layout	I chose this layout because it is best used for engaging, dynamic design and it looks more appealing to me.

---

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

Bugs

Simply put in programming, programmers are usually faced with errors which are known as bungs. This means bungs are errors that occur in a problem which causes a code to start misbehaving (malfunctioning). Bungs come into a code based on incorrect input of a code, assumption, syntax errors and so on are capable of causing a software program to have bungs.

---

Why do we debug

Firstly, it is good to understand that debugging means fixing errors so a program can run smoothly which involves Identifying and fixing the errors. To this, I will see that we debug for the following few reasons of mine.

• To correct errors.

• To enhance the satisfaction of users.

• To increase the reliability of software thereby reducing the failures of a software program.

• To protect the software from being hacked.

• To increase the performance of the software so it can serve a multitude of users.

---

Why we debug our code

There are multiple reasons why we debug our code some of these reasons are:

• We debug our code to identify and fix all errors in the code.

• We debug our code to increase the quality of the code

• We debug our code to ensure the code doesn't misbehave.

• We debug our code to make our code easier to perform when testing via solving issues.

As a software developer debugging is very important as it is the only way that you can know that your code is running smoothly.

---

Practical Questions 3:

After I have finished learning the lecture from the beginning to the end, I then carry out the practical aspects of it as directed by the professor who gave the lecture. To this, I already have Visual Studio installed on my laptop which I just opened and ran the code as shared below.

_{The screenshot of my page in browser}

_{The screenshot of the source code}

HTML code	CSS code

---

Disclaimer
_{All images that are used in this post are products of mine which were gotten as a screenshot and saved with my username along with the file name.}

Best Regards,
Dynamic Devs Team
@kouba01
@starrchris

_{I am inviting: @dove11, @pelon53, @simonnwigwe, and @dave-hanny}