8 Minutes to CSS Genius | Box Shadow Ninjutsu

In just 10 minutes you too can be a CSS genius. Do you like style? Do you like color? Don’t hesitate say yes aloud, now! This is the CSS tutorial for you, right here on this page are all the answers.

*I do not actually cover box shadow.

Okay!

So in this quick tutorial I am going to briefly touch on div’s in HTML, basic CSS, tools for implementing CSS, and bootstrap. Bootstrap is a stylesheet with a ton of pre-built styles that you can link to elements in your HTML. People freak out about it. It is powerful and approachable. However, I typically utilize Bootstrap for its columns. More on this later.

First you should have a basic understanding of HTML and CSS syntax. I am only briefly going to look at each. First HTML’s syntax looks like this:

In short this will produce an unordered list with list items inside of it.

CSS’s syntax looks like this:

The selector is the tag or element from HTML you want to style. A selector can also be a class or id that you create in HTML. The property is the type of styling you want to do. The value is actual styling, in this case all header 1’s (h1) will have a red font color.

Okay! A page of HTML looks like this:

WOW! This guy is a great coder. Yes.

Sai-tip: Copy that code into a text editor like Sublime and save it with .html after the file name. The text editor will markup the file highlighting the different aspects: HTML tags, tag attributes, content etc.

The important element to note here are the div tags. When you are first introduced to div tags I think it helps to consider them as labels for your code. Each div tag opens and then closes. Everything in between the opening and closing tag contained within that div and therefore inherits stylings from the div.

So in the code example we have a div tag that we are thinking of as a label for our container. Our container holds everything within the body tag. The body tag holds everything you see rendered on the page.

We also have div tags for navigation, content, sidebar, and footer. Each of these sections of code correspond to what you imagine on the front-end.

CSS uses these labels as a map to navigate what is called the DOM. If you want to use CSS to make the navigation div have a blue background then you can use CSS to target that section and style it. So our HTML above with the navigation div could be selected and styled in CSS like this to produce a blue background:

WOW! This guy cannot be stopped.

Okay, so here is the point in the tutorial where I sit you down and give you a solid heart to heart. The amount to which you believe me will directly correlate to how smart you are.

Learning how CSS works will take a little practice. Having a solid conceptualization of what is happening and what tools are out there will make it dramatically easier.

Okay, I am really happy we had that talk. I am standing again and therefore back to teaching.

So the next thing you need to do is have a flashback. You have worked in Microsoft Word, sent an email, played with InDesign, or any other software that had a text-editor. Any of the ways you were able to manipulate text in those programs you can do with CSS.

For example, you can make text larger, bold, add spacing between words, lines, letters.

If you want to play around with editing text and colors, here is my recommendation. I am assuming you are using Google Chrome and an Apple computer: press command+option+i. That will open this up:

Screenshot 2016-03-17 19.24.27

See my cursor about 50% of the way down the screen over on the left side. It is hovering over a button that will allow you to click on anything on the page to see the related HTML and CSS. In the bottom right corner is a bunch of CSS. You can select a HTML element, then edit the CSS live. You can read through the current CSS and get a sense of how things are working. You can uncheck each CSS property to see what it looks like without it!

This could easily be overwhelming, but getting in the habit of using the Chrome’s developer tools to play with CSS will help you immensely. Essentially you are providing yourself an instant feedback loop on your customizations.

Now it is time to up our game. The game upping process involves Bootstrap. You may be tempted to hold onto Bootstrap and that is okay, but yet again I think it is great to use for columns especially when just starting out.

So CSS allows you to more elaborately position HTML elements on the screen. But positioning in CSS is a little tricky. In comes Bootstrap columns. Nothing else, not tabs, not a bunch of extras that are going to convolute your learning experience. Columns!

So here is the grid model (aka columns!):

lg_grid

The screen is divided into twelve evenly sized columns. You can combine columns however you would like. A row all the way across will consist of twelve columns. As an example I can take 2 columns together + 4 columns together + 6 columns together to make a complete row across the screen.

Within the first two columns I could have my logo. In the next 4 I could have empty space. In the last 6 I could have a navigation. These columns have predefined styles in Bootstrap’s CSS. You simply name your div labels (class & ids) to match Bootstrap’s labels and positioning has become dramatically easier.

Here is the HTML from before with some Bootstrap labels linked up.

I want to introduce one last concept about every HTML element and how CSS can manipulate it. It is called the box model:

boxmodel

Content represents the text, link or whatever it is you have inside your HTML element. Each layer moving out can be manipulated to have color and size. You will see this same representation in Chrome’s inspector (command+option+i) if you switch from the “style” tab in the bottom right corner to the “computed” tab. That is it! Go forth and conquer!

