Skip to main content

Making a Tourism Slideshow With HTML/CSS/JS (Ft. TraversyMedia)

 Video for reference here.

I'm one to encourage good rest over constant work. 

Yet I found myself awake at 2 AM listening to this video by TraversyMedia, because I was suddenly curious about making a full page image carousel.

I wanted to listen before I put hand to keyboard in coding, so at around 3 AM, I pulled up my machine with an idea.


 

I followed the instructions and did most of the code myself. Here, I outline:

  • The changes in my code from the original.
  • The demo mockup (Here)
  • The changes in the new Tourism: Welcome to Babylos! .The images may take a moment to load at first.

The original video code says

.buttons button#next
.buttons button#prev

But the code didn't work! The buttons were still as follows:

 

  • Unstyled
  • At the bottom

So I removed the .buttons part and everything was placed and styled appropriately.

It took a while to get the image to be full screen;

My original code was:

.slide {
    positionabsolute;
    top0;
    left0;
    width100wh;
    height100vw;
    opacity0;
    transition: opactiy 0.5s ease-in-out;
}

Oops - I misspelled 'opacity' in the transition. No wonder it didn't work in the code! 😆 Fixed now!


See width and height? It shouldn't say wh and vw, but 100% for both.

.slide {
    positionabsolute;
    top0;
    left0;
    /* I had w/h as vh and vw and what an issue */
    width100%;
    height100%;
    opacity0;
    transition: opacity 0.5s ease-in-out;
}

Spelling; Achieved 👍🏾


Image-wise, it all comes from my copy of Animal Crossing; New Horizons and editing in Paint.net.

The size of the image around 1600 x 769. The initial images I had were stretched to fit. Some (Marcel's) were easy to resize. 

One (Static's) needed only a small adjustment of the clothing images and no resizing!

 Others (Opal's) was so unusually difficult, as layers began to cross and bleed into each other. I had to remake that one entirely.

In the future, I'll measure twice (or, at all...) and cut once.

Links do not work in the first slide of the show. Not sure why.

I kept going "I'm gonna need another panel". Hence how this grew from 3 small slides to 8. It was very fun, and I'll probably do more 3 AM coding in the future.

Remember: I'm available for consulting, temp roles.


Now Featured on Bridges in Tech!


Retweet?

Comments

Popular posts from this blog

The Updated "What I'm Looking For In A Role" Post (2020)

Thank you for wanting to help with my job search! Here are some parameters.


Ideal:
Part time remote, text based support [Example Description]. It's a little far fetched, but the positions do exist. I enjoy having the flexibility to take on temporary projects from time to time!
Also; If anything sounds weird, out there, or unusual - Feel free to e-mail me. Doesn't have to be tech related. I just have to find it interesting and flexible.


Looking For This Type of Work:
Simplified writing about tech. [Example Job Description] You want to pay me to write more of *waves hand* this blog? I am game.
IT SupportUX Auditing [See Here]eCommerce merchandising [See Here]Email Marketing Specialist [Example Job Description]  ProofreadingThe following is what I was trained in. Roles will be considered, and I am looking to pivot to the above. Still part-time, contract, and/or temporary
Azure
Cisco routing and switching technician

Volunteering:
Find me on Jumpstart and CareerVillage.

Location:
Remote is…

Azure Networking Options - Core Cloud Services

I have done a lot of AWS things on here. Time to give Azure some attention. After all, since employers don't think Cisco or COMPTIA certifications are important, maybe Microsoft ones are?

First, let's really think about why these are the two biggest cloud services providers in the world:

They've been doing internet things for a long time.Amazon launched in 1995, a virtual bookstore.
Microsoft, well, you know. 

They've lived, breathed, and frankly, created, infrastructure that we use today, that they're selling to us today. Of course the Store of Everything and the Company of Everything would encourage us to put everything in their hands.

Also: Azure has a lot less silly names for modules. Important. I appreciate straightforwardness.


I said 'a lot less', not '100% sensible names'

Microsoft has a clear set of Azure Fundamentals that anyone can interact with. Let's talk about networking basics, basically to say, again, "Hi, employers, I have an …

Grace Hopper Celebration 2019 (GHC19)

From Aicha Evans' speech at the Keynote.
September 6th - I receive an email from Anita B Organization, saying "We read your application, we like your website, and here's a free ticket to GHC 2019 in Orlando, Florida!"


After a few more questions, it seemed everything was on the up and up, and so I accepted - and that's what this post is about!

For those who don't know, Grace Hopper Celebration is the largest gathering of Women in Technology in the world.

On a personal note, This is the first trip I've taken without my parents. Sure, they've left me behind to go on vacations, but I've never left them. I was totally worried! But you know what happened?

I met a lot of cool people in Orlando, learned a lot of neat things, and had a blast just walking around airports for upwards of 8 hours.

New Delta Sky Club on Wikimedia I really, really love airports! And I survived.

I know in the past, I've wormed my way out of jobs despite being interested simpl…