After discovering that Sublime had many, many features that I was not using or even knew anything about I thought it might help if I looked into some videos that might teach me some more.

I was introduced to Emmet yesterday, through a learn Flexbox tutorial. Today I found out that I can actually get Sublime to show me the actual colours, in the code, related to the hex numbers rather than putting it in as a comment to remind me.  Although I suppose that it is still good practice to use the comments. In case I have to use a different application.

It's not just about learning the coding! 

The rules of HTML/CSS or the syntax of Javascript, it's knowing how to use the coding environments to their best advantage as well!  I currently have 3 installed on my laptop.  I started off with notepad++ which I thought was ok.  I watched some videos and was told Brackets is great give it a try.  So I did.  Its great, again adequate for me. Then in another video Sublime was mentioned.  I used it, again its ok I can get the job done with it.

I was using all three packages in a very basic way.  All I was doing was typing in the HTML, the CSS and JavaScript and only scratching the very surface of their capabilities. I could not see why these packages were so great and had everyone raving about them for what they could do.  

I'm going to take the time to learn a bit more about the applications and what they do - it can only make my learning and coding easier.

Flexbox, coding and emmet

I signed up for 2 courses today.  

One was yet another free Javascript tutorial.  One of these days I will complete all the courses on Javascript that I have and I will read all of the books. But for now I will just stare at them blankly and continue to be scared of them and not really understand them!

The other free course I signed up for.  When I first saw it I did wonder:  what is Flexbox anyway ?  Is it just another bootstrap style framework? Apparently not. It’s a CSS thing.  More about that another time, as I am currently only on lesson 4 and so far I have spent most of the time looking up related stuff on the internet.

I am using Sublime to program, create, learn, drive myself insane…. 

The video I was watching, to learn all about Flexbox, was demonstrating using Sublime and he typed a line of code which made no sense to me at the time.  Then pressed tab and a whole load of faultless HTML appeared. 

What is this witchcraft and sorcery? Clearly, it was created by those good people at Hogwarts.

No, following some research it is a thing called Emmet

        section.container>div*4

turns into 

<section class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</section>

So, back to Flexbox.

I have also started Junior Lamas on a Python programming course.  He is into Minecraft and keeps talking about “Minecraft Mods” like they are the be all and end all.  I may have suggested to him that as Minecraft is written in Python, he could one day end up writing his own mods and people will be saying things like “Wow did you see Juniors Mod” and he did the first few sections of the course! 

Custom bootstrap Nav

I started learning to code after setting up my own website and  2 others for clients using the inbuilt templates in the hosting company packages.

I was rather dissatisfied with the results as the templates were inflexible and I knew what I wanted but was unable to achieve it.

As it turns out, the selection of the hosting company is also key as their templates sometimes are not so good for SEO, but that is for another day.

I learned the basics of HTML and CSS very quickly, also Bootstrap, which I have used quite a bit. I understand it but, like all these technologies, has the ability to trip me up spectacularly, usually because I did not properly RTFM and the subject is so vast.

Most recently, I was putting together some ideas for a site for a local sports club.  Their colours are a shade of burgundy (#590316) and an off white for which I selected lemonchiffon (#FFFACD).

I had it set up with a Bootstrap standard nav and played about with inverse and all the usual fidgets and tweaks and then I decided that I would like to change the colours of the standard nav to the same colours as the site rather than the plain standard options.

I found a site that would assist me in my endeavour – I supplied it with the colour codes and it generated the relevant custom html and css to enable me to change the colours without too much fuss.

All done, with my custom css in a separate custom.css file.  Feeling quite proud of the fact that I had done it all with the relevant entry in the header section pointing to the custom.css file. I ran the code in a browser. No difference.

Now why was this?

This was because I had left the bootstrap class  navbar-inverse in place rather than changing it back to navbar-default.  I spent a lot longer trying to figure out what was wrong than it has taken me to type it up for this blog post!