BONUS:
CSS Cheatsheet, go forth and cheat!!! But honestly, cheat a lot in code because the resources are endless:

Cool color thing:
http://www.colllor.com
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

Obligatory gif:

~ تمام شده ~

WordPress’ Event-Driven Architecture vs MVC

So I was thinking recently I wonder which parts of Ruby I have been learning could apply to WordPress. More specifically we just started working with Rails which is a framework for Ruby, the two together giving us Ruby on Rails.

Ruby is our programming language. Rails is a framework that is neither a forward-facing web application nor a programming language. Rails is a library of ruby that allows us to expedite the application building process.

Ruby on Rails employs Model View Controller (MVC) which is a standard for dividing your code base on its function. The Model is the logic. The View is what you see when visiting a webpage. The Controller is an between that requests logic when needed and sends the appropriate view.

WordPress on the other hand is employing an event-driven architecture. Which can be visualized like this:

2013-08-22-10.39.31-1024x768

WordPress’s Event-Driven Architecture uses hooks to make changes at specified event triggers.

For instance when a webpage is called it will hit the head tag. In WordPress you could write an Action hook to say send in this meta description when the head tag is called. A meta description being that little snippet you see below a search result in google. WordPress also offers a secondary type of hook called a filter that is commonly used for manipulating data.

WordPress has similar pieces to Rails but a common theme my research to compare the two of them was the sentiment: not to get too hung up on the comparison because the two do not really translate to one another.

WordPress uses MySQL as its database. The WordPress dashboard — which is WordPress — functions as the Application Layer. And templates are used to render views. There is a lot of commingling of functionality here that would drive a MVC programmer a little mad.

I found this quote by Tom McFarlin that I found helpful in beginning to sort out the differences:

“Simply put, frameworks are not applications, foundations are applications.

Just because a web application can be built using WordPress does not make it a framework. It’s a foundation. It’s an application unto itself that can be extended into further applications.”

For the time being that is pretty much all I wanted to get down on paper (blog paper). A short and early exercise into comparing something familiar to me (WordPress) with the approach to web applications that I am learning (Ruby on Rails).

I leave you with a funny little middle ground I stumbled upon. There is a plugin out there that allows for a MVC framework within WordPress. As I looked through how to setup the plugin, the PHP used to install the basic framework is extremely similar to Ruby. Take a look:

~ تمام شده ~

WordPress Guy Is Going To Code School, Extra Extra

Hi,

This is intended to be an open letter to friends, fambam, and clients. I will try to keep it short, while answering potential questions.

I am writing a blog post, crazy. I am also running my website on the default WordPress theme, boring.

Okay! I was accepted into the Flatiron School’s Web Development Immersive program. WooooOOOooOooo, I am pretty excited — I found out earlier today. The acceptance rate is low and we are within a week of when the program begins on November 1st, so this came as a bit of a surprise. Don don don…


 
I start saying cool a lot after this point to keep your interest and excitement levels high!

I will be learning Ruby, JavaScript, SQL, and more. Ruby is a programming language that is considered to be approachable and really pretty when you read it. I will be learning how to collect and manipulate information (data) and apply it under a variety of conditions. Cool! It is comparable to PHP which gives WordPress all the logic needed to operate.

JavaScript is anything on the web that visually makes you go whoa that is cool! JavaScript and WordPress or really any modern web platform work hand in hand.

SQL is a database, WordPress uses MySQL. It stores all your blog posts and images. Cool!

The program takes an approach to coding that mimics real life implementation and a strategy towards approaching programming that can be used to approach yet another programming language. Cool!

I will have to keep a blog while I am in school, I am guessing this will be it. So if you want to find out what I am up to, then come back here.

So friends, fambam, and clients this brings us to wow Saied I always knew that you were incredible but that is incredible.

WordPress Clients

Now that we are past that, we have arrived at ‘what about my favorite WordPress guy’. I have some solutions! Many of which are a plea for your patience.

The big take away here is I will not be replying to emails as quickly as I have in the past. If you have an emergency I will do everything I can to resolve it as quickly as possible.

The program will run until the end of April. Come May my schedule will loosen up. Until then if we have a maintenance package setup everything will operate as it has been.

I will most likely not be taking on new work until May. If you have a request please shoot it my way and if I can make it work on a weekend I will.

Alternatively, I have a friend who is 10 times better at this whole internet thing than I am. Well not like literally 10 times and I am taller than he is so… I will approach said gentleman this week and see if he is interested in helping with any miscellaneous tasks any of you may run into.

Saied, honestly I have no idea why you included me on this email… I don’t know, I’m celebrating.

Check this out: WP Help.Co, my website for monthly maintenance services.

That’s it! Have some questions. Worried?! Reach out to me!

~ تمام شده ~