Forem: Hsabes

Ruby Code Challenge: Sum of all primes within an array

Hsabes — Tue, 15 Nov 2022 05:09:00 +0000

A prime number is a number that is only divisible by itself and 1. Today I'll be walking through a fundamental algorithm problem you may see in coding assessments: Finding all the prime numbers in an array, and generating their sum.

Input

arr = [2, 5, 10, 12, 7, 2, 11, 4]

Output

--> 27

Find a single prime

Before you can find a multitude of primes within an array, we need the capability of determining whether or not a single integer is a prime number.

num = 5

def is_prime?(num)
    # Your code here
end

First step is to create an array of values we will be dividing our integer by. Since we don't need to check 1 and the integer we're testing, we can leave those out of our range.

def is_prime?(num)
    (2...num).to_a
end

--> [2, 3, 4]

We've created an array of values from 2 to the number we are testing, now we need to select the values that DO divide into our integer in question.

def is_prime?(num)
    (2...num).to_a.select{ |divisor| num % divisor === 0 }
end

--> []

If our integer truly is a prime number, our return should be an empty array. If it isn't prime, it will be filled with a bunch of values that divide into the non-prime integer. Lastly, all we have to do is evaluate presence of values inside the array to determine whether or not we have a prime number.

def is_prime?(num)
    (2...num).to_a.select{ |divisor| num % divisor === 0 }.length === 0 ? num : false
end

--> true

