Let’s rewind back to the year 1999, which is quite a few years ago. I just want to share how I learned HTML and CSS.
There was no YouTube back than, so no video tutorials.
Although information was available on the internet, at Borders (since went out of business) and on amazon, I could not grasp the concepts just by reading books and documents.

I am a visual hands on learner, so printed material are just reference sources for me. I need to get my hands dirty, by actually playing with the code.
To absorb the coding logic, I cannot look at screenshots, videos, or books alone.

If you’ll like me, try the technique below on how I taught myself.

Reverse Engineer
To comprehend how HTML and CSS worked together, this is what I did.

  1. I downloaded a free CSS template from: Free-CSS
    Now years ago these templates contained just the html and css files.
    Today, you will notice that the download packages are much larger, because they now incorporate the JS files and larger CSS due to the responsive scripts.
    That’s OK, we will only focus on the index.html and main.css files.
  2. Unzip the folder and store it somewhere.
    Keep the original files separate from the files to be edited (play around with).
  3. With a text editor of your choice (Atom, Brackets, Sub-Lime text, etc.), open both the index.html and main.css files, from the edit (play around) folder.
  4.  

  5. To view the webpage and your edits, you need to open the index.html in your favorite browser.
    To do this: right-click, and choose “Open with” (a list of browsers on your computer will appear).
    Select the browser that you will use.

This where the fun (reverse engineering) comes in.

  • Using online resources, find scripts or how do make changes to the html and css.
    Bookmark your favorite sites, because you will be going back to these sites over and over.
    Look at my code snippets list.
  • Remember to refresh your browser to view each change you make
  • Start off with simple tasks, change the background color of the body in the main.css file.
    Play with different font families, size, styles, etc.
    Move on to the footer: change the background color.
    Move on to the sidebar, the menu, etc.
    The objective is to learn the CSS div tags, elements, selectors, etc.
    Watch what happens when you play with these.
  • Experiment with margins and padding around different areas of the html using the css file.
    How about adding a background image to the body: experiment with repeat, repeat-x, repeat-y, etc.
    See how it affects the background.
    Change the size of the main menu font, change the hover style, etc.
  • How about the index.html file.
    Main menu: change the links, add a drop down menu, add a 2nd tier drop down menu.
    If the header has a hero image, try adding a slider in it’s place.
    Slider scripts are available on the internet: you may also have download the JS file that comes with the slider.
    So don’t forget to link to this JS file in the <Head>> section of your HTML.

Major overhaul of template.

  • If there is a sidebar, try moving the sidebar to the opposite side: left to right or vice versa.
  • How about changing the horizontal main menu to a vertical menu.
  • Using CSS, create columns within a Div tag.

If you are bold.
Build your own template from scratch.
You may use the CSS files from the download as a guide.
Attempt to create a useable template strictly from coding.
Yes, some things will not work at first, but research other examples and try it.

Trust me, at the end of the day, you will have learned something through all this “hands on” experience.
This is not a one day project, but something you should do a few times each week.

Bottom Line: In the end, when you edit a line of CSS, you can actually visualize the website change in your mind before you refresh your browser.

Keep Coding
 
Gerald Watanabe
 
IslandWebTek

Share This