DEV Community: FrontEndWebDeveloping

The Most Important Thing!

FrontEndWebDeveloping — Fri, 01 Nov 2024 13:25:34 +0000

Hello everyone! It's been a while since I've posted.

Today I wanted to tell you all about a WordPress blog I made, and why I made it (mostly why). This is the first WordPress site I've ever made.

My biggest learning curb was figuring out (with the free version of WordPress) how to make make different categories appear on different pages.

But, I did not build this site, primarily to learn WordPress. My primary reason was MUCH more important! I built this site so that people like you might know what terrible danger you are in, and that there is a way out. And also, so that you may know that you are missing out on the greatest joy ever, when you don't have to.

I created one post on the blog that is particularly aimed at this. This post will tell you about why you are in danger, what joy you are missing, and how you can escape the danger and have the joy. The answer to all of it is wrapped up in one person: Jesus Christ.

You can also hear about this in a YouTube video I created:

Feel free to reach out in the comments! I'd love to discuss. Or contact me here.

Where's the DEV discord server?

FrontEndWebDeveloping — Wed, 12 Jun 2024 18:27:44 +0000

Hello everyone. On brief question. Where can I find the DEV discord server? Thanks!

Null...

FrontEndWebDeveloping — Thu, 30 May 2024 22:37:52 +0000

Deleted...

Launching Into Front-End for Absolute Beginners

FrontEndWebDeveloping — Thu, 16 May 2024 22:05:07 +0000

Hello new devs, I'm almost still one of you. It wasn't long ago I was typing my fist line of HTML. I remember how overwhelming it was starting out. I tried to read articles, but fifty percent of terms that the authors used made no sense! Typing "beginner" in the search bar didn't usually help very much. Most things where still geared toward somebody who already knew a little bit, not for absolute beginners.

So, all that said, in writing this post I am trying to form a road map for any beginner, launching into front-end, even if they're an absolute beginner.

Front-End

Well, I think the first question would be, "what is front-end???" Now, I could dig real deep, and get very involved in answering this question, but it wouldn't do you any good, because I'd have to explain using concepts you have yet to learn. In a nutshell, though:

Front-end is the code that directly deals with whoever is using the software.

If you feel like the above sentence is too vague for you, just know, even experienced devs I talk to can stutter a bit when trying to outline the logical reason front-end is front-end. The best way to know what front-end is, is to learn it.

Learning Front-End

And so, how do you start learning front-end? Well, there's no one right way, there are just quite a few wrong ways. But, if I were to start rattling of wrong ways, it would overwhelm you. You don't need to be told where not to go. You need to be told where to go. So, I will outline a good starting course, that should serve you well.

Step 1 - HTML and CSS

What are HTML and CSS? In short, HTML is like the framework of a house. All the solid materials that make it up, such as two-by-fours and drywall.

CSS is like the paint, and outlet covers of a house. It turns a website from an ugly, spartan experience, to something that looks nice, and is visually appealing.

Now, how do you go about learning HTML and CSS? I would recommend the freeCodeCamp online course.

As the name denotes freeCodeCamp is totally free to use (they don't even have a premium version, so you won't be frustrated by constantly running into closed doors). They have a project-based learning course for HTML and CSS. It's great! Also, they have a very active forum, where you can get answers to any questions that come up, about the curriculum, or totally separate from it.

Step 2 - JavaScript

Once you have successfully worked your way through the HTML and CSS course, you'll want to move on to JavaScript.

Now, what is JavaScript? Well, let's go back to the house analogy. JavaScript is like the electricity and plumbing in you house. It's what actually makes you website more than a bunch of shapes, and some text on a screen.

JavaScript is what is called a "programming language." There are many different programming languages. They all have several things in common, and are all built on the same fundamental principles.

Now, freeCodeCamp does have a JavaScript course, but I do not recommend it. It moves way to fast, and never gives you a good grounding in the fundamental principles behind JavaScript.

Instead I would recommend you read a book. Yes, even if it doesn't seem as "fun," it will pay off in the end, trust me. The book I suggest you read is called You Don't Know JavaScript by Kyle Simpson.

It will teach you "the reasons why" in JavaScript. Read it from cover to cover (including the introduction, it matters!). It is an involved read, and you may find yourself re-reading each paragraph several times, but this fact just goes to prove that Kyle Simpson isn't just skimming the surface. He's explaining it thoroughly. As you read make sure to actually write the code as you read about it, that's key!

Step 3 - Go!