However, since this is only the first step, we will need the actual number instead of just a boolean telling us it's true. If the method we've written evaluates to true (meaning it's a prime number), we'll need that value for later.

Find multiple primes

Create your method:

def find_and_sum_primes(arr)
    # Your code here
end

This process is very similar to the previous one, but the method we've already written is going to do all the work for us. First, create an empty array inside the method. This will soon house all the prime values in the array being passed as an argument. Then iterate through the input array using select:

def find_and_sum_primes(arr)
    primes = []
    arr.select{ |num| # find if num is prime }
end

Thankfully, we can just call the method that we've already written to determine if the specific value being selected is in fact prime. Once we have a prime number, push it to our primes array and sum the values

def find_and_sum_primes(arr)
    primes = []
    arr.select{ |num| 
        if (is_prime?(num))
            primes << num
        end
    }
    primes.sum
end

--> 27

Thank you for reading!

Code challenge: Make it make sense

Hsabes — Tue, 01 Nov 2022 06:14:26 +0000

You're given a string that contains several words, each word interjected with a number. Your task is to write a function that sorts the words based on the numbers that are contained within them. The function should return the sorted words still containing their respective numbers.

Input:

"doi4ng y3ou 5today h1ow ar2e"

Output:

h1ow ar2e y3ou doi4ng 5today

Solution:

This is one of my favorite problem because you can use an iterating and sorting technique I find very fun. The first step is to convert our string into something we can work with by splitting it into an array.

function order(string){
  return wordsObj.split(" ")
}

Output: ["doi4ng", "y3ou", "5today", "h1ow", "ar2e"]

The objective here is fairly simple, we need to sort the numbers from lowest to highest. How can we do that when they are in a string? Regex and iteration.

function order(words){
  return wordsObj = words.split(" ").map((element) => ({ num: element.replace(/[^0-9]+/g, ""), word: element}))
}

We've mapped through our array and for each word we've created an object with a number and its associated word. Using regex, we can extract the letters from each element, leaving us with just the number. Since we want our final output to contain the number, we'll leave the word alone. This will return:

[
  { num: '2', word: 'is2' },
  { num: '1', word: 'Thi1s' },
  { num: '4', word: 'T4est' },
  { num: '3', word: '3a' }
]

Now all that remains is sorting these objects by their number, and then extract out words.

function order(words){
  const wordsObj = words.split(" ").map((element, i) => ({ num: element.replace(/[^0-9]+/g, ""), word: element}))
  return wordsObj.sort((a, b) => a.num - b.num)
    .map((object) => object.word)
    .join(" ")
}

Output: "Thi1s is2 3a T4est"

Clean refactor:

function order(words){
  return words.split(" ")
    .map((element, i) => ({ num: element.replace(/[^0-9]+/g, ""), word: element}))
    .sort((a, b) => a.num - b.num)
    .map((object) => object.word)
    .join(" ")
}

Source

Create a chess board with Vanilla JS

Hsabes — Mon, 31 Oct 2022 05:47:40 +0000

In this tutorial I'll run you through the steps for creating a chess board. Creating a chess board covers very fundamental skills for a JavaScript developer, including conditionals, loops, and iterator methods. Enjoy!

Step 1 (Assuming you have your files set up)

Create your HTML boilerplate. Here's mine:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Chess</title>
        <link rel="stylesheet" href="styles/styles.css" />
        <meta charset="UTF-8" />
        <script src="scripts/index.js" defer></script>
    </head>
    <body>
        <div class="chessBoard"></div>
    </body>
</html>

This is a very basic boilerplate for our HTML file. Notice we have linked our CSS and JS files with the <link> and <script> tags. It's important to note that I've included a defer attribute. If this is not included your scripts will not execute.

Step 2

Style the ".chessBoard":

div.chessBoard {
    width: 800px;
    height: 800px;
    border: 5px solid #000;
    margin: auto; // centers board
    line-height: 0px; // no line space on inline-blocks 
}

Here we've styled the border for the chess board which will inhabit all of the tiles for the board. The board itself is 800x800 pixels, and each tile will be 100x100 pixels. margin: auto; will center the board. Since the squares themselves will be inline-blocks to get them to wrap, they will behave as text does and automatically create vertical space above and below them. To prevent this, we add line-height: 0px; to the parent element of the squares.

Step 3

Render the squares:

function renderSquares(){
    let numOfSquares = 0;
    const chessBoard = document.querySelector(".chessBoard")
    const chessSquareArray = []
    while (numOfSquares < 64){
        chessSquare = document.createElement("div")
        chessSquare.classList.add("chessSquare")
        chessSquareArray.push(chessSquare)
        numOfSquares += 1;
    }
    chessSquareArray.forEach((element, i) => {
        determineSquareColor(element, i)
        // determines square color in separate function
    })
    return chessSquareArray.forEach((element) => {
        return chessBoard.append(element)
    })
}

renderSquares()

Here we have written a function that handles creating the squares and appending it to the board. We declare a variable called numOfSquares, and initialize it to 0. Then we grab the chess board, and create an empty array that will begin to house the squares momentarily. We write a while loop that conditionally runs based off the value of numOfSquares. Since we want 64 squares, that's what we base our loop off of. Each loop we are creating a div element, assigning it a class name of "chessSquare", and pushing it to the array (don't forget the increment!). Now that we have an array of all 64 squares, we iterate through it and color each one based on its position in the array. Take a look at the function below. After this, for each element in our now-styled array of squares, append it to the chess board.

Step 4

Add logic for coloring the squares:

function determineSquareColor(element, i){
    if ((i >= 0 && i <= 7) || (i >= 16 && i <= 23) || (i >= 32 && i <= 39) || (i >= 48 && i <= 55)){
        return i % 2 === 0 ? element.style.backgroundColor = "#FFF" : element.style.backgroundColor = "#000";
    }
    if ((i >= 8 && i <= 15) || (i >= 24 && i <= 31) || (i >= 40 && i <= 47) || (i >= 56 && i <= 63)){
        return i % 2 !== 0 ? element.style.backgroundColor = "#FFF" : element.style.backgroundColor = "#000";
    }
}

The logic that handles coloring the tiles. The first row contains 8 tiles, beginning with a white tile and ending with a black tile, and vice versa each row. It's not enough to just evaluate the position of each tile based on its odd or even placement in the array. This is because each row begins and ends with a different color. We need to write two if statements. The first one determines the colors of each square for the rows that begin with a white tile. The second one determines the colors for the rows that begin with a black tile.

Remember, the reason we have access to the elements we're coloring is because we passed them in as arguments from renderSquares().

Step 5

Add dimensions to squares:

div.chessSquare {
    width: 100px;
    height: 100px;
    display: inline-block;
}

Adding these properties and values will make your squares flush with the edges, and wrap them perfectly so all 64 squares fit to the board.

Conclusion

And there you have it! This is a great way to exercise the basics of JavaScript such as conditionals, loops, and iterator methods.

Code Challenge: Sort only odd or even integers

Hsabes — Mon, 24 Oct 2022 18:19:12 +0000

This problem addresses a skill in coding that caused me much confusion early on in my career; segregating values based on their value (odd, even, letters, symbols, etc.), and not their data type (number, string, etc.). This problem exercises that skill, and I will walk you through step by step how to solve it.

Task

You will be given an array of numbers. You have to sort the odd numbers in ascending order while leaving the even numbers at their original positions.

Input

[1, 5, 2, 4, 71, 432, 0, 3, 9]

Output

[1, 3, 2, 4, 5, 432, 0, 9, 71]

Solution

The first thing we need to think about is how we're going to modify only the odd numbers. We can achieve this by declaring a new array with the filter method, and filtering out the odd numbers.

// -> [1, 5, 71, 3, 9]

Now when we call our function, we should return an array that contains just the odd values of the original array. Now we need to sort them.

// -> [1, 3, 5, 9, 71]

Great, now we have our array with odd numbers that are sorted in ascending order. I want you to think ahead here, what is your final return going to be? Are you going to be returning the original array? Or this new array?

Final step

Mapping through an array can be extremely valuable. JavaScript's map method can take up to three arguments: the element in the array, the index of the element, and an array. For this we'll only be utilizing the element and its index. In this case, we will only be accessing the elements that are even.

So now we have access to the even elements and the index they were at in the original array, exactly what we need. The last thing we need to do is insert them into the array of sorted odd values we created earlier, and we have our solution.

The splice method works here, because we can use it to insert values by specifying 0 as the second argument. The first argument of splice accepts the index the value is being inserted at, the second argument accepts an integer whose value is used to determine how many elements will be deleted past the insertion index, and the last argument accepts the value being inserted. If we pass 0 in, splice will not delete any values past the value being inserted.

Now all we have to do is return our oddArr, and smile at our solution.

// -> [1, 3, 2, 4, 5, 432, 0, 9, 71]

Stretch deliverable

Let's say instead of passing in an array, we have a string of values that can contain anything under the sun. Letters, numbers, and symbols/special characters (assume numbers are only 1 digit). For example:

Input

"3f6em8[10}2$*./4,1!~5d"

Output

[1, 6, 8, 1, 0, 2, 4, 3, 5]

This may seem very daunting at first, but let me introduce you to the magic of regex. There's a few extra steps we need to take because we're dealing not only with different values, but a different data type entirely; a string instead of an array.

The first step is to get rid of everything that we don't want, in this case letters and symbols. We can do this using regex since we're dealing with a string, and then split it into an array:

// -> ['3', '6', '8', '1', '0', '2', '4', '1', '5']

Great, now we have something to work with. Since we're able to sort numbers as string the way we normally would, everything stays the same up until the very end.

We'll start by creating our oddArr again, then inserting the even numbers into that array at their respective index.

And there's our solution!

This output is correct, but not entirely. When we originally obtained just our numbers, the regex extracted the integers but the split converted them into an array of strings! All we have to do to remedy this problem is parseInt the values of our array.

I hope you found this guide insightful and maybe you can use this kind of solution in other problems you face in the future!

Source

React and Rails: Using Active Storage to update a user's profile picture

Hsabes — Wed, 24 Aug 2022 23:25:00 +0000

Ever heard of this thing called FaceBook? Every once in a while we snap a pic that features our good side so much we just have to put it on display and make it our profile picture. When you hit that "Edit Profile Picture", it opens upon a window on our local machine to upload a file, bypassing the need to utilize a web URL from something like Imgur. I'll be walking you through how to do this using active storage via a patch request to a user in our database. This guide assumes a few things: You are using React front-end, Rails back-end, and have a database with a User that has a profile-picture type column to hold the file (we can add this last one if you don't). If those three things check out for you, then let's get started.

