Responsive web application

I decided to create a website to share my project portfolio and write blog posts that are related to tech, programming, simulations and software development. I went against the advice, I saw online, that says one should not build a website for the main purpose to share a portfolio or blog posts. This is a sound advice because if the website is not finished being built, the project portfolio and/or blog posts will never be shared with anyone. I went against this advice because I wanted to improve my web frontend skills. I also assumed it will not be too difficult to build the website because I would be using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript (JS). Well, I won't say I did not learn something new.

There are things that should be considered when building the frontend of a web application. One, being that the web application is responsive to devices with different screen sizes. The first website I built was not responsive when viewed from a mobile phone, the content would reach the footer of the website. Luckily, this can be solved by using the @media CSS rule. The @media CSS rule can be used to deliver tailored style sheets depending on the device/media used to view the web application. As an example, this rule can be used to hide certain features of a web application if the application is viewed on a device with a small screen. In one case I used this rule to collapse the navigation menu into a hamburger button if the screen size is less than or equal to 787px.

The @media rule proved to be a very useful and easy to use tool to create a responsive website.