DEV Community: Abubakar Abba Ali

Translating CSS Games in Real Life Webpages-4

Abubakar Abba Ali — Tue, 23 May 2023 12:01:49 +0000

Using Justify-content: flex-center
To Transform the Flexboy Froggy Game into a real-life webpage, here we will work on arranging a product list of items from the starting point of a web page that is the mid and center of the web page, as indicated below:

The Product list and item will be arranged including its labels that is the Tittle and price list, below is the code for the transformation of justify-content: center;

The Product list and item will be arranged including its labels that is the Tittle and price list, below is the code for the transformation of Justify-content: center;
I. HTML Code:
From this code below; all the product items are defined as classes, starting with the main container serving as the digital Shop shelf Rack, all the Product will be arranged in it.

II. CSS CODE:

justify-content:center; - Align a content or product at the center of web page and From this the class .productContainer was linked to the main HTML code using a dot operation(.) and display:flex; it is flexible container that keeps multiple items such as the justify-content, align-items and flex-direction. With it you will display your products both vertically and horizontally.

For the output of the Work, below webpage indicates the position of the Justified content at the center of web page that is the left-hand side similar to the Flexbox Froggy indicated below:

Translating CSS Games in Real Life Webpages-3

Abubakar Abba Ali — Tue, 23 May 2023 09:08:16 +0000

Working with CSS property justify-content
Cascading Style sheet CSS, has come up with a key property of aligning and organising our contents in web development, and to make it easy. People with interest have developed a lot alternatives to learn CSS by developing an online Games to understand the context and how to use the properties and its values, but the key challenge here how can we transform these ideas and from Gaming into reality.
For this purpose, we will be transforming a CSS Game Flexbox Froggy into a real-life scenario, that is by aligning a Product list of items with their price and labels.
Products list of items, in real life market and shops are arranged on shelfs rack with clearly written label for identifications, therefore with the high rise in Digital transformation most of our Markets and shop are transforming to take their Business to online sales. with CSS we can create an easier way to arrange our Product on Shopping Shelfs rack in web page, by using the following properties that is; Justify-Content Property of CSS.
Justify Content Property aligns contents horizontally with respect to its values:
To use the CSS property, you need to index it as pointer of aligning and connecting it with other part of the codes, for this project we are connecting CSS with HTML using Visual studio as our integrated development environment.

I. Code to assign, initiate the use of CSS in your Program

II. HTML Codes for the Product design and its labels.

With the two codes above codes, CSS can justify the content developed by the markup language.
As indicated below.
III. flex-start - Align a content or product at left hand side of web page.

From this the class .ProductContainer was linked to the main HTML code using a dot operation(.) and display:flex; it is flexible container that keeps multiple items such as the justify-content, align-items and flex-direction. With it you will display your products both vertically and horizontally.

IV. flex-end -Align a content at the end righthand side of web page.

V. Center-Align or placed a content at center of a web page.

VI. space-between - Provides spaces between items equally

VII. space-around - provides space around items equally

These CSS property syntaxes are playing a key role in arranging contents and product within a web page.

All the five syntaxes have been tested and transformed into a real-life solution, by arranging Online sales products within the web page.
For the Model or real-life application wire frame, all the product list will be arranged according the CSS property.
For all the Justify Content values, below are the Models of arranging them and the real life work:

for the source code and word documentation click on the link below:
https://drive.google.com/drive/folders/10KK7sbqR-SCdQi5CUbnCzD-9tOSrkR4V?usp=share_link

Translating CSS Games in Real Life Webpages-2

Abubakar Abba Ali — Mon, 08 May 2023 15:51:56 +0000

Let’s glance into the Game FLEXBOY FROGGY, By Playing the 24 first basic levels of the Game you will learn to align, direct and justify your content with the following properties:
align-items, justify-content, flex-direction, flex-wrap, and many more.
All listed properties come with values for the object or content, position, and behavioural manipulations using Cascading Style Sheets.
The link below it is a simple first step of the Game on your road to learning CSS.
From the clip, we tried to align the frog to stay on green the leave by using the property align-item and value flex-end and for the second level, we tried three different values to centre, space-between and space-around. where the frogs are aligned on the left with the value centre and for the two values the frogs were set away from the leaves.
https://www.linkedin.com/feed/update/urn:li:activity:7061075261949100032/

Translating CSS Games in Real Life Webpages-1

Abubakar Abba Ali — Mon, 08 May 2023 15:13:46 +0000

Web development, creation, or design doesn't only stop at the creation of interactive and friendly visuals that make our access, research, or works on the world wide web-friendly and easy. It came up with a new revolutionary trend of information management in our century.

For the creation of websites, we always need a handful of experience in technologies that will design and create a website, this Technologies kept us active and friendly in assessing the world wide Web, and this has made them an icon of imitation by upcoming aspiring technologist in the field of web creation, it is a big dream to all to learn and develop strong skills for.

To learn the skills for this development, you need to take a strong road map that is feasible and not time-consuming, most developers end up in Front-End design and development of the website, and others that are enthusiastic about it are cut short at an early stage due to low motivation, mentorship, and guide.

Most learners lose interest in the second stage of Front -end development which is Cascading Style Sheets-CSS, due to it difficulty in understanding the way to arrange your web content, even though nowadays UI/UX design has come up with solutions to some of the hitches.

To learn CSS-Cascading Style Sheets you must confront it and push it harder as it is the gateway to the next level of web development in the aspect of programming web content and managing data using JavaScript and Structured Query Language (SQL).

To make it easier there are a lot of sites providing Online Games to learn CSS-Cascading Style Sheets such as https://flexboxfroggy.com, https://lnkd.in/dfwDVmVQ, https://lnkd.in/dy6R4r3c, https://lnkd.in/dZPU-fZC, and many More Sites.

I will recommend you to start with https://flexboxfroggy.com, it has 24 level at first stage and it is quite easy and self-explanatory.

From the below picture, the Frogs are not aligned or on there respective color related leaf
After adding the line
#pond { display: flex; justify-content:center; }
The Frogs were aligned to there respective leaves.