Tag: Bootstrap

Day 15: The Outside World

Last night, after class, I took a much-needed respite and went to a music festival concert. Our local orchestra does a concert series every Friday during the summer, featuring a different theme every week. Last night’s was a tribute to Elton John. It was a fantastic night.

Of course, that’s not what I’m here to talk about…earlier in the day, we all survived a 1-day—we’ll call it a sprint, for lack of a better word (Agile pun intended). We had eight hours to create a 4-page site featuring three financial calculators with about six different equations. I confess we got an assist from our instructor on one, but once we got that one done and figured out in JavaScript, it was fairly easy to google for the rest of the equations and plug them into our pages. It was fun, too, as we revisited our HTML and CSS coding with Bootstrap thrown in, and got to style the pages to our liking. We all ended up with pages that worked by the end of the day. It was A MIRACLE.

I raced to the concert last night, all excited to tell people about my wonderful achievement. Fun fact: unless people are coders, NO ONE really wants to hear about your adventures in coding. I was excitedly explaining my entire eventful day, my ups and downs and struggles to make the scripts work correctly. My librarian friend, who has taken coding classes as part of her library science degree, did understand what I was talking about, but everyone else looked like a deer in the headlights. It might have been more exciting to have the site loaded in a GitHub io repo to show them, but I hadn’t had time to do that.

We artists are SO misunderstood…the only thing less exciting for these poor people would have been had I tried to explain knitting short rows to them…

Day 8: I think I can…I think I can…

We have one more day to be done with our first project—Thursday at 5:00 p.m. to be exact. Yesterday was a black day where I found myself seriously contemplating whether or not, at 55 years of age, I’m still capable of pulling all-nighters. However, after much wailing and gnashing of teeth, I’m happy to report that I’m almost done! I was hysterical over the “user interaction” page, but today I went through my Ravelry project folder, and all 2,555 photos on my phone, and managed to cough up six projects I actually created myself. I debated including something I like to call the “Scarf from Hell,” (there IS a story behind this), but I doubt anyone would pay me money for THAT pattern.

I can’t decide whether or not I should try using the optional JavaScript for the login screen that our instructor showed us. It would be impressive (and I’m wondering how “optional” this is), but I’m thinking it could also hose my site. I’ve spent hours upon hours shrinking and blowing up pictures to accommodate media queries, and scouring code for errors. It never fails to baffle me how code that seems to work just fine in the browser validates with 20 tag errors (including tags that are backward). I did figure out my error in deploying to the GitHub .io file…that old filename capitalization bugaboo bit me in the *** again! Something else I’ll need to fix tomorrow…

After all this, I’d just as soon not foul this all up with JavaScript I didn’t write…but I may change my mind tomorrow.

Day 7: It’s a surprise…

I even remember this.

I’m a tad TIRED. I did manage to get some of the user interaction page done, although I have no clue how I’m going to add the dropdowns for the quantity and pdf/printout choice. Actually, I do have a clue, as I scoured through Bootstrap documentation until I found something relevant–I just now have to figure out how to incorporate and size these in my chart of patterns.

I beat my head against a wall (and so did our instructor) trying to determine how to get images to show up on a page. Come to find out, my idea of adding three of them to the HTML in different sizes, and then using CSS to pick the right size per media query wasn’t quite right. I had to do a div container with an id in HTML, and then add the correct-size pictures to the media queries in CSS, using url(“…/img/example.jpg”) for each size. I wish I could say it was easy, but for the life of us, we could NOT get images on the page. My instructor figured it out…I was using url(“img/example.jpg”)! He’d used the same thing, but he’d had the <style> section in his HTML example to illustrate, so img/ vs. …/img worked for him. I had to change ALL my pages. This set me back quite a bit, along with needing to change the pages for the correct code for submit/reset buttons AND fixing my CSS, which mysteriously had an epic FAIL after all my changes and fixes…AHHH!!!

This entire day has been the Whac-a-Mole game.

I have only two more days to finish. No pressure…

Day 6: The Big Project

…so far, so good.

I managed to spend some time this weekend on our first class project–so far have three pages of the website completed! It’s looking pretty good, except I’m wondering if I should be resizing the images for media queries by width and height in the HTML or try to resize them in my external CSS sheet. Initially, I did it by swapping out pictures for the same pictures in a smaller size, and then adding code in CSS to display the pictures, depending on the media query; however, it’s looking a bit sloppy, code-wise.

I’m DREADING the “user-interaction” page. That’s going to be my patterns-for-purchase page (all two of them). I have NO CLUE how I’m going to create that page. There is a Bootstrap template for a price page and an order page, so I’m hoping I can make use of those and modify them. I’m also supposed to be thinking up an extra-credit page…AAAHH!!!

Day 4: Pull yourself up by your bootstraps…

Okay, I’m probably going to court controversy and hate mail, but I’m just going to say it: I can’t STAND Bootstrap.

We just spent the last few labs relieving existing code of “div-itis” by replacing the div elements with more meaningful HTML5 elements, as well as fixing other errors. It’s been interesting figuring out how to do this. But NOW…we’re expected to use Bootstrap for our CSS styling. As far as I can make out, this tosses our past efforts out the window, as it seems that Bootstrap uses NOTHING but div elements.

I know. There are all sorts of interesting examples and templates to toss together a site quickly. There are carousels, input forms, and even Jumbotrons. However, I don’t like that Bootstrap is essentially a black box. There’s no way of knowing how these different things work, unless you want to delve into the giant Bootstrap file itself.

Also, I just can’t stand the dreary colors. I know…one can add another stylesheet to tweak the colors and settings, but that’s almost harder than creating the CSS code from scratch! I just spent two hours trying to figure out how to manipulate a form that Bootstrap has solidly set to the point of not being able to budge it. I can’t even get the damn input boxes to be inline with the descriptions!

Okay, time to go breathe into a paper bag…tomorrow is another day… 👢🥾👢