Setting up Skeleton and my .heroSection
Before I started to code anything in Atom, it pays to do research about the Skeleton framework. I watched online tutorials on how to use the Skeleton boilerplate and found it extremely helpful. Also, I made sure to box the elements of my website so I can use them as reference when putting them in their appropriate div containers.
I wanted to focus on one page (section) at a time so I do not get too overwhelmed with how it is laid out. In Atom, I started by writing the html syntax and adding a placeholder image of what size my logo will be.
Before continuing anything else, I made sure that I had my heroSection images ready. However, I did find a problem when viewing my background image using the iMac 27″ computers in uni. This was due to the larger screen size and the resolution compared to viewing it in my 15″ laptop. I am considering to change my background altogether or stick with using my image regardless of these issues.
I then proceeded to create the CSS stylesheet so that I can add attributes and styling to my existing elements. I tested out putting my own background image in my heroSection, but I ran into multiple problems when doing so.
- Firstly, it took me a while to figure out that the background image should be placed directly inside the ‘images’ folder rather than placing it inside another folder within the its parent (‘images’).
- Secondly, I could not get the background image to be set to fullscreen even after adding the ‘background-size: cover;‘ property.
- Lastly, whenever I alter the spacing property values of my logo, the background image is also affected.
To resolve the sizing of my background image, I put in a height property and set it to 100%. This surprisingly worked! However, this also affected the size and position of my logo.
In addition, I have also realized that by setting certain property values when using the iMac computers, it does not automatically change it to whatever device I am viewing it in. I tried to add the meta/viewport tag and add “width=device-width” but it still does not work. At the moment, I’m researching about media queries and how this can successfully resolve the issues I have stumbled upon so far.