Setting up Rails

The first thing we need to do is install Active Storage. In your terminal, run this command:

rails active_storage:install

This will create some tables that handle most of the leg work for you. Check your migrations, you should see something like this:

All we need to do from here is migrate the changes.

rails db:migrate

For my project, I created a column in my User table called "avatar", with a data type of a string. The column can be called anything, but I suggest using something that indicates it should be some sort of file. If you check your schema, you'll see the migrated tables reflected from your migration.

Serializer

All you need to do here is replace the word avatar in my serializer with whatever column in your user table is supposed to hold the image file.

Do not forget to include Rails.application.routes.url_helpers!

Model association macro

In your user model, create a has_one_attached :avatar association.

Controller

Your controller can stay pretty much the same, just make sure in your params method you include the image attribute from your User table.

What if I don't have an image in my user table?

rails g migration addImageToUsers image

rails db:migrate

This will create a new table that adds the image column to our user table, and updates the schema when we migrate these changes.

Setting up React

For my project, I used MUI for styling. It doesn't change too much if you aren't using MUI, but this guide will show you the React setup with MUI.

State

This is all you need to hold the data when it comes to a patch request:

Form

There's a few things going on here for the form, so let's go line by line.

Line 131: Create the form element.
Line 132: This grid item holds the button that we use to select the file from our local machine.
Lines 133-140: The text in this button will change depending on if an image has been selected using a ternary expression. If the image has been selected, display the name of that image. If not, display "Change Avatar"
Line 136: Input. Here we declare what type of input it is (136), what kind of file it can accept (137), the fact that it should be hidden (138), and the onChange function that will change our state variable to the image that we have selected (139).
Line 142: Here is another ternary. If an image has been selected, then we will display the submit button that is responsible for running the function that makes our patch request. If no image is selected, no button will appear.

