DEV Community: Mercy Ebulu

My Experience as a Mentee at the Godspeed Media Tech Mentoring Program.

Mercy Ebulu — Thu, 04 Aug 2022 22:40:00 +0000

On the 1st of December, 2021 I took it to medium to announce my acceptance into a mentoring program by Godspeed Media Tech in this article.
It has been a fantastic 3months journey as a mentee in this program. In this article, I will be sharing my experience as a mentee in this program, and how the past 3months have been for me as a mentee.

What is the Godspeed MediaTech LTD. Mentoring program about?

It is a self-paced training and mentoring program for promising Tech enthusiasts. It enables people who are interested in taking a step into Tech to learn and improve. This program will last for 3months, and in these months, Godspeed MediaTech LTD.
will offer the following benefits to participants:

A paid course in your track of study in Tech on Udemy.
Bi-weekly 6GB data for you to take your course smoothly.
Publish a bi-weekly article on medium sharing knowledge you've gained while learning.
One on one Bi-weekly review with the program coordinators. Interactive sessions with successful people from the participant's various fields.

This is super cool yeah? Why would anyone just starting in Tech not want such an opportunity?

Application and Selection Phase

It was almost Midnight, on the 6th of October, 2021. My friend Onyeogulu Tochukwu left me a message on WhatsApp telling me that Godspeed Media Tech was actively receiving applications for their mentoring program for Cohort 2. The next day, I sat in front of my PC to send in my application after I had carefully read through what the program entails and what would be required of me. I sent in my application and waited for a response on the next steps to be taken.
Fortunately, I received a mail for a first 30 minutes chat with a mentee from the previous cohort. I spoke with Austin, spent an hour speaking with him, and I asked all the questions I needed for clarity during the program.
A few days later, one of the program coordinators reached out to me for a chat with her on Google Meet. I picked a date and we scheduled a meeting for our chat. I had the friendliest chat ever with Miss Favour Barde. There was no pressure at all.

On the 23rd of November, I received a congratulatory mail about my acceptance into the Cohort for Mentoring. I was elated and ready to start this process.

The Journey to 3 months.

The 3 months mentoring program kicked off on the 1st of December, 2021. I was added to a WhatsApp group for the cohort alongside 8 mentees. We introduced ourselves, then the program coordinators gave us a quick rundown on how the mentoring program will go and their expectations of us.
I was registered under the Front-end web development track for this program and was sent a paid course on front-end web development by Gabrial Fatah on Udemy. This course is a complete web development course from scratch and I will learn HTML, CSS, JavaScript, Bootstrap, and Angular.
The First week I was motivated and ready to start my journey with so much enthusiasm. But I was faced with an issue, my laptop went bad in October. So I had no laptop to follow up on the course and work on hands-on projects. Nevertheless, given my strong will to succeed and the never-give-up attitude that I possess and have nurtured over the years, I choose to push forward by looking for an alternative means of getting a PC for the sole purpose of learning and advancing. I spoke to someone who lives close to me and asked if he could lend me his PC for 3 months and he agreed that I could use the PC at night and return it in the mornings. Asides from enjoying the numerous perks attached to these programs, there were tasks and obligations I was expected to keep up with to have a smooth ride on the program.
Below is a breakdown of my experiences throughout the 3 months of being a mentee.

Writing Experience.

Writing had never been a thing for me. I've had many writers as friends and I've often asked them how this writing thing works. Got to the Mentoring program and I was faced with the task of publishing an article here on medium bi-weekly. My first article took me over a week to put together but somehow through research, I figured out how it worked and I became better. I published an article here about JavaScript and it had over 1000 views I've never been more proud of myself. Additionally, my mentor Mr Labi reviewed bi-weekly publications and always gave me a thumbs up. These things motivated me to take up Technical Writing and I hope to take this Technical Writing thing big. I hope to contribute to the Tech space via writing and documenting my learning progress.

Bi-Weekly One on One

I guess you'd be asking what this means. Well, this is a term common to the Mentees at Godspeed MediaTech LTD. Mentoring program. As a mentee under this program, for accountability's sake, we had a compulsory bi-weekly one-on-one with the program coordinators to follow up on our learning progress and discuss other things that will help us sail smoothly in the journey. I had all my one-on-one Checks with Mr Labi Francis and those moments were priceless. He was helpful, he shared resources that will help me understand most concepts that seemed like a hard nut to crack, and he never failed to commend me for good work or article written.

