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:
https://teamtreehouse.com/library/html-basics-2

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: https://josue.me/ttpractice/html_basics/

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: https://teamtreehouse.com/tracks/web-design

  • 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=-