Now you should know enough to start building! But... where do you start with that? Well, I would personally recommend you join a group of developers. I have a particular group in mind. This group works on a project called Savvato's Mock Programming Job. This is a group of developers, at all different stages of learning, who are building several apps. You can join for free, with little to no experience, and you are welcome! It doesn't matter where in the world you are. At Savvato you will get hands on experience in a professional environment. I can say I've learned a lot by working there, and the mentality at Savvato seems to be "the more the merrier," so don't feel shy.

All you have to do to get started is click the provided link. It will direct you to an invite page, to join the groups channel on Discord. You'll need to sign into Discord, or create an account if you don't have one. With that done, all you have to do is navigate to the "getting started" channel, using the sidebar on Discord. Once you're in that channel type "Hello @haxwell, where do I start?" and you'll be directed from there.

Conclusion

I hope this piece of guidance I have just written is of great help to those reading it. If I was unclear in any point, feel free to tell me so in the comments, and I will amend my mistake. Also, if you have any front-end related questions, as a beginner, fell free to ask down in the comments, or you can contact me with my email below:

const email = "Ben_Leevey@proton.me";

All for now!

3 Keys too keeping CSS tidy

FrontEndWebDeveloping — Fri, 26 Apr 2024 02:10:55 +0000

Hello everyone! I think most of us would agree that CSS is not a very difficult language; but, on the other hand, a huge, messy page of CSS is very daunting. Tidy CSS is essential. Built into native CSS are three tools that can REALLY help keep CSS tidy if you just use them to good advantage. Today, we will take a look at these three tools.

CSS Variables

Just like in any programming language, CSS has variables which can hold a value. These variables can be really useful in many scenarios. For instance, if you are reusing a certain color again and again on a webpage, you can put it in a variable, and pass your variable into properties, as their value. If you do this with all your colors, you can change the whole color scheme of a page with comparative ease. Variables can hold any value you would give to a CSS property. Box shadows, line widths, opacities, you name it. This is really good for keeping you code readable, and easy to edit.

Now, let's take a look at the syntax for CSS variables:

Start out with a root selector like this:

:root{
}

All you variables will go in here. Now let's write our first variables:

:root{
    --button-color: red;
    --button-color-hover: rgb(200,100,100);
}

Now let's try out using our variables:

You see, our button worked quite nicely. Remmember, css varables don't just work for colors, they work for any value you would give a property.

The Ampersand Structure

This one is great for keeping your code from being cluttered. The ampersand structure is used for CSS pseudo selectors. In essence, you nest an elements pseudo selectors within the element's main selector, like this:

:root{
  --button-background: red;
  --button-background-hover: rgb(255,100,100);
}
button{
  background: var(--button-background);
  &:hover{
    background: var(--button-background-hover);
  }
}

If we were to run this code, we would have the same result, but our code is tidier.

CSS Nesting

Now, building on the concept of selectors inside of selectors, that we introduced with the ampersand structure, let's talk about CSS nesting. In CSS you can nest the selectors for child elements inside the selector for their parent. Like this:

HTML

<div class="input-holder">
  <input class="input">
</div>

CSS

.input-holder{
  display: flex;
  align-items: center;
  justify-content: center;
  .input{
    font-family: sans serif;
  }
}

Notice that I gave both my div and input elements classes, and I selected them using their classes. This is because, CSS nesting won't work if you try to select and element by their tag.