Making the request

Now it's time to write out our handleSumbit function that is responsible for carrying out our request. You will need a current user object in the component you're making request so Rails knows which user you are sending the patch request to.

In our new FormData() variable, we're setting the value of our image column on the database to the state variable holding the file, in this case a user's avatar. The string in our append represents what's in our schema, and the variable next to it represents the file that's been uploaded to our state variable.

For debugging purposes, if you want to check to see if a file has been uploaded before making the patch request, console.log(avatarData) outside of the patch request. When the file has been uploaded (but not sent), in your browser console you should see a file object holding the information about the file being uploaded.

That's it!

This is all you need to get Active Storage up and running. Having said that, getting Active Storage to run properly the first time you've learned it is... challenging. So here's some resources you can use to clarify any potential problems:

https://edgeguides.rubyonrails.org/active_storage_overview.html

https://dev.to/jblengino510/uploading-files-in-a-react-rails-app-using-active-storage-201c

Rails: Self Referential Tables

Hsabes — Thu, 04 Aug 2022 19:30:00 +0000

For Sunday Night Football we crack open some cold ones with the boys, our friends. In other words, we're interacting with our friends. Virtually every social media application that has ever existed has some form of interaction between a user and their friends. You can message them, play games with them, tag them in posts, or add new friends... but what's actually happening on the back end? From a rails stand point, you can use Self Referrential Tables.

What are self referrential tables?

Take my previous Sunday Night Football example; we're interacting with friends right? But the word "friend" is a word we use to explain the relationship between two people. This is the basis of self referrential tables. A user has_many friends, but in technical terms, a user has_many other users. Self referrential tables are very confusing at first, so I'll give you some examples on how this data dance looks on the backend.

Models, serializers, and controllers... oh my!

For a self referrential table, we need two models (assuming a social media application for this example): The users, and the relationship: friends. Through this friends table you'll be able to connect users different ways. In this example we'll be looking at a following system. Take a look at this User.rb model from a recent project of mine:

User.rb has_many catpanions, that's the name of the self referrential table connecting users. So what's this has_many :friends, through: :catpanions business? Well, let's now take a look at the Catpanions.rb model:

So a catpanion belongs_to a user, but also belongs_to a friend. We haven't made a friend model, so what's going on here? We've essentially told Ruby that there's other instances called friends that are really just instances of the User class. Now we need our foreign_keys.

These IDs are accessible because we declared our relationships when creating the resources:

With all this set up, in order to create a friendship between two users you'll have to create the route in the controller handling the self referrential table.

When we fetch this route, we're telling the engine to first see if the user we're trying to add already exists in our friendships. If so, throw an error. If not, you have a new friend! The params used for the create should be the user_id and the friend_id. If you create a route that shows all the friendships, it should look something like this:

