Creating visually appealing and functional web pages can be a bit tricky at times, especially for beginners. Your first web project can feel daunting, but with the power of CSS (Cascading Style Sheets), you can transform your vision into reality. In this post, I'll share my journey of using CSS to style my first web page, highlighting key techniques that helped me overcome design challenges. These techniques include div highlighting, creating a vertical line down the middle of the page, floating divs, and understanding margins and padding. This is just the beginning of my coding journey, so please keep that in mind! I'll also emphasize the importance of Chrome DevTools in this process.

A bit of context: I'm currently enrolled in Flatiron coding school, and I had just completed the basics of vanilla JavaScript, passing my first test with the advanced deliverables, getting all points available! Talk about a confidence boost! My teacher had then assigned a project where we needed to integrate JavaScript and an external API into a frontend website, while being in a team environment. I got teamed up with my partner, Dane, and while browsing through a list of APIs, we stumbled upon something that peaked our interest: the Scryfall API, a Magic the Gathering card database. That's when we decided to create a deck builder application, utilizing HTML, CSS, and JavaScript. In this post, I'll dive into my CSS journey.

One of the first techniques that proved incredibly useful while building the HTML structure was highlighting all div elements with a red border. This simple yet effective approach allowed me to visualize the layout of my web page. By adding the following CSS rule:

div {
    border: 2px solid red;
}

With this, I outlined all the divs on my page, making it easier to see the structure and hierarchy. This helped me identify any nesting issues or unwanted gaps in my design, enabling me to bring my vision to life effectively. It also helped me troubleshoot later on down the line! So whenever I did not need it I would comment that out, and whenever I did need it I would just remove the comment tags, and then the red lines would appear! You can comment in something in css by doing this:

/* <--- Start Comment syntax for CSS
This will not be seen by the code,
I can put A-N-Y-T-H-I-N-G in this. 
Whether I want to comment something to other Devs,
or remove a line of code momentarily to troubleshoot.
I can remove these tags to make the code see this again!
I can end this comment by simply writing this:
End Comment syntax for CSS---> */

After I had created my starting div's I wanted to add not only a title but a logo with this title. Because it was a personal project and NOT something that is being posted, I decided to use the official Magic: The Gathering logo. At first I had just set the top div to be centered. Which worked for the time being... Here is that code:

#top {
    text-align: center;
}

At some point in the project I wanted to also add in the color wheel icon (MTG Mana Color Symbols). But when I added the image in, it was going in the center next to the other logo. I ended up going inside of my HTML and giving this image its own ID called logo2, as well as the first logo which had the ID called logo.
I then did this to further specify to CSS what I wanted this image to do.
Here is that code:

.logo {
    width: 300px;
    height: auto;
    float: center;
}

.logo2 {
    width: 150px;
    height: auto;
    float: left;
}

Next, I wanted to divide my page into two distinct sections: a quick-add section and an image and information section. The idea was to display card details on the right side, and have an add to inventory button. On the left side of the vertical line, enable users to quickly add the cards to their Deck. Creating a vertical line down the middle of the page was surprisingly straightforward in CSS:

#vertical-line {
    border-left: 2px solid black;
    height: 100%;
    position: absolute;
    left: 50%;
}

By applying this CSS rule to an element with the ID vertical-line, I effortlessly positioned a vertical line precisely in the center of my page. This added a clean and visually appealing separation between the two sections.

To further structure my layout, I needed to float two divs on either side of the vertical line. Here's how I did it:

#left-div {
    height: 25%;
    width: 49%;
    float: left;
}

#right-div {
    height: 25%;
    width: 49%;
    float: right;
}

Floating the left-div and right-div elements ensured that they aligned correctly and occupied their respective halves of the page. This technique was crucial for creating multi-column layouts that looked organized and spacious.

As the project progressed, we added working buttons for adding and deleting cards and decks. However, the delete buttons initially appeared below the cards and decks, creating a suboptimal visual design. I was confused for sometime, as I had already defined this part of the div to be in a row. To improve the appearance of the delete buttons, I needed to understand the differences between margins and padding. Chrome DevTools came to my rescue.

DevTools provided an invaluable illustration of margins and padding, making it easier to comprehend their significance. I also used my red outlines and saw the div did not have enough space created to put those buttons in the right place. I learned that margins control spacing outside an element, while padding controls spacing inside. As well as increasing the space of this specific div. Here's an example:

.eachCardAmountInput {
    width: 100px;
    height: 50px;
    margin: 0 10px 0 0;
    font-size: 25px;
}

In this CSS rule for .eachCardAmountInput, a margin of 0 10px 0 0 adds 10 pixels of space to the right of the element. The four values in the margin property can be thought of like directions on a compass: top, right, bottom, left. This subtle adjustment created space between adjacent elements, enhancing readability and the overall aesthetics of the page.

In conclusion, my journey of using CSS to style my web page was filled with valuable lessons and techniques. The skills I've mentioned are fundamental to web development and can significantly enhance your design capabilities. Additionally, Chrome DevTools proved to be an invaluable tool for identifying and resolving styling issues. Armed with these new tools and techniques, I encourage you to embark on your own coding adventures and build something that you find amazing. Remember that some of the best tools you'll discover as a developer are waiting on the other side of what you don't know yet.

*P.S If you would like to view this project, and the coding behind it, I have left a Github link to my own personal repository. It does run off a personal server and not its own website. In order to run the server go into your terminal and type this command:

json-server --watch db.json

https://github.com/ItzaWolf/phase-1-magic-the-gathering

Happy coding, everyone!