Guest Speakers/Facilitators Sessions

One of the perks of being a mentee in this program is that you get multiple chances of having an interactive session with successful people from various fields in Tech.
The first session we had was with Ose Dania. One of the things he said that still rings a bell in my ear is "There is a space for everyone in Tech, There are opportunities everywhere you cannot afford to be mediocre". A few weeks later Mr Labi invited Kemi Adeleke to have a one-hour session with us, She shared how she transited into Tech and advised us to be hungry for knowledge.
We had other facilitators come to speak with us like Arlemi, Mr Abubakar and Deborah Emeni who shared with us endless opportunities obtainable in Tech and gave us tips on how to reach these opportunities.

Other Experiences

During the program, we had a day set aside to present any project we've worked on while learning. To be honest, I was a little bit scared and didn't know how to go about it. The day came, and I presented a project I worked on. SIGN UP FORM WITH FLOATING LABELS This helped me build confidence and pushed me to do more.
Significantly, I learned how to send google meet invites to a group or team on this program. I also got to know about calendly: an appointment scheduling software for any meeting type.
I learnt how to show up for meetings on time, even when I don't feel like joining and also pay rapt attention to what was said. Because Mr labi will need you to drop the things that stood out for you during talk sessions.
One thing I took out from this program is the importance of letting the world know what you are doing and your contributions to the Tech Ecosystem in that way opportunities would easily get to you. Also, the importance of social media platforms for creating visibility for yourself such as Twitter cannot be overemphasized.

Things I achieved in this program.

Improve my HTML and CSS skill.
Started coding JavaScript.
Published over 6 articles on medium and 1 on hashnode.
Followers on medium moved from 2 to 46 followers.
Learned how to create simple designs using Canva. I designed the thumbnails or cover photos in my articles.
Got accepted into AltSchool Africa School of Engineering.
Got selected for the Access Bank Advance Africa Scholarship to obtain a nano degree from Udacity. I will learn HTML, CSS, JavaScript and Python.
Completed the paid course that was sent to me on Udemy.
I finished the program as part of the Top 5 mentees and I was gifted a brand new HP laptop.

You can also look up most of the projects I worked on through CODEPEN.
Lastly, I will say this program gave me a wholesome experience as a newbie in Tech. Equipped me with lots of information that will guide me on the way to go. I am grateful to Godspeed MediaTech Ltd. and the Program Coordinators(Mr Labi and Miss Favour) for this life-changing opportunity. Now it is time for me to do more with what I have been equipped with.
Thank you for reading.

A Beginner's Approach to CSS Positioning.

Mercy Ebulu — Mon, 25 Jul 2022 17:28:00 +0000

CSS Positioning is one of those CSS features that has been around for quite some time but it is still in heavy use today. it's an excellent skill and a necessity to learn if you are going to be working on the web. Throughout this article, we'll explore the Position property in CSS, its many values, and how they all function.

What is the CSS position property?

The CSS position property determines how elements are positioned within an HTML document.
The terms top, right, bottom, and left are used in conjunction with the CSS position property. It is important to keep in mind that if you use CSS positioning, your items will always be positioned using the four keywords top, right, bottom, and left position. You will always be working with these four keywords, whether you use em, rem, px, or any other CSS unit of measurement. It's also important to keep in mind that while using CSS positioning, you are always offsetting from the keyword you employ. Let's examine this simple example to better understand what offset in CSS positioning entails.

.box-1{
  position:relative;
  top:100px;
}

So as you have seen here we used the keyword top and what that means is that it is our box is going to be offset or pushed away from the top edge based on the value assigned to the top property. In this illustration, our box moved 100px down away from the top edge.

CSS Positioning Values

From the image above, we can see that we have the positive(+) values pointing inside and the negative values (-) pointing outside the box. The meaning of this is that positioned elements with positive values will offset inward and negative values will offset or push outward.

Normal Flow in CSS

