Level A

MY BLOG
 MY BLOG

Problem Statement the Project

The goal of this project is to create an art-themed blog using HTML, CSS, and
Bootstrap.

Description of the Project

This project emphasises designing an art-themed blog using CSS and HTML. It
incorporates the concepts of bootstrap and an interactive web layout.

Today’s Objectives

To get familiar with and implement CSS design properties.

To create a navigation bar for the blog page using CSS Flexbox.
To create a carousel using Bootstrap.

Learning Outcomes

By the end of this session, students will be able to:

Know about CSS and how it is used for designing a website.

Understand the concept of CSS class selector.
Use CSS to create a Navigation Bar.
Use Flexbox to align items and laying out components.
Use Bootstrap to create a Carousel and embedding it on our webpage.

1
 MY BLOG

Introduction

The first step while designing a blog is to identify different sections and organise
them. Each section should serve a specific purpose:
1. A Header Section with navigation links — commonly referred to as a
Navigation Bar or Navbar.
2. A Carousel Section to display images related to the blog.
3. A Blog Section displaying articles.
4. An About Me Section to display the blogger’s information.
5. A Popular Post Section to display popular article titles.
6. A Footer Section containing contact information.

2
MY BLOG

Common blog types

1. News blogs

Image Source: Engadget.com

A news blog contains the latest news from the area it covers — a city,
country, continent, or the world. It requires constant updates with large
amounts of content.

3
MY BLOG

2. Personal blogs

Image Source: Buffer.com

A personal blog talks about the writer’s opinions. It often connects with people
who share the same opinion.

4
MY BLOG

3. Business blogs

Image Source: Angiegensler.com

A business blog contains content focused on an area of speciality to attract

the attention of potential clients.

5
MY BLOG

How can we make a blog look attractive?

Cascading Style Sheet or CSS is a Style Sheet language used to design and create a
webpage layout. The CSS files have the extension .css.
CSS lets us play around with the layout of a page, modify colours, fonts, text size,
apply animations, effects, and more. It is through CSS that web designers can
make a website look unique and attractive.

6
 MY BLOG

Technical Activity

In today’s session, we will complete our blog page using CSS and bootstrap.

Part 1 - Use CSS on the webpage

▪ We will use the External CSS method to add CSS to our website. We will
create a separate CSS file and link it to our HTML file.
Step 1: In VS Code, open the My Blog folder — from the last session and create a
file inside called style.css.

7
MY BLOG

Step 2: This CSS file needs to be linked to the HTML page using the link tag. We
add the CSS file name as a value in the href attribute.

Note:
rel = “stylesheet” specifies that we are importing a CSS file.

Let us start to design the webpage using CSS. We will code all CSS properties in
the style.css file.

8
MY BLOG

Part 2 – Set a fixed font and background colour.

▪ Before getting started with the content design, we will set a default font
and background colour. We want these properties to be applied
throughout the entire webpage. We will specify them in the body tag.
Step 1: Open the style.css file. Specify the body tag selector and write the
following CSS properties:

9
MY BLOG

Part 3 – Design the main container.

Step 1: In the main container, we will specify padding to add gaps between the
HTML contents and the edge of the browser. We will add left and right padding.

Note:
When we specify two values on a padding property, the first value represents
padding-top and padding-bottom. The second value represents padding-left and
padding-right.

10
MY BLOG

Flexbox
Flexbox is a CSS feature that offers an efficient way to layout and align items
within a container. It provides a responsive layout — which means that the layout
automatically adjusts when the container is resized on different devices like
mobile phones.

Horizontal Alignment

Vertical Alignment

11
MY BLOG

Part 4 – Design the header section.

▪ To start using Flexbox, we need to create a flex container. We use the
display: flex CSS property to do this.
Step 1: Refer to the header class and transform it into a flex container using the
display flex property.

▪ background-color: white – It makes the background white in colour.

▪ justify-content: space-around – This property creates the required gap
between the 2 sub-containers.

Step 2: Change the colour of the heading “ART BLOG” to a colour of your choice.

12
MY BLOG

Part 5 – Align the navbar items.

▪ The navigation bar we created in the previous session using the <ul> tag is
not designed yet. It looks like a simple list of items.
Step 1: We want to align all the linked items in horizontal order using flex. We will
also increase the size and colour of the font and add padding to increase the gap
between the links.

13
MY BLOG

Step 2: To remove the circle bullets from the list items, use list-style-type: none.
To remove the underline, use text-decoration: none.

Part 6 – Create a carousel using Bootstrap.

Step 1: To use Bootstrap, visit www.getbootstrap.com. Click on Get Started.

▪ You will land on a new page.

14
MY BLOG

Step 2: Scroll down to the CSS section and copy the link.

Step 3: Open the index.html file and paste the copied link within the head tag.

15
MY BLOG

Step 4: To add the carousel, go to the Bootstrap website and click on Docs.

Step 5: In the next window, search for Carousel in the search box. Select the first
search result.

16
MY BLOG

Step 6: Once the carousel section is displayed, scroll down to the Slides Only
section and copy the code provided.

17
MY BLOG

Step 7: Open the index.html file. Within the carousel container, paste the code.
Remove the heading text from the previous session.

18
MY BLOG

Part 7 – Add images to the carousel.

Step 1: Inside the carousel code, find the <img> tag with the empty src attribute.
This is where we add the image name and its location.

19
MY BLOG

Step 2: In style.css, refer to the <img> tag inside the carousel container. Give it a
fixed height using the max-height property.

Part 8 - Add text to the carousel.

Step 1: Inside the Carousel container — just below the <img> tag — create a
container and give it a class carousel-caption.

20
MY BLOG

Step 2: Inside this container, add an <h2> tag and a <p> tag with text in them. The
text should describe the image.

Step 3: Increase the font size to make the text appear clearer. Since the <h2> and
<p> tags are placed inside the carousel-caption class container, we use that class
to refer to the heading and paragraphs.

21
 MY BLOG

Step 4: Repeat the process and add text for the remaining images in the Carousel

Output

22
 MY BLOG

Review

What are the different types of blogs?

What is Flexbox?
What is Bootstrap?

Closure

Try changing the background image and the text colour of the carousel.

23