You can nest as many layers of parents and children as you like, with CSS nesting, and even use the ampersand structure within it. You could nest all your selectors if you wanted to, (though I wouldn't recommend it).

The Art of Using these Tools - Variables

I find a good rule of thumb with CSS variables is: "If you use the value more than twice in similar scenarios, create a variable." Now, admittedly, this may be extreme on my part, but I would recommend erring on the side of having too many variables, rather than not enough.

As far as naming your variables, make sure you name them a name that tells you what they hold, and make sure your names are structured consistently. For instance

:root{
    --button-color: red;
    --hover-color-button: white;
}

Would be an example of bad name choosing, whereas:

:root{
    --button-color: red;
    --button-color-hover: white;
}

Would be a correct matching of the structure of your names. This is important because, you will want to accurately remember the names of your variables (some IDEs will help you with this).

The Art of Using these Tools - Ampersand Structure

Ampersand structure is straightforward. When you are using CSS pseudo selectors, use the ampersand structure. To my knowledge, there is no advantage to not using them, whereas using them will keep you code much more navigable.

The Art of Using these Tools - Nesting

Now, this will take a little practice. The goal is to make your code as easy to navigate as possible. I would recommend, try to determine what main sections your page is split into, and nest all those sections' child selectors within the parent. For example:

With this page, you would want to nest everything inside the header, everything inside the top nav-bar, everything inside the canvas/tools toggle bar, and everything in the first tool pad, second tool pad, and third tool pad. Like this:

Don't neglect to nest! It's worth it.

Conclusion:

To sum up, I hope these tools will be of good use to you in you future styling endeavors. if you have any questions contact me with my email below:

const email = Ben_Leevey@proton.me

3D Ham Sandwich Animation V2.0

FrontEndWebDeveloping — Wed, 27 Mar 2024 16:06:16 +0000

So, I created a prior post with the first version of this ham sandwich. But, as time went by, a major improvement came to mind. I thought, instead of the sandwich spinning, and changing size, when hovered on, it would look much better if it came apart when hovered on. So, I edited my code and improved the sandwich in a few other ways too.

Now I submit the changed code as a second entry for the contest:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ham Sandwich</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section>
            <div class="top-bread">
                <div class="top-crust">
                    <div class="top-center"></div>
                </div>
            </div>
            <div class="mayo-and-hot-sauce">
                <div class="blob primary-blob"></div>
                <div class="blob blob-one"></div>
                <div class="blob blob-two"></div>
                <div class="blob blob-three"></div>
                <div class="blob blob-four"></div>
                <div class="blob blob-five"></div>
                <div class="blob blob-six"></div>
                <div class="blob blob-seven"></div>
                <div class="blob blob-eight"></div>
            </div>
            <div class="ham-edge-one">
                <div class="ham-layer-one"></div>
            </div>
            <div class="ham-edge-two">
                <div class="ham-layer-two"></div>
            </div>

            <div class="bottom-bread">
                <div class="bottom-crust">
                    <div class="bottom-center"></div>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

*{
    box-sizing: border-box;
}
:root{
    --ham-background: linear-gradient(
        45deg,
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160)
    );
    --ham-border-background: linear-gradient(
        45deg,
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180)
    );
    --ham-background-two: linear-gradient(
        45deg,
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120)
    );
    --ham-border-background-two: linear-gradient(
        45deg,
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140)
    );
    --trans-animation: margin-top 2s cubic-bezier(.99,-0.01,1,.99);
}
body{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
section{
    height: 300px;
    width: 600px;
    display: grid;
    justify-content: center;
}
section:hover{
    .mayo-and-hot-sauce{
        margin-top: -130px;
    }
    .ham-edge-one{
        margin-top: -70px;
    }
    .ham-edge-two{
        margin-top: -70px;
    }
    .bottom-bread{
        margin-top: -70px;
    }
}   
.top-bread{
    display: grid;
    z-index: 1;
}
.top-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.top-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
.mayo-and-hot-sauce{
    height: 0px;
    display: grid;
    margin-top: -168px;
    margin-left: 0px;
    background: rgb(255,180,170);
    border-radius: 200px 10px 200px 10px;
    transform-style: preserve-3d;
    transition: var(--trans-animation);
}
.blob{
    background: rgb(255,180,170);
    box-shadow: 0px 0px 4px 2px rgb(255,180,170);
    z-index: -1;
    transform: translateZ(-100px);
}
.primary-blob{
    position: absolute;
    width: 330px;
    height: 114px;
    margin-top: 10px;
    margin-left: 10px; 
    background: inherit;
    transform: skewX(-50deg);
    border-radius: 10px 40px 1px 30px;
}
.blob-one{
    width: 40%;
    margin-left: 245px;
    margin-top: 15px;
    border-radius: 30px 10px 25px 0px;
    height: 35px;
    transform: rotate(10deg);
}
.blob-two{
    width: 80%;
    height: 40px;
    margin-left: 45px;
    margin-top: 25px;
    border-radius: 0px 10px 90px 0px;
    transform: rotate(2deg);
}
.blob-three{
    width: 80%;
    height: 20px;
    width: 30px;
    margin-left: 20px;
    margin-top: 0px;
    border-radius: 0px 0px 25px 50px;
    transform: rotate(20deg);
}
.blob-four{
    width: 80%;
    height: 20px;
    width: 50px;
    margin-left: 220px;
    margin-top: -20px;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(10deg);
}
.blob-five{
    width: 50px;
    height: 25px;
    margin-left: 90px;
    margin-top: -22px;
    transform: rotate(-20deg);
    border-radius: 0px 0px 115px 80px;
}
.blob-six{
    height: 40px;
    width: 50px;
    margin-left: -40px;
    margin-top: -45px;
    border-radius: 16px 0px 10px 20px;
    transform: rotate(-20deg);
}
.blob-seven{
    height: 30px;
    width: 60px;
    margin-top: -30px;
    margin-left: 130px;
    border-radius: 0px 0px 25px 40px;
    transform: rotate(-15deg);
}
.blob-eight{
    height: 60px;
    width: 30px;
    margin-left: 330px;
    margin-top: -120px;
    border-radius: 0px 0px 20px 0px;
    transform: rotate(20deg);
}
.ham-edge-one{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background);
    padding: 0px 3px 3px 0px;
    z-index: -1;
    margin-top: -180px;
    margin-left: -15px;
    transition: var(--trans-animation);
}
.ham-layer-one{
    width: 370px;
    height: 128px;
    background: var(--ham-background-two);
    border-radius: 10px 27px 10px 24px;
}
.ham-edge-two{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background-two);
    padding: 0px 3px 3px 0px;
    z-index: -2;
    margin-top: -205px;
    margin-left: -14px;
    transition: var(--trans-animation);
}
.ham-layer-two{
    width: 370px;
    height: 128px;
    background: var(--ham-background);
    border-radius: 10px 27px 10px 24px;
}
.bottom-bread{
    display: grid;
    z-index: -3;
    margin-top: -220px;
    transition: var(--trans-animation);
}
.bottom-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.bottom-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}