Keep in mind, the user_id is the current user, and the friend_id is the person that they have followed. For the final touches, we want a way to access the people we've followed, right? In your user serializer, add the attribute :friends:

Now if we take a look at a specific user, our data will reflect their friendships with the users they have followed:

This kind of data can be extremely powerful when establishing some form of connection between users. If you're feeling a little overwhelmed don't worry, I had to play around with this concept for days to feel comfortable enough to use it in a project!

Let's talk about burnout

Hsabes — Thu, 21 Jul 2022 06:33:09 +0000

Introduction

Let's take a moment and talk about something every programmer ever has and will experience. As the tags for this blog suggest, burnout is accrued by any programmer no matter what stage in their journey they are at. Whether you're just starting to learn or have been in the biz for years, ignoring workplace indicators, symptoms, and approaches to resolving burnout will incur a tax to your digital lifetime. Let's face it, sweeping this problem under the rug isn't enough fix it. So, let's talk about burnout.

What is it, and what causes it?

Burnout is a form of mental exhaustion caused by constantly feeling overwhelmed. Generally speaking, burnout is exclusive to workplace duties, in the form of prolonged mental or physical distress. Outside of the world of technology, not much is understood about the projects we build for every day use. This can lead to pretty unrealistic expectations when building websites or applications for clients. That said, this relentless exhaustion can be the result of various culprits. A 2021 study by Haystack shed some light on the reality of burnout:

83% of software developers experience burnout
The top reasons for burnout: 47% said it was due to high workloads, 31% cited inefficient proccess, and 29% answered unclear goals/expectations.
And many, many more reasons:

The glaring thing about these reasons isn't the most common ones, it's the least common one. Only 1% of software developers didn't know what the cause of their burnout was.

Signs of burnout and ways to address it

According to WebMD, the signs of burnout can include exhaustion, alienation from workplace activities, reduced performance, and lack of enthusiasm. Ideally, these are all things we want to avoid in the field of work we love, so how can we address these problems for a healthier mental state?

Setting expectations with your supervisor can be a great start if you are unclear about the goals they have set with you, or are constantly moving goal posts. Our job is hard enough, being confused about the finish line is the last thing we need.
During my studies at Flatiron School, my cohort would meet at the end of the day and talk about our roadblocks. Without a shed of doubt in my mind I can confidently say the most common roadblock in my cohort was lack of sleep. Getting good sleep not only keeps us physically in tune, but mentally sharp. Being down in the dumps after a 4 hour sleep night will take a pretty big toll on your performance (especially if you're working in an office and can't take the cherished nap).
Exercise. Exercise. Exercise. Have I mentioned exercise? This helps trumendously with a wide variety of issues programmers face day to day. Mental sharpness, posture, and motivation... to name just a few. If you can't make it to the gym, get outside for some fresh air and walk around the block. I find that this is particularly helpful if I'm stuck on a tough problem. Stepping away from the computer for a breath of fresh air for 10 minutes somehow gives me the ability to solve a problem I've been working on for hours.
Work/Life balance. Don't compromise on the things that you love! Whether it's an evening hobby or cracking open some cold ones with the boys for Monday Night Football, we can't completely sacrifice the things we love to do in the name of hitting that deadline (within reason). What are some of the things you do in your spare time to take your mind off work? (It's disc golf for me)

Conclusion

Burnout is a very real reaction to common workplace struggles especially as a developer, don't ignore it, fight it!

Directed Graphs, Strongly Connected Components, and Kosaraju's Algorithm

Hsabes — Fri, 15 Jul 2022 20:17:36 +0000

As software engineers, one of the most daunting part of our career is facing algorithm problems in a technical interview. Algorithms can range from simple, testing only basic knowledge of a programming language, to advanced. The topic of this blog post will be about Strongly Connected Components and Directed Graphs, something you may experience in a technical interview.

Directed Graphs

Simplified, a directed graph is a type of graph the utilizes vertexes connected by arrows, or edges. These edges can be referred to in two different ways, either indegree or outdegree. A vertex that has 1 indegree edge has an edge that points to that vertex. If it also has 1 outdegree edge, it has an edge pointing outward to another vertex. Here is a simple directed graph:

