Learning Flexbox: My Journey of Replicating Instagram's Layout

Srhiulli — Tue, 14 Mar 2023 00:29:38 +0000

As a beginner in web development, I wanted to learn how to create flexible and responsive layouts using CSS. I discovered Flexbox and decided to replicate the mobile version of Instagram's layout to test my new knowledge.

To begin the task:
1- I looked at Instagram's page source code and based my HTML on it.
2-To ensure the layout was accurate, I carefully checked the sizing, padding, border, and margin values of the page's elements.
3- I used Flexbox properties such as justify-content, align-items, and flex-wrap to precisely position and align elements on the page.

In resume what I discovered with it:

display:flex; defines an element as a flex container;
flex-direction: defines the main direction of elements within the flex container;
justify-content: defines how elements are distributed along the main axis of the flex container;
align-items: defines how elements are aligned along the cross axis of the flex container;
flex-wrap: defines whether elements within the flex container should be arranged in one or multiple lines;
flex-basis: defines the base size of a flex item, based if the display is in collumn or in row

Although it was challenging, taking me three days to complete, the experience taught me valuable skills and improved my understanding of Flexbox. I now have a better grasp of how to create modern, visually appealing layouts that are both flexible and responsive.

Take a look :D

srhiulli.github.io

Discovering the Magic of CSS and HTML

Srhiulli — Mon, 27 Feb 2023 23:11:45 +0000

I am thrilled to share that I have recently embarked on a journey of learning CSS and HTML. As someone who has always been passionate about the beauty things and design.

As I have started to explore the intricacies of CSS and HTML, I have been struck by the sheer power and versatility of these technologies.

CSS, for example, allows you to completely transform the visual appearance of a web page with just a few lines of code. You can adjust everything from the layout and positioning of elements to the fonts, colors, and animation effects used to bring the page to life.

HTML, on the other hand, is the backbone of every web page. It provides the structure and content that is then styled and formatted by CSS.

One of the most gratifying aspects of learning CSS and HTML is the immediate feedback you get from the browser. it's possibilities are endless, and the sense of accomplishment when you finally get your page looking just right is truly addictive.

Of course, learning any new skill takes time and effort.
There are times when I feel frustrated by the complexity that the code means to me, because I've never code before. But I am determined to persevere, cause I know that the rewards of mastering CSS and HTML will be worth it.

In conclusion, I am excited to be on this journey of discovery and growth as I learn CSS and HTML. It IS a challenging and rewarding endeavor that I believe will make a difference both personally and professionally

This is my first project:
https://srhiulli.github.io/MyFirstForm/

Thanks for reading :D

DEV Community: Srhiulli

Learning Flexbox: My Journey of Replicating Instagram's Layout

Discovering the Magic of CSS and HTML