Also, here's a link to the project in codePen.

If anyone has any improvement to suggest, please do. 😁

3D Ham Sandwich Animation

FrontEndWebDeveloping — Sat, 23 Mar 2024 23:42:03 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Ham sandwiches are my favorite lunch. Especially with Louisiana hot sauce mixed with the mayonnaise.

Here's My Code:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ham Sandwich</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section>
            <div class="top-bread">
                <div class="top-crust">
                    <div class="top-center"></div>
                </div>
            </div>
            <div class="mayo-and-hot-sauce">
                <div class="blob blob-one"></div>
                <div class="blob blob-two"></div>
                <div class="blob blob-three"></div>
                <div class="blob blob-four"></div>
                <div class="blob blob-five"></div>
                <div class="blob blob-six"></div>
                <div class="blob blob-seven"></div>
                <div class="blob blob-eight"></div>
            </div>
            <div class="ham-edge-one">
                <div class="ham-layer-one"></div>
            </div>
            <div class="ham-edge-two">
                <div class="ham-layer-two"></div>
            </div>

            <div class="bottom-bread">
                <div class="bottom-crust">
                    <div class="bottom-center"></div>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

*{
    box-sizing: border-box;
}
:root{
    --ham-background: linear-gradient(
        45deg,
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160)
    );
    --ham-border-background: linear-gradient(
        45deg,
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180)
    );
    --ham-background-two: linear-gradient(
        45deg,
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120)
    );
    --ham-border-background-two: linear-gradient(
        45deg,
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140)
    );
}
body{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
section{
    height: 300px;
    width: 600px;
    display: grid;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 2.5s;
    transform: rotate3d(15, 1, 1, 40deg);
}
section:hover{
    transform: rotate3d(1, 1, 1, 25deg) matrix3d(
    3, 0, 0, 0,
    0, 3, 0, 0,
    0, 0, 3, 0,
    100, 100, 0, 4
  );
}
.top-bread{
    display: grid;
    z-index: 5;
}
.top-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.top-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
.mayo-and-hot-sauce{
    height: 130px;
    width: 350px;
    display: grid;
    z-index: 4;
    margin-top: -163px;
    margin-left: 0px;
}
.blob{
    background: rgb(255,180,170);
    box-shadow: inset 0px 0px 4px 2px rgb(200,120,140);
}
.blob-one{
    width: 40%;
    margin-left: 245px;
    margin-top: 15px;
    border-radius: 0px 10px 25px 0px;
    height: 35px;
    transform: rotate(10deg);
}
.blob-two{
    width: 80%;
    height: 40px;
    margin-left: 45px;
    margin-top: 25px;
    border-radius: 0px 10px 90px 0px;
    transform: rotate(2deg);
}
.blob-three{
    width: 80%;
    height: 20px;
    width: 30px;
    margin-left: 20px;
    margin-top: 0px;
    border-radius: 0px 0px 25px 50px;
    transform: rotate(20deg);
}
.blob-four{
    width: 80%;
    height: 20px;
    width: 50px;
    margin-left: 220px;
    margin-top: -20px;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(10deg);
}
.blob-five{
    width: 50px;
    height: 25px;
    margin-left: 90px;
    margin-top: -22px;
    transform: rotate(-20deg);
    border-radius: 0px 0px 115px 80px;
}
.blob-six{
    height: 40px;
    width: 50px;
    margin-left: -50px;
    margin-top: -35px;
    border-radius: 16px 0px 10px 20px;
    transform: rotate(-20deg);
}
.blob-seven{
    height: 30px;
    width: 60px;
    margin-top: -30px;
    margin-left: 130px;
    border-radius: 0px 0px 25px 40px;
    transform: rotate(-15deg);
}
.blob-eight{
    height: 60px;
    width: 30px;
    margin-left: 330px;
    margin-top: -120px;
    border-radius: 0px 0px 20px 0px;
    transform: rotate(20deg);
}
.ham-edge-one{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background);
    padding: 0px 3px 3px 0px;
    z-index: 3;
    margin-top: -180px;
    margin-left: -15px;
}
.ham-layer-one{
    width: 370px;
    height: 128px;
    background: var(--ham-background-two);
    border-radius: 10px 27px 10px 24px;
}
.ham-edge-two{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background-two);
    padding: 0px 3px 3px 0px;
    z-index: 2;
    margin-top: -205px;
    margin-left: -14px;
}
.ham-layer-two{
    width: 370px;
    height: 128px;
    background: var(--ham-background);
    border-radius: 10px 27px 10px 24px;
}
.bottom-bread{
    display: grid;
    z-index: 1;
    margin-top: -220px;
}
.bottom-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.bottom-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
@keyframes spin {
    from {
        transform:matrix3d();
    }
    to {
        transform: rotate(360deg);
    }
}

