CSS Architecture BEM

I am so glad I took this course at Udemy. The course is called “Git a Web Developer Job: Mastering the Modern Workflow”. The instructor is Brad Schiff. The course is described as teaching Git, Github, Node.js, NPM, Object-oriented JavaScript, ES6, webpack, Netlify, BEM and job interview tips. I am not looking for a job but I did need to learn Git and Github for another course I was taking taught by Brad.

I am not looking for a job but I was looking to understand Git and Github. I needed them for another course I was taking by Brad to overcome the limitation of the free hosting service used in the course. That is a different story which I mentioned a few days ago.

Why I am glad I took the course is because I am finally starting to understand to use CSS to my advantage. Before this course, I always wondered how do you know what to put in the CSS file? It always looked like a lot of extra work for very little gain. Boy was I wrong.

Skill up and succeed with Udemy online courses. As low as $9.99 during our sale.

What I have learned is how easy CSS can make your website development. Using CSS can give you a very professional looking website. It can also take your website from an average, out-of-the-box website to a custom one-of-a-kind website with minimal effort.

To take full advantage of CSS does require some planning to avoid extra coding and consistency that provides that professional, custom look. You need to have a design for your website. You could even create the website’s HTML minimum formatting. Or, sketch what you want to the site to look like. With this vision in mind, You can apply the principles of BEM to your CSS, BEM stands for Block, Element, and Modifier. What are those you ask?

A block is an independent reusable part of your design. For example, your site might have testimonials. A testimonial is a block.
An element belongs to a block and should not be used outside of its block. For example, the testimonials have images that are cropped and positioned specifically to the block. The image is an element of the testimonial block.
A modifier can be used on a block or element to indicate a change to the default state of an object, For example, you could treat all the buttons on your site as a block. Some are blue and some are orange. You could use modifiers to change the color of the buttons.
Using the BEM structure will give you a professional, custom-looking site like no other. I have learned you can produce a site that is consistent in look and feel throughout with a little planning upfront, More about BEM tomorrow.

IAAC Video Day 117

This is my 117th day in the #iamalivechallenge. I am alive and doing very well. I hope you are doing very well as well.

Join us in the I Am Alive Challenge. Show the world you are glad to be alive in these difficult times, make some new friends, and start earning for doing things you are probably already doing. Click on the free ebook below for full details and get started today. (NO email required.)

I Am Alive Challenge