In HTML and CSS, we have an order in which elements are stacked, just like in the real world where we have systems and procedures following an order or process. This sequence is referred to as the normal flow in CSS. Before any changes to this layout are made, block and inline elements are shown on a page in accordance with the normal flow or flow layout. According to the CSS 2.1 Specification

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in a line formatting context.

Put simply, the order in which elements appear or are stacked from top to bottom without any changes to the elements' positions is known as the "normal flow" of a document.

There are five fundamental types of the CSS position properties you should know:

1.Static
2.Relative
3.Absolute
4.Fixed
5.Sticky.

To better grasp how they operate and when to use them, let's go over each of them with examples.

Position: Static

This is the default position for all HTML elements within an HTML document. This means that an element's position will be set to static even if you don't declare it in CSS. Keep in mind that a static position is equivalent to not specifying the position property at all. All elements positioned static are not affected by the top, right, bottom and left properties used when positioning elements in CSS.
Let's use the position:static property in this example.

.main{
  position:static;
  top:30px;
  right:30px;
  background:red;
  padding: 15px;
}

As we can see, the position:static property has no effect on the element that was set to a static position.

Position: Relative

Relative Positioning helps us to move or position our elements from its original position to anywhere we want it to be. Unlike elements positioned static, relative positioned elements are affected by the top, right, bottom, left, and z-index properties. Relative positioning does not remove elements from the document flow. Relative positioned elements do not modify the document flow visually. They just simply move visually and the other elements appear where they should appear in the normal document flow.
Using the same illustration above, we are going to change our position property on the .main element to relative position to help us understand how relative positioning works.

.main{
  position:relative;
  top:20px;
  right:30px;
  background:red;
  padding: 15px;
}

Notice that the right and top properties now affect the position of the element. Also notice that the element remains in the normal flow of the document and the offset is applied relative to itself. Take note of this as we move on to other values.

Position: Absolute

Compared to relative positioned elements, absolute positioned elements are positioned differently. Elements that are absolute positioned are placed in relation to the nearest contained or parent element. In contrast to relative positioned elements, which are positioned according to themselves, the position of the nearest container or parent element serves as the basis for positioning absolute positioned elements. Therefore, while using absolute positioning, the parent element and the child element are constantly in play. The element to which position:absolute will be applied is the child element. You should keep in mind that with absolute placement, a parent element is always involved.
Let's get back to our example. In this case, we change the position of the main element to position: absolute. We will also give its parent element div a relative position so that it does not get positioned relative to the html element.

div{
  position:relative;
  border:10px solid blue;
  padding:10px;
}
.main{
  position:absolute;
  bottom:70px;
  right:40px;
  background:red;
  padding: 15px;
}

Notice that no space was created in the document for the element. The other element immediately acted as though the .main element never existed in the document flow. The element is now positioned relative to the parent element div.

Position:Fixed

Similar to absolute positioned elements are fixed positioned elements. They are also excluded from the document natural flow. They are always positioned relative to the html element, unlike elements that are absolutely positioned.

One thing to keep in mind is that scrolling has no impact on fixed positioned elements. On the screen, they remain in the same place at all times.

html{
  height:800px;
}
div{
  border:10px solid blue;
  padding:10px;
}
.main{
  position:fixed;
  bottom:80px;
  left:80px;
  background:red;
  padding: 15px;
}
.child{
  background:green;
  padding:15px;
}

in this case, the .main is positioned fixed. Try scrolling to see that the element gets fixed on the screen.

Let's move to the final value.

Position:Sticky

position: sticky combines position: fixed and position: relative. Up to a specific scroll point, it behaves as a relative positioned element; after that, it behaves as a fixed positioned element. Don't worry if you don't grasp what this implies; the example below will clarify it for you.

div{
  position:relative;
  border:10px solid blue;
  padding:10px;
}
.main{
  position:sticky;
  top:100px;
  background:red;
  padding: 15px;
}

Scroll on the result tab to see the result. You see it acts as a relative element until it gets to a certain point on the screen, top: 100px and then it gets there just like a fixed element.

Conclusion

We now understand CSS positioning. I hoped this post would be helpful to you. Feel free to experiment with the codepens if you don't fully understand them. To see the impacts, try experimenting with various values. Even better, try using the position property to work on a side project. Don't forget to send in your feedbacks; I'd love to hear your thoughts.

I am open to connection on Twitter