Code Link

Here is a link to the code in CodePen: myLink

Journey

I started by using a simple paint app I had already built to draw a rough sketch of the sandwich, just to clear things up in my mind. Then I started on my HTML. I chose the class names according to the part of the sandwich I intended each element to represent. Except for the section, to hold the whole sandwich, (and the body) I used div elements for the whole creation.

Once I was done with the HTML I moved to the CSS. I started by defining my * selector's properties. I set the box-sizing and also I gave all the elements a border: 1px solid black property and attribute. From there I started at the top of the sandwich and worked my way down (except that I styled both pieces of bread at once), styling parents, then children. Once everything but the .mayo-and-hot-sauce element were styled, I put my sandwich together by setting the margin properties to appropriate values.

Then, I started on the .mayo-and-hot-sauce element. I added .blobs and styled them, until it looked good to me.

Finally, I added the animation to the section element. I've had little practice with CSS animations, so I had to play with it a while before it was to my liking.

With that, the project was finished. I learned several things. One would be, how to use the border-image property. It's really neat. I used it to give my slices of ham a gradient border to match their background properties. I also learned about the rotate3D and matrix3D properties of CSS.

In building the project I strove to make the sandwich appear 3D. This, along with realistic looking gradients, I would say are it's main high points, and the goal's I tried to achieve.

MIT License

Those early dev days.

FrontEndWebDeveloping — Mon, 18 Mar 2024 16:30:19 +0000

Hello everyone. I think we'd all agree, someone's first time learning software development can be a little strange. And certainly, peoples software development learning journeys are as varied as their thumbprints.

Often, there are interesting stories connected to our early dev days. These stories can be helpful to new developers.

For me, the way I got started was a little crazy and spontaneous. One day, on a whim, I just decided to see how hard is was to make a website. I got into WIX and had a very bad experience, but I still wanted to make a website. I wondered how hard it would really be to learn to hard code one, so I started the freeCodeCamp HTML and CSS curriculum. After three days, I decided that I liked this very much, and it was what I wanted to do for a living, and it went from there.

Now I like programming better than frontend, but frontend was where it all started.

How about the rest of you? Would any of you oblige us by posting any of your own "learning to code" stories below as comments?

Pre-Wednesday Challenge for devs.

FrontEndWebDeveloping — Sat, 16 Mar 2024 21:26:37 +0000

Hello everybody. I know you're all excited about the dev challenge starting on Wednesday. Well, I'd like to offer you guys a challenge now.

It's also a great chance to be benevolent. Kinda like donating to a charity (except it costs a little time, instead of money). In a nutshell, I'm offering you all a chance to help a young developer and hone you Java Script skills at the same time.

Now, here are the rules of the challenge.

To enter: simply comment at the bottom of the page. Comment like this: "I enter the contest."
To take the challenge: click this link: challenge link. Then just follow the instructions.
The prize: is two fold. 1st, I will click like on all your comments, 2nd, I will write a comment declaring you the winner.

The Small Print

Now, of course you will all want to know the identity of the struggling young developer. Well, I can answer your burning question with one word: me.

My thanks to all who participate.