Project Management 2

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.


Capture
heroSection = No styling

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.

Screen Shot 2017-05-16 at 11.40.34 AM
Background image cannot be set to fullscreen

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.


Screen Shot 2017-05-16 at 11.47.24 AM.png

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.

Advertisements

5 thoughts on “Project Management 2

  1. hi stef, this is looking really good so far! I like the simplicity of the colour scheme and font choices, as they give the website a modern look that’s clean and simple to use. i also think the spacing between your letters was a neat little detail to add to your modern aesthetic. you look like you’re making good progress and it’s good to see that you are doing a lot of research for skeleton, keep up the good work!

    Like

  2. Hi Stef! Great progress so far. I love the simplicity of your banner and your choice of fonts. I’ve found something that may help with your problem but I’m not 100% sure it will work. Maybe you could try adding this code into your html file? And just experiment with the px?

    @media screen and (max-width: 960px) {body{font-size: 16px;}#wrapper{width:960px}}
    @media screen and (max-width: 768px) {body {font-size: 14px;}#wrapper{width:768px}}
    @media screen and (max-width: 550px) {body{font-size: 12px;}#wrapper{width:550px}}
    @media screen and (max-width: 320px) {body{font-size: 10px;}#wrapper{width:320px}}

    I hope this works for you.

    Like

  3. Hi Stef, your page looks great! I really enjoy the simple but effective aesthetic. It makes it very appealing and easy to understand what your page is about. It looks very professional too!

    Like

  4. Hi Stefanee, the progress so far is really good. It seems that you have a very firm grasp on your skeleton and its role in coding your site. In regards to your background issue, you should do some research on media queries. This will allow you to set parameters for specific viewing screens so you can control how the image is on varying px screens. Alternately, you could look into the vh property in CSS, or use the max-width/height style commands. I hope one of these solutions works for you. Really looking forward to seeing your site develop.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s