Browsersync – Auto Reload changes to sites

I’m a visual person so having something change when I modify is very gratifying. So it’s nice to see my changes take effect while I’m coding.
You can achieve this in various ways.
The easiest is to just use a code editor called Brackets it has a live preview mode which is nice.
But what if you don’t want to use that editor? Well there’s other tools that provide this functionality along with a GUI.
The best one I know is Codekit. It’s a fantastic tool but it costs $34.
If you’re like me and just need to reload the browser then that’s a bit much. I know it does much more but I’m not at that point yet.
With that being said I’m using Browsersync

First you need to install NPM then as mention in the Browsersync website run npm install -g browser-sync

Once you got it all installed it’s time to start it up.

I just wanted it to watch changes on html files and my css.
So here is how I got it going:

Starting Browsersync to watch specific folders.

Then it opens a browser window to the server creates and that’s it!

Practice HTML Basics P2

My previous post was about finishing up the basic web page by adding some styling through CSS. I achieved that but did encounter an issue I was unable to resolve when using a CSS propery called clip-path. It’s what creates the angle cut on the “Hero Image” (the large background in the top).
Too bad it “clipped” everything after it!

Web page clipping issue.

The reason for that was because everything was inside the same container (div) the property was assigned to. Ok so I put the content in another container to solve it.

Web page still clipping an image.

But this still clipped the VR user image.

Here is where I was stuck!

I reached out to the Treehouse Coummunity and posted my issue.
Luckily someone replied and solved it.
Turns out you need to use position:relative to force the VR users image to be on top.

Fixed web page

Practice: HTML Basics

I decided to take things further by practicing some HTML and CSS.
In the following course:

You build a basic HTML page with out CSS.
At the end of the course the instructor Guil Hernandez shows us a small preview of what can be done with further work. It’s a finished version of the site we just made.

Thumbnail of a finished website by the instructor.

Here is what I worked on.

You can view it here:

It still needs work like being fully responsive, image optimization and the angle for the image.
But it’s a start.

Treehouse Web Design Track P1-2

This is a series to do quick recaps of what I’ve gone through and learned in Teamtreehouse‘s Web Design Track.

Introduction to HTML and CSS

This is the first course in this track. It’s used to familiarize you with what a basic website is made up of. It also gets your hand wet. Aka you start modifying the example website. Sort of like a chef showing you how a pizza is made. Yeah you’ve eaten a pizza before but do you know some of the steps involved in making it? Here put some pepperoni on it.

To sum it up it’s an overview of how one would modify a website to give you an idea of how they work.

Next up is:
HTML Basics

For the second course we go to the foundation of all that is the web: HTML. I liked going through this course as it reminded me on where to start my thinking. Where it matters the most and with it’s original intent. Which was for sharing information.
Let’s put the information on the page first in a way that makes sense. Then after you can worry about how it looks.

To sum it up: you learn Semantic Markup which gives meaning, structure, and reason to the info you are putting on the page. And of course some other tidbits like text, links, images, and such. In essence if we take away the images, CSS and Javascript from a page it will still be easy to understand and convey the proper information a document should.

Here is some example code:

See the Pen HTML Basics - TH by josue (@josuerodriguez) on CodePen.

Reviewing what I learn through Teamtreehouse courses

The worst way to learn is to watch something and not do anything. The best way to learn is to get knowledge and put it to use. The best way to master something is to practice it and for a long period of time. My mistake was not putting to use what I learned so because I didn’t practice it gets lost. On the contrary if you practice it you learn even more thus the mastery aspect of it.
There is more to this story but the main idea is that you have to practice as much as possible. How can you practice? Talk about what you learned. Make what you learned again and again. Create something new based on the lesson. Teach others and document it.
My goal now is to do a short recap on what a course entails and what I learned from it after going through it. I could also add an example of what you can create with the course section.

I’ve gone through various courses in the treehouse library and I even completed the Web Design Track. That track has since been updated with new content and older content has also been removed. This is actually great because it feels like it keeps things fresh and up to date. When I finished the Web Design Track previously I had a sense of accomplishment but not much confidence I had learned to the best of my ability. This time I will be going through it again with the benefit of having new content (courses) along with documenting my learning and practicing it as I mentioned before.

If you want a quick glance of the courses in the Web Design Track I will post a list of them at the end of this post. Or you can view it your self by visiting this URL:

  • Introduction to HTML and CSS
  • HTML Basics
  • Web Design Process
  • CSS Basics
  • CSS Selectors
  • HTML Forms
  • HTML Tables
  • Web Typography
  • CSS Layout Basics
  • Responsive Layouts
  • CSS Flexbox Layout
  • Bootstrap 4 Basics
  • Prototyping in the Browser
  • CSS Transitions and Transforms
  • SVG Basics
  • Animating SVG with CSS
  • Sass Basics
  • CSS Grid Layout
  • -=Track Complete=-

2018 Objectives

I want 2018 to be a productive year.
So for that I need some objectives and a path to get there.

What do I want to work on?

Front End Design & Development

For Front End I want to have the confidence of saying “Yes, I can make that.” when it comes to a project.

For Cooking – I’ve always liked to cook and I want to share that more through my Youtube Channel. I also like health topics which relate to the quality of food, Ketogenic Diet, LCHF (low carb high fat), Paleo, and health in general. I can mix that in with my cooking.

Photography/Videography is something to compliment my Youtube and Instagram. I want to get better at it to present my work in the best possible manner.

So in summary here is a more solid view of what I want to do.

Front End: Study but most importantly PRODUCE WORK. PRACTICE PRACTICE PRACTICE!

Cooking: Film Recipes for my Youtube channel which are my personal favorites. Also add ones that have to do with Keto and Paleo.

Photography/Videography: Learn through doing and share my process. What lens, lighting, and more is needed to produce what I make.

Let’s do this!

Just Start

It seems we share much more online these days. A lot of it also is presented in its final state. So we only get to see the nice finished version and everything is perfect. This can be a negative thing in various ways. First it can make it seem like everyone does amazing work when in fact it probably took many iterations to get that final piece. And second which is more important to me is that it halts progress through trying to perfect something before posting it. I’ve heard both sides of the story on this: “Only post your best work” and “Just Ship”. Having a blog might be a solution to both. It’s a place to post work in progress or what ever it is that I’m learning and if anything great comes of it then it can be used as a showcase piece on the main part of the website.

Here’s to avoiding paralyzation through over analyzation.