Blog #3: Webpage Mock-up Reflection
My webpage mock-up was based off of the google website that appears on my own Computer. At first I just took pics of each of the main parts of the website and made a div for each section and just imputed the images as background images in CSS. It looked just like the original website, but my instructor told me to put more effort into my work, so I kept the logo and top bar as just background images, but I made it so that my search bar was a div with a 1 pixel solid light grey border that is able to be typed in. I also made the eight websites at the bottom which are websites you visit often, able to be clicked on so that it takes you to the actual website. You can try it out for yourself using this link : https://silverneko21.github.io/Webpage-mockup/
Some problems I started to have was alignment. I used margin and padding to align everything at home, but when I came to school, it was not aligned anymore. I had to change all my margins to % so that it will be the same for each screen you look at. The little google mic icon is still something that I’m having trouble with. I have it as an image it in a div that is in the search bar div, so that it’s aligned with the search bar, and the div that hold is can be clicked to lead to an image that you can see for yourself. The problem with it is that when I make the window smaller, the mic icon slides to the middle of the search bar, and it always happens even when I have all the margins and padding as percents. The mic image will come out in the right area for one computer, but come out in a different area for other computers. I still don’t fully understand why that is happening when I’m using % for things like the margins. Something that is starting to become very annoying, is that the images I used for the 8 websites keep disappearing and needing to be changed to a new image. I don’t know why the images are always disappearing, but I’m getting tired of uploading new ones over and over again. I added new ones that hopefully won’t need to be replaced. The last problem I had was when I was trying to git pull my work from git hub by using the git pull command in git bash, it was pulling all the code, but the code wasn't showing what it should show. The code was there, but my website was not showing what it should be showing. I had to delete all the files from my computer and git clone it from my account, which lead to problems leading to me not being able to push my updates because it was a different file than then the one I was originally using. I just added it to my git hub again as a new project, which solved the issue.
Things that I want to change to make it better would be to make the top bar not just a background image. My top bard can’t be clicked on, so you can’t use it to take you to the google sign in. It could of easily been added in, but I was more focused on fixing all the problems that my website mock-up was already having. My images on the 8 websites at the bottom are always super blurry, so I want to change them to images that are easier for people to tell what website it will take them to. I saw that some of my friends made their search bar actually able to search up the things that are typed into it. I don’t know how they did it, but if I found out how, I would totally add that in because it makes it almost exactly like google. I kinda wish that I chose a different website in general though. Google was a super easy and basic website to copy, so I wish that I chose a website that was well known, but not something that others copied. I want to be original, but the lazy part of my brain said that copying the google website will be a piece of cake. I really wanted that piece of cake, so I went with the easy way out, and I’m regretting it because I could of easily done a more challenging website.