My websites – html & css conitued…

Front End Web development got me in. I have finished two websites throughout last few days. I have attached below links to them. The first one I created is a replica of Google main search site. It seemed much easier to do than it actually was. I struggled with positioning different elements in right places and looking for answers to the very common question: why did it shift itself there? Very plain tip found on the website, I becoming to understand more – every element is a box. I use it now to my advantage.

The second website took over 1.5 days. I have created the Viking Shop e-commerce website according to the given mockup created in Balsamiq, as instructed by Viking Code School. I have decided to go with fixed navbar, floated divs with products and bit experimented with text shadowing. Easier said than done, I almost tore my hair from the head at one point as I couldn’t figure out why price tags are overlapping top fixed navbar when scrolling. Thankfully a friend of mine (thanks again Mateusz), point one simple line of code missing – z-index. I googled in many places and suggested solutions reached from javascript to changing the position property of the elements into absolute or relative… Long story. So this is how I learned about z-index – layering feature of elements.

Creating the shop website was so addictive it got me working to 4 am this morning. I got too much obsessed with details, and I just had to force myself to stop as it was becoming endless work. Now I’m half awake writing this post. Because of not looking my need of sleep I didn’t finish last assignment – creating the replica of few Facebook mockups. I am not thinking well, so I am exercising a little with my first line of Ruby. Gladly recognized it as very similar t Python so far. I am very excited about learning it, but still one web building assignment to go.

 

The Viking Store and repository o GitHub

Google.com replica and repository on GitHub

Screen Shot 2016-07-31 at 21.45.22

Advertisements

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