If you look at vertex 11, you'll see it is has several edges pointing to it, and several edges pointing to other vertexes. In total, there are 3 outdegree edges and 2 indegree edges for vertex 11. This is the basic structure of a directed graph.

Strongly Connected Components

So what are strongly connected components? Well, we've all seen a graph like this:

We have two separate components, both with a few individual nodes in each component. These components are not connected in any way, because there is not common node between the two components. As such, there is no way for any node in the left component to reach any node in the right component. But what happens if they do share a common node?

Now that they have a common node, any node within the left component can be reached from the right component, and vice versa. Here is another way to visualize this:

What previously was two separate components connected by a common vertex in a directed graph is now joined into one strongly connected component, and there is no need to visualize it as two separate components but rather one strongly connected component:

Kosaraju's Algorithm

To first understand Kosaraju's Algorithm, we'll need to understand further how strongly connected components exist in a directed graph. The following screen shots shows several vertexes. Can you identify which vertexes are strongly connected? How would you re-write this directed graph to represent the existence of strongly connected components? How many strongly connected components are there?

Take a moments and think about it!

Here's the solution:

The solution to the problem is 2 strongly connected components. But what if we have a directed graph like this:

It may be much harder to visualize the amount of strongly connected components in a directed graph in which each vertex has several indegree and outdegree edges. Luckily for us, this is where Kosaraju's Algorithm comes into play. The purpose of the algorithm is to find the amount of strongly connected components in a directed graph. Kosaraju's Algorithm is extremely complex, so here's a resource that implements it in a practical situation:

Conclusion

Hopefully this blog will serve you in some way when you begin interviewing for software engineering positions. You never know, you may come across a directed graph problem!

Three beginner CSS tips to make your life easier

Hsabes — Sat, 18 Jun 2022 00:38:48 +0000

When I started learning how to code, the first two languages I learned were HTML and CSS. Like most people, I found HyperText Markup Language to be fairly straight forward. The element names were intuitive, the structure made sense, and was fairly easy to memorize the more discrete details. Cascading Style Sheets was starkly different in comparison, especially for a beginner. I found myself caught in a lot of frustration trying to figure out why elements were behaving one way when I was expecting them to act in a different way. Here are a few tips that I found helpful when learning CSS.

Tip 1: Selectors

The first thing you're going to learn when jumping into CSS is how do I actually style my webpage? In order to style the elements in your HTML document, you'll need to use selectors. With CSS selectors you can style one element, a collection of elements, everything at once, or even style certain elements on an event that occurs when a user is interacting with your webpage (we'll get to that last one a little later). Here's your basic HTML webpage:

1 <!DOCTYPE html>
2
3 <html lang="en">
4    <head>
5        <title>Hello World</title>
6        <link rel="stylesheet" href="./styles.css" />
7        <meta charset="UTF-8">
8    </head>
9    <body>
10       <h1>Hello World!</h1>
11   </body>
12 </html>

Let's say we want to get spicy and change the color of our h1 tag to red. If you notice on line 6, we've linked our CSS file, titled styles.css, to our HTML file. This grants our CSS file access to modify our HTML elements. Now we can use our selectors to target our h1 element:

1 h1 {
2     color: red;
3 }

But what if we have more than one h1 tag, and want them to be different colors? Using IDs!

10 <h1 id="beans">Potatoes</h1>
11 <h1 id="greens">Potatoes</1>

Our CSS will have a slightly different syntax to target the specific ID's of those h1 tags:

1 #beans {
2     color: red;
3 }
4 
5 #greens {
6     color: blue;
7 }

CSS uses hashtags to tell the engine that it's targeting an element with an ID of whatever follows the hashtag. Pretty nifty.

Selecting elements can go even further with classes. Lets say you want the first h1 tag to be red, the second h1 tag to be blue, but you want both of them to have a border? We can keep our IDs, but this time we'll add on classes to our h1 tags:

10 <h1 id="beans" class="tomatoes">Potatoes</h1>
11 <h1 id="greens" class="tomatoes">Potatoes</1>

To target our the class of "tomatoes", our CSS will need to use dotted notation:

9  .tomatoes {
10     font-size: 100px; /* larger size for readability */
11     text-shadow: -1px 0 black, 0 1px black, 1px 0 black ,0 -1px black;
12 }

