DEV Community: Cristian Paul Castañeda

First Contributions: learn how to contribute to open source projects

Cristian Paul Castañeda — Tue, 29 Jul 2025 03:18:20 +0000

I followed the hands-on tutorial in the Readme of the first contributions and made my first pull request to the same repo.

firstcontributions / first-contributions

🚀✨ Help beginners to contribute to open source projects

Read this in other languages.

First Contributions

This project aims to simplify and guide the way beginners make their first contribution. If you are looking to make your first contribution, follow the steps below.

If you're not comfortable with command line, here are tutorials using GUI tools.

If you don't have git on your machine, install it.

Fork this repository

Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.

Clone the repository

Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button, then on SSH tab and then click the copy url to clipboard icon.

Open a terminal and run the following git command:

git clone "url you just copied"

where "url you just copied" (without the…

View on GitHub

What a great start to my open-source journey!

I’m excited to finally contribute to open-source projects, whether it’s writing documentation, refactoring code, or solving issues.
It feels rewarding to be part of something bigger and help drive innovation in even the smallest way.

Right now, I’m focused on understanding how open-source collaboration flows, especially how to avoid conflicts and align smoothly with project authors.
Another goal unlocked, and many more to come!

Is it truly for beginners?

The answer is. NO.

To make this blog clear before turning to misleading content.

If you were a beginner, you would need to learn the basics, DSA, and then build your projects. Focus on making your projects larger and complex. Get comfortable writing programs large enough that you can't keep up the whole thing in your head.

A good next step after that would be to use other open-source projects and explore them. That should be easy and natural as your projects get bigger. Make use of other open-source libraries and frameworks in your project. Start to explore their code. You can do it just a little at a time by debugging individual functions and methods that you call from your code.

It will lead you to start contributions. You'll call a function in some library, and it won't work correctly. You'll step through their code and discover that it doesn't do what you thought it should do, and it looks like it's fixable. And that's a good opportunity to start a contribution.

What are the projects you can start to build?

It should be complex.

It could be a clone like Facebook, Twitter, Google, etc. That will have enough functionalities to make you think.
And then you can use any libraries or frameworks that will help you to build a good UI, routing APIs, servers, databases, and more.

Tutorials and other learning videos

JavaScript - Derek Banas

JavaScript DSA Playlist

Java Programming - Derek Banas

Java DSA - Bro Code

C# - Derek Banas

Git - SuperSimpleDev

GitHub Actions: CI/CD

I hope this helps!

Equal heights

Cristian Paul Castañeda — Thu, 11 Jan 2024 10:07:01 +0000

I was working on a landing page website project. There's something I need to evaluate regarding the design of their Figma.

Since the boxes have their different parent and that parent is only displayed as "flex". The only thing that comes to my mind is manipulating them using a script or jQuery. jQuery because that is one library they use from their previous projects and as a developer I need to adapt their environments.

I tried this script.


  function cBoxItemHeight() {
    function getMaxHeight(className) {
      let max = 0;
      document.querySelectorAll(className).forEach(function (el) {

        if (el.scrollHeight > max) {
          max = el.scrollHeight;
        }
      });
      return max;
    }
    function setHeight(className, height) {
      document.querySelectorAll(className).forEach(function (el) {
        el.style.height = height + "px";
      });
    }
    let max = getMaxHeight(".s4__text-coating");
    setHeight(".s4__text-coating", max);
  }
  $(window).resize(function () {
    cBoxItemHeight();
  });
  cBoxItemHeight();

It will save you in the meantime. Hard code it later when you need to think about Vanilla JS. It also helps to follow the design in Figma when resizing the browser.

If you have any ideas. Code your power below.

JavaScript is

Cristian Paul Castañeda — Wed, 02 Sep 2020 10:44:20 +0000

While I'm enjoying the deeper side of javascript my mind goes like:

function foo() {
    foo()
}

foo();

Keep safe, enjoy learning.

Position is Everything

Cristian Paul Castañeda — Tue, 02 Jun 2020 04:57:05 +0000

How positioning works?

Positioning help us to control our elements into a place.

Here are the different types of positioning.

  position: static; /* default */
  position: relative;
  position: absolute;
  position: sticky;
  position: fixed;
  position: inherit;

Position: Static

A default position in every situation. It is always positioned according to the normal page.

Will it change if I position the element on top, right, bottom or left?

NO , it will become stated if you can position the element.

Position: Relative

A positioned relative to its normal position. It allows to direct in every position we decided.
When we don't declare any value to a position, it'll act like it's Static
We can use the top, right, bottom and left position to push every element.

Position: Absolute

A position that can remove the Element from the document flow and position itself in reference to a container and a container has to have a position assigned to it as well.
A container element has a relative position wonder why it is centered in the browser.
The text overlaps the image, just because both have positioned in Absolute

Position: Sticky

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. - Mozilla Foundation, MDN Web docs

The nav-bar container(parent) with icon(child) and navigation(child) set to sticky position

As you scroll the browser, the sticky container will continue appear as it flows.

At the initial of code the padding of your element will not set to auto
you need to declare:

   nav-bar { 
      /* using vendor-prefixed (-webkit and -moz) for specific browser */
              position: -webkit-sticky;    /* for chrome browser */
              position: -moz-sticky;       /* for mozilla browser */
              position: sticky;
              top: 0;
              overflow: hidden;    /* to fix the height of the container */ 
   }

Declared the overflow property.

Q: Why it doesn't work?

A: your browser is not supported.

Kindly check caniuse

Position: Fixed

Similar to position absolute, an element that has fixed position is taken out of the document flow. The major difference is: elements with position fixed is always positioned relative to the browser window.

I removed the paragraph element to a container and the result is container(parent) with an image(child) overlaps the paragraph.

How about the other attributes?

Inherit a position with the same value from its parent.

   parent-element { padding: 15px; }
   child-element { padding: inherit; }

The top, right, bottom and left It give us the permission to place every element with a set position e.g. Relative, Absolute and Fixed.

(-) Negative values for an attribute is accepted.

The z-index property manipulates the vertical stacking order of elements that overlap

Application that I used:
Balsamiq
Header Image
Udemy Master Class Header
Reference for Sticky Position
Mozilla Foundation
Browser Tool for browser compatibility
caniuse

New beginning

Cristian Paul Castañeda — Wed, 13 Nov 2019 03:46:45 +0000

Yes, still a beginner

This is my second blog from my post Beginners Life

And yea, that is connected to it... And I'm going back again as a beginner.

I quit my first job as an IT Support at a Private School where I can't handle my own time, I used to work on the things that don't relate to my job. I also work as a Custodian, I support the Multimedia Students to borrow things they need. Every day I tried to survive to the work I've been through, I'm happy, and I socialize to the students to the point that I want to learn photography and edit photos & videos. Still, being dedicated to a dream that I need, I realize programming is the career I want to pursue.

Going back to my post and totally decided to work on my skills first as a Developer. I think this is a good investment for me to start again to continue what I started.

And btw, one channel helped me from self-improvement is to listen from Matt D'Avella. I just want to share it with you.

Before I close this blog, I want some advice from you guys. I appreciate your time and attention from this post. Hoping to give it back soon to contribute what I can in our community.

✌ to us!

Beginners Life

Cristian Paul Castañeda — Tue, 19 Mar 2019 15:42:23 +0000

My first year here in the DEV.to. What a great experience inside this page and I am so grateful to be part of this growing organization. Where the developers can share ideas and advises the young from development.

I learned a lot of ideas when it comes to becoming a developer. It's kinda fun and at the same time, will make you burn out (If you stay all day on your seat). Learning new technologies, updating the syntaxes of codes (Well, hello, JavaScript!), and learning how to create content. I need more practice and socialize with the people that involves technology. It's a great thing also if I can find a mentor who can help me to improve my programming skills, and in the future, I want to help newbies how to start their career in programming development.

I know the best thing is coming and the grateful moment will be in our hands.

May the odds be in our favor! 🤝