Technical Process - how it all came together (Part I)

First of all I need to make a note of something - my browser has never been abused to this extend with searches that start with 'How to...' ! There are elements that need including in this website and I had to learn how to do that. Most of the answers I found in W3schools, but I used other sources as well. Anywhere they had an answer to my question really. I started by designing my Index page. I already knew that I did not want too much there - navigation bar, some info about me and my logo. After going through Boostrap platforms, trying to figure out how to start, I saw this web design and decided I will use some bits and pieces from it. Just to get me started and to have some frame to work with, which I can always change after to fit my vision, but also my technical abilities.

First thing I realised - the split function of Dreamweaver that allows you to see what you are doing is good, but only when you are exercising. Once I started doing this I switched to code mode, as otherwise it was distracting and it was not doing me any good. Especially, after doing my research and deciding on using Get Bootstrap, and all it can offer. What I took from Get Bootstrap was how to link everything , all the libraries I need, together. 

I used what I already know about building pages and what Dreamweaver offers when you open a new html file, and applied that, alongside boostrap guide documents and some bits from the source code. The result was not good.  At this point I had to decide on something - I was either to reconsider my intention not to use ready templates, or to get back to reading and figuring out what I am doing. Get Boostrap is endless, for a beginner , source of information. The 'Getting started' section was invaluable for me. So back I went to Dreamweaver and this time I managed to come up with something remotely decent, it was a start!

This was also the moment I decided to make my header a separate html page. The reasons behind that  -  I already realised that this is going to be hard. Have I made it hard by deciding to learn as much as I can and do it mostly myself, with assistance from Bootstrap? Probably. It takes a lot of reading and practicing for this to work for me. It can be time consuming and exhausting. But I am not changing my mind now, I have come this far. However, because now I know it will be difficult, my header was going to be a separate page. On header.html I have my navbar and my banner. This was going to allow me to make any changes to how many and what pages I will include. And then I am linking that html file to all my other pages ( how to .. was strong on this one , but I found the answer pretty quickly). I will not have to change things five times on separate html files, I will change them in one. Also this will make the code on each page less and just about the content of the page itself, not another roughly 20 lines to start with just to have my header there. 

As you can see here, I also included my banner. I have already opted out from just designing something in Photoshop and putting the image there. I looked for inspirations at Slider Revolition but at the end I decided to use this one

At this point, I have researched enough to know that you can animate with HTML and CSS, and I have practiced some flickering signs so the html I did pretty much myself and adjusted my code a bit to this one. 

The CSS was a different story. While I already knew how it should look , I was not sure about the  values I should use. To save myself some time, from endlessly changing those until I get what I want, I used the CSS dimensions from CodePen. Now I have a header html page and an index html page.The header one I already changed three times precisely for the reasons I stated already. This one will be my final one. I had two more pages linked there, but I am realistic now- there is no way I will have the time to create that much pages, considering my process -  I am not just doing an assignment, but I am also trying to learn as much as possible.