Now your headers should have a neat little border around them!

Already things are looking stylish.

Tip 2: Properties

If you want to be a pro at CSS, knowing your properties and how they interact with your webpage is key. There are over 200 properties, of which have multiple values, so committing all of them to memory and their value pairs AND what they all do would be quite the task. To get you started, here's a few that can instantly turn a web page into a more organized experience for a user:

Display

Display is a good property to understand and implement when you need to. By default, each element has a display of either block or inline, although there are other values that can be useful such as inline-block or none. The following elements' display are as follows:

Inline

<span>
<a>
<img>

Block level elements (like our h1 tags) by default go from top to bottom by making a new line, and take up the full width of the web page unless specified otherwise. If you notice in our Potatoes headers, they are stacked on top of eacher. But what would happen if we changed those h1 tags to a span tag?

Now they're being displayed inline! Knowing this distinction between block and inline displays, and which elements are either by default will save you a lot of confusion moving forward.

Block:

<div>
<h1> through <h6>
<p>
<form>
<header>
<footer>
<section>

In the picture above we have 4 div elements inside a parent div. Each one has a specific id to change the color, and all of them have a class name that modify their width, font-size, and padding. You may have noticed one other thing about these block elements that seem to contradict what I said earlier... can you identify what it is?

Block elements by default go from top to bottom, but these ones are going from left to right, or inline. The key difference between block and inline elements isn't just the direction they render, it's your ability to style them as well. The height/width of an inline element cannot be altered, only block level elements. So if we want to alter the height/width of our block level elements and have them be inline, you can use display: inline-block; or float: left;. Both of these will achieve the same thing, but typically display: inline-block will be better. This is because when developers are maintaining your code at a later point, display: inline-block; will make it much more obvious as to what you're trying to achieve. Another option is display: flex;. This gives you access to more styling options:

justify-content

So we have all of our inline divs pushed to the left of our cotainer. What if we have a header, and each of those colored divs are a button we can press that will navigate us to a new page? Having them all pushed to the left could be fine, but we may want them all centered across the screen. justify-content gives us a few ways to alter our header:

justify-content: flex-end

This will push the content in our parent div to the right, or the end:

justify-content: space-between

This will separate your content so the space between all of them are equal:

justify-content: space-evenly

This will create equal space between the edges of all divs, including the outermost child divs and the parent:

justify-content: space-around

Similar to space eveny, but spaces on either edge have half-sized spaces:

Tip 3: Hover

The hover selector is a fantastic and simple selector tool you can easily implement into your CSS. Consider this HTML:

9    <body>
10       <p>Hello World!</p>
11   </body>

...and this CSS:

1 p {
2     font-size: 100px;
3     color: red;
4 }

What if we wanted to change the styling of our paragraph tag when the user hovers over the element with their mouse? Well, we can simply create another selector that's called on the same element, but with the :hover selector attached!

1 p {
2     font-size: 100px;
3     color: red;
4 }
5
6 p:hover {
7     color: blue;
8 }

There are many ways this can be implemented, the one we've done here is very basic. But here's an exercise, go to any web page. When you hover over a button, does the styling change? Is there a border when you hover over it? Does the color change or is there a shadow?

Bonus Tip

Transition

Transition is one of my favorite properties in CSS. It makes things look very smooth when a user interacts with a web page! Let's take our previous example, but add a transition:

1 p {
2     font-size: 100px;
3     color: red;
4 }
5
6 p:hover {
7     color: blue;
9     transition: 1s;
8 }

If you tried out the hover in our last example, you probably noticed it switch color instantly. With the transition property, the change in styling will take effect over the course of 1 second, or however many seconds you want it to take. Try it out! We're still not done though... what if you don't want the styling to instantly revert back to it's normal state? Simple:

10 p:not(:hover) {
11     transition: 1s;
12 }

Now we've told CSS that we want it to revert back to our old styling over the course of one second when the user is no long hovering over the element.

Conclusion

CSS is basic in syntax, but can get extremely complex in functionality. There are very advanced implementations of CSS out there, but this is a great starting point for beginners.

For more information on CSS properties, visit MDN.