Sunday, March 31, 2019

The Past Five Years

I'm not sure if you've noticed but there's a gap of five years between my recent post and the post before it. The only excuse I could give for this gap is: life happened.

I won't go into details what exactly happened. I'm simply thankful that I can blog again.

There are some changes though. I won't be giving ActionScript and Flash tutorials anymore. I know. I know. You might be saying to yourself: "But you never gave any tutorials of sort." Well.. Now I definitely won't :P I loved programming with AS3 and Flash but since most browsers have dropped support for it, there's no point learning it from here on forth. (I might still make games with it though.)

What are the other changes?

I have recently enrolled for postgraduate diploma in Information Technology. I am now currently learning new technologies that I would love to share in this blog:


  • ASP.NET
  • C#
  • Node.js
  • PHP
  • MySQL
  • Continuous Integration/Deployment


and more! I will still continue giving guides for the Project Euler puzzles. I will still share mathematical and computer science concepts. And I will still rant about my programming life.

I hope you will continue to learn with me in this journey!

Poroporoaki! (Oh. Did I mention that I have recently moved to New Zealand? Yes. I'm studying in NZ now.)

Learning Web Development: CSS

CSS or Cascading Style Sheets is used to layout and style websites. HTML or Hypertext Markup Language is used to structure information in websites. You should not confuse the purpose of these two languages. When writing HTML, think how you want your information to be structured, not displayed. To design your website's appearance is CSS' job.

Layouting
One of the very first things that a web designer has in mind when designing a website is its layout. How big is the header? How many columns should the webpage have? Should the navigation stay on top or stay at the side?


This is an example of w web layout with a header, navigation menu, a main content between two contents and a footer at the bottom.
Example of Web Layout (Source: W3School)



This is an example of website layout taken from W3School. Another great website for learning layouting with CSS is the blog called Learn CSS Layout. Learn CSS Layout teaches the basic layouting and briefly introduces flexbox. To learn more about Flexbox, here is a complete guide to it. You might also want to learn about Grid, a grid-based layout system using columns and rows. The CSS Grid is also a great resource in learning Grid layouting.

CSS Coding Guidelines
Working on a project by yourself means you're only communicating with yourself so there's no need to follow conventions. However, most developments of software happen by teams and guidelines are needed to make sure that everyone is on the same page.
Here are some guides to check out:


You might be thinking, "Wait. So which one should I follow?" If you're working by yourself, choose the one you're comfortable with. If your company has different guidelines, follow the one that gets you paid (or make suggestions to improve their guidelines.)
Teams benefit from guidelines but it's also worthwhile to follow them even if it's a one-man project.

HTML/CSS Tools
  • The HTML CSS Javascript website provides free online tools to maximize your coding efficiency in web development. They have cheatsheets, templates, code cleaners and more. 
  • Do you want to create animations using CSS but doesn't know how to? Do you want to simply specify the layout you want for your website and get the CSS styles for it? Check out The Ultimate CSS Generator. (This website is actually called Web Code Tool and is not limited to CSS. You can also produce HTML and Javascript codes.)
  • Have no time to style your menus? Luckily there's a CSS Menu Maker which speeds up your web development by providing various menu themes.
Note: These are simply tools to aide you in your web development. Don't rely on them and ditch learning CSS. Knowing how CSS works and how to read CSS code are necessary to be an effective web developer.

Web Development Learning Websites
Want to enhance your knowledge in CSS or web development in general? Here are some websites to visit to unleash your web development skills:

I hope you found these resources helpful. Pang signing out.