#CNC2021: Write More - Tutorial Blog (Rough Draft)

Introduction

In today’s day and age, a lot of people are on their phones. Like, a lot (a lot). A 2020 study from the Statista Research Department found that “the number of unique mobile internet users stood at 4.28 billion, indicating that over 90 percent of the global internet population use a mobile device to go online.” So when I say “a lot (a lot) of people”, I mean more than the populations of China, India and the United States combined!

What this information means to a web designer is that a lot (a lot) of people view most of their daily consumption of websites on smaller devices. The problem for #newbie1 coders is that typically, many tutorials teach students to code with a code editor on a computer. Coding on a computer is perfectly fine except for the viewport2 your code is viewed on.

Not all code is the same. Well, not all designs of your website code is the same when viewed on different devices. Doesn’t sound as theatrical but it’s important to know specifically that your website on your 15.6” HP Pavilion laptop isn’t going to look the same on your 6.1” iPhone 11.

Enter in the media query3! This is a neat statement4 to add to your CSS code to apply different CSS style code based on the device width5. Media queries are vital for responsive web design6 as they allow you to create different layouts of the same website based on the viewport.

Another way to phrase that definition is: Media Queries, which are specially defined CSS code, can make your website look different (in a good way) on bigger and smaller devices without changing the HTML or original CSS code.

This is a Bit Much...

Alright, this blog is starting to get too technical which isn’t my aim for a tutorial blog. I personally learn best by example so I will explain responsive web design using media queries with an example.

The example I’m going to use for this tutorial is turning this simple navigation bar:

[ IMAGE OF DESKTOP NAVIGATION BAR ]

into this mobile friendly navigation bar:

[ IMAGE OF MOBILE NAVIGATION BAR ]

based on the device viewport.

For this tutorial you’ll ideally need an IDE, or text editor, basic knowledge of HTML and CSS, and a way to run your website code on a browser. If you don’t have an IDE, you can use online alternatives like Codepen.io which is a free, online code editor for anyone to test and publish their HTML, CSS and JavaScript code.

Let’s Get Started

I broke down this tutorial into 6 steps. Each step has an image that will show you what that steps’ result should look like. I also included the code via a Carbon image so you can see what I did behind the scenes to make that step result. It’s best if you follow along at your own pace, step-by-step, but if you’re in a hurry to get the final result, the source code is at the bottom. 👇

[ IMAGE OF NAVIGATION WITHOUT STYLING ]

Step 1: Set up your navigation code

The first step is to create your website content then style it accordingly to your typical workspace viewport (i.e., start by making your website as normal).

Side Note: A growing trend today is “Mobile First” Design where you would start coding and designing your website with small devices in mind like phones before larger devices like desktop computers. This can go back to that Statista Research Study of 90% of the population using their phones for internet consumption.

For this tutorial though, I will be showing you the navigation example from a desktop screen size to a phone screen size. I’m doing this as it’s best to show the differences and dynamic change from bigger to smaller as many coders are still learning to make websites “Desktop First”.

Since this tutorial is only over the website navigation, I’m only including the nav tag in the HTML code. I personally use ul and li tags for my navigation list as I find it easier to target and style in the CSS later on thanks to the nature of the list tag.
I’m also including a span tag for the logo as the logo is a separate but related part of the navigation bar. You can use a div tag as well but I tend to practice using Semantic Elements in HTML versus using div over and over again.

Don’t forget to add your id and class attributes to your code as this makes styling in general easier, reviewing your code easier and it’s just good practice to do as you never know if you have to make a specific part of a specific section of a specific page the color green with underlined text for some reason.

[ IMAGE OF HTML CODE ]

There isn’t any styling yet so the result is just a list of the navigation links with the logo text.

[ IMAGE OF NAVIGATION WITH DESKTOP STYLING ]

Step 2: Style your navigation

The second step is to style your navigation to look beautiful and function correctly in the desktop screen size.

The best tip to offer when using CSS is to do as the language is named for: Cascading Style (Sheets). What I mean by this is that you should start styling what’s first in the code and work down the flow of content. So, I start with styling the nav tag, then the span tag, then the ul tag, then the li tags and finally the a tags. I work my way into the tags as the more nested (inside) a tag is, the further “in” the CSS code needs to be.

For example, see line 99 of the CSS code. To style the a tag, I need to reach “in” the nav tag all the way to the a tag with the ul and li in between.

[ IMAGE OF CSS CODE ]

[ IMAGE OF NAVIGATION WITH DEV TOOLS ]

Step 3: Use Developer Tools to View in Mobile Viewport

The third step can get tricky if you never used developer tools or have run your code before. Running your code is more commonly discussed in computer software languages like Java and C++ but you still need to do it for web design too.

If you’re using an IDE, you can install an extension to run your code in a browser. This will show your website on a predetermined (or chosen) internet browser linked from your IDE code.

I personally use VSCode as my IDE. To get my website code to a browser, I use the extension: “Live Server”. This extension, and many others like it allow you to run your code on a browser with a click of a button. There are other popular IDEs on the web; some are free, some are paid and some are exclusive to your operating system. Some other popular editors to know about include: Atom.io, Sublime Text, Notepad++ and Brackets. (jetbrains, azure, visual studio, dreamweaver)

If you’re using an online code editor, there should be a function to run your code on that editors’ live demo view. Some online editors have your website code linked live to the demo view so as you type, the demo is automatically updated to your changes.

Step 4: Create a media query

Step 5: Adjust the navigation style

Step 6: Use Developer Tools to View in Mobile Viewport Again

Conclusion