Digital Legos
Phew. This was a tough one. I sat down to start this project several times, and each time I felt incredibly overwhelmed. After multiple failed attempts to get started, I finally decided to just pick one tool and learn it.
I went to Bootstrap and I scrolled through some of the components, and I finally decided to make a carousel with my designs from our Make Everyday project. I copied and pasted it into VS Code, and I was on my way.
My first struggle came when I was trying to resize the photo and center it on the page. I could not decipher what the right div class was to put into CSS. The code looked like this:
<div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
I tried so many different things in CSS, but I could not for the life of me get it to look right. I finally plugged in .carouselExampleControls, and it worked. I played around with the sizes and after a few tried I got it to where I wanted. The next step was trying to center it. I tried playing around with the margins, but I was not able to get it squarely in the center of the page. I did some Googling, and plugged in “margin: auto;” and bingo, it was good to go.
I was feeling pretty confident (possible overly so), so I tried to add some cards onto the page as well. But, I couldn’t execute this. I plugged in the code, and played around with it a ton trying to get it to look the way I wanted. I tried setting it up into its own div class, so I could change the colors of the buttons and get them centered on the page. For some reason, the way I set it up made the buttons lose their background color. This is how I had the code in CSS:
.cardrow { margin-top: 10px; display: flex; padding: 50px;}
For whatever reason, it didn’t look right and I could not for the life of me get it to work.
I kept at it though, trying to insert images into the cards and make them clickable. This was roadblock number two. I kept trying to get the logos in there, but I could not get the size right. I don’t know what I was doing wrong, but I tried maybe a dozen times to fix it and I still couldn’t get there.
After some hours of work and a near-breakdown, I decided to try a new card template. Instead of creating buttons, I decided to make cards with headers that would be clickable. This process ended up being pretty easy, surprisingly, and after playing around with the margins and spacing I got it set up.
I really wanted to get more elements on my webpage, but I didn’t know where to go next. I added some color, some links, and played with the fonts a little bit, but I wish I could have put some more stuff in there. I’m excited to keep working on my skills and be able to get webpages looking better as this process keeps moving.
Webpage walkthrough:
