Logo hides when scrolling
Self typing effect
Hover effect on logos
Graphic Design Page
Hide and show element
Click to enlarge bottom picture
Web design page
Click show and hide button
Hover to enlarge
Work Experience page
Click and Drag to enlarge
I was recommended a website to use to learn how to make my website open to the world wide web. I called the company a few times however they did not answer or call me back. Therefore I had to research into finding a different company, and I came across a company called 1 and 1. They had a promotional offer of 99p a month for having my website live and having a free domain name; I felt a bit pressured deciding a domain name so do not judge me for it:
Because I have never made a website properly before, or even attempted to make it live; I wanted to make sure that I understood what the process was to do it. So, I understood that I had to buy hosting and sometimes the domain name comes with the package, and other times I have to pay for it separately.
Once I paid for it and I have my online account open, I was thinking, well what now? I tried clicking on a few buttons to try figure out how to attach my website to my account to make it live but I could not find any option to let me do so. Therefore, I called 1 and 1 again and asked the technical team to talk me through what I had to do. The woman on the phone was not as patient with me as I would have liked but nevertheless, she explained that I had to download a software called Filezilla to be able to control what happens on my website.
After following her instructions, make attempts to make my website live was successful! I am still yet to play around with Filezilla to understand how it actually works, and what happens if I was to change something on my code, but for now, I am extremely excited to have a fully functioning website!
I was told about this website:
Unsplash provides beautiful photography that is free and can be used in anything. I have used images from this website into my own website; as I mentioned in an earlier blog, I think it is important to have clear images in my website as it portrays the website to be professional.
A fellow classmate created an image slider, so I decided to find another tutorial as I wanted to follow the step by step guide on how to create this animation using JQuery.
As I am using Bootstrap in my website, I find that I cannot use CSS tags such as ‘position: absolute’ and ‘margin:100px 40px’. As I find that this cancels out the Bootstrap grid system. Therefore I cannot have just one image shown and the rest of the images hidden like I have done on Code Pen:
However, I know that I would need to apply a JQuery ‘if’ statement to hide the images that are not meant to be seen. As I unfortunately do no know how to figure it out on my own, I am finding that I will have to refer back to tutorials to understand how and what to do.
Well… bloody hell this was difficult.
Thank God for this guy and his awesome tutorial:
Looking at each bit of the tutorial makes a lot of sense as it is explained well, I managed to break it down and change the size, colour and direction of the particles. On the other hand, I know I would still find it difficult to understand and create these particles on my own:
When I applied this to my website, I found that other JQuery effects would break the particles and they would stop working. Therefore I placed the particles in their own JQuery file, this solved the problem🙂
As I am building a portfolio website for myself, I needed to find a sutible way to portray my theory work. Therefore I thought of the show more and hide button, and created this:
I enjoyed figuring this out! Quite a simple bit of JQuery code. However for some reason, when I apply this to my own code, the ‘show more’ button does not hide once clicked, but it does work on Code Pen. Slightly strange.
Next, I found a way of hovering over text to enlarge small text so that it is easier to read, and created this:
I thought I would have been able to do this animation in CSS, however as I am concentrating on learning JQuery for this project, I wanted to figure it out using JQuery.
I researched how to do a hover effect through JQuery and figured out how to make the text larger.
I was creating my website page, and I thought that it would be good if I could apply an animation on my web page that allows the user to click on an image that will open up a separate screen that will enlarge the image, i did follow another tutorial and I figured this out:
However, this process seemed more complicated than I think it should be. Took me a long time to do that, but I was not happy with it, so I wanted to find a simpler way of doing it. So I tried this:
However, I then I came across ‘JQuery Lightbox’ which had a brilliant tutorial, therefore and created this instead:
Looks so proffessional, I love it!
However, when I applied it to my website, it had to refresh the page to be able to open the image within the lightbox, I tried various ways of fixing this, but again, I wasted too much time on it and gave up😦