DEV Community

Abubakar Abba Ali
Abubakar Abba Ali

Posted on

Translating CSS Games in Real Life Webpages-1

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.

  1. From the below picture, the Frogs are not aligned or on there respective color related leaf
    Image description

  2. After adding the line
    #pond {
    display: flex;
    justify-content:center;
    }

    The Frogs were aligned to there respective leaves.

Image description

Top comments (0)