Mini Step-by-Step Guide to CSS Positions

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Good day/evening!

A fellow member has asked a useful question about CSS positions. I have noticed it tends to be a topic that some learners struggle to understand, but also challenging for others to explain it. (I have been both positions).

So, I created a basic layout (via Codepen) explaining the process of some CSS positions with instructions to see how they work if you go step by step. I also aim to explain them without going too technical since this aims for learners who struggle to understand it (after all, we have MDN and W3S for this).

It is nothing fancy or amazing about it (especially design-wise) but the purpose is to keep it as simple as possible and hopefully, it will be helpful to you in the future.

Considering I would like to create my own blog in the near future, I really hope the instructions were clear and understanding and feedbacks would be greatly appreciated.

Here is the link: https://codepen.io/Madalena-Design/pen/bGbKJpB

Well, the weekend is here so have a good one while you can :slight_smile:

3 Likes