Friday, 11 May 2018

D15: I finished learning about Bootstrap!


View this on my main page


Hey Everyone and Welcome to Day 15!


Today's Goal!

For today I wanted to finish the Bootstrap tutorials and then hopefully put the skill I learnt to use in a practical situation. I have quite long to stay awake today as I don't have work tomorrow so anything I didn't get to finish I could do a lot later than usual.

The Tutorials!

Today's tutorials finished up using Bootstrap and then looked at making a final project. This final project was my coding for today as I did the whole page by myself with very little alterations when I watched the video of how it was done. The things I learnt about today was modals, I can really see how these will be helpful and know of a lot of uses in real-life, where I have used these, or something similar. I then learnt about popovers and tool tips, these could be useful but I would have to find the right situation. I then learnt of scroll-spy. This tool seems very useful especially when I will make my portfolio page as I would like people to be able to scroll directly to a part of the page and also have a feedback system as to which part they are on.

This is the page as a whole

The Final Project!

The task for the final project was to create an ad page for a new app and add certain sections for it. It required a nav bar (with scroll-spy), a Jumbo-tron, an about part and finally a download button in the footer. I also was told of a few resource websites, UnSplash and font awesome, both of which I love and definitely will be using in the future!

The Nav-Bar

The Nav Bar!

My nav bar needed a light background so "navbar-faded" worked brilliantly for this. It had a brand of "My App", not very imaginative but it worked! it also had a form on the right hand side of the screen that required an email and password. This part doesn't work yet as I still need to learn using databases and servers, but I am getting there. I also added the ability for it to condense when below a large screen.

The Jumbo-tron

Jumbo-tron!

The Jumbo-tron had a background image that I grabbed from UnSplash and then some basic text and a form asking people to sign up to the mailing list.

The about selection with pictures from UnSplash

The About Section!

The about section needed to have a deck of cards in it. This means that the cards are a constant length, so look a lot better with each other, rather than having different lengths for the different cards with different description lengths.




My Footer

Footer!

The footer was simple. Outside of the container so that it filled the page width, a blue background, a bit of centred text and then an image of the "Get it on google play" button. Job done!

Tomorrow's Goal!

Tomorrow I may start work on my portfolio page, but I am about to learn about Wordpress so I'm debating if it's worth waiting until I finish them tutorials first. After them I will be onto server based things, so I wont be working on my portfolio page as much, at least not directly, so this weekend may be the perfect time to make that.

No comments:

Post a Comment