[Showoff Saturday] Version 0.1 design of my open source portfolio

Hi Developers,
Currently, I’m in the process of designing my portfolio that I will soon develop. Since I will spend so much time creating it, I will make it open source on GitHub for anyone to use.
Here is the current design: Design Version 0.1.
I will be iterating on this design. I would like to mention that I’m not a web designer by trade. Thus, I am very open to any criticism/feedback. If there is anything you would like to change or add to the portfolio, feel free to send me a message. I will consider all requests.

Signs Your WordPress Website Has Outgrown Its Hosting

Among the reasons so many people choose WordPress is that it can run on just about any web server. The requirements are fairly basic and something that most web hosts and local servers can handle. But simply installing WordPress in its default state is far different from running a high-performing website with it – especially…

40+ Best Sketch Templates of 2020

Sketch is a unique app that offers amazing features and functionality for creating app UI designs and mockups. Creating an effective UI for an application requires time, detailed attention, and—most importantly—an idea to get started with! In order to streamline the design process for creating your next app interface, we’ve collected the best Sketch UI templates…

9 Website Design Tips for Different Generations (Yes, It Matters!)

It’s a no-brainer for most designers that you plan a project based on a certain target audience. It might be for people who like soda or buy video games or have an affinity for athletic shoes. But another consideration can often be overlooked – designing for different generational segments. Age can impact how people use…

How to Test Responsive Web Design Cross-Browser Compatibility

HTML is an inherently fluid medium. Text and containers expand horizontally and vertically to use the available space. That fluidity made complex designs more difficult, so by the turn of the millennium, many sites adopted a fixed-width based on popular screen sizes.The process remained viable as screen sizes kept increasing from 800×600 to 1024×768 and beyond. However, the rise of smartphones and the iPhone launch in 2007 reversed that trend. Today, more than half of users access web pages on a smaller mobile device.
Note: Technically, smartphones often have a higher resolution than many monitors, but individual pixels become invisible. An iPhone 11 Max translates its 2688 x 1242 hardware resolution to a more practical 896 × 414 logical resolution. Each logical pixel maps to a grid of 3×3 real pixels, which enables smoother fonts and increased image detail.
The initial workaround was two sites: one for desktop and one for mobile, often with user agent sniffing to redirect as necessary. This rapidly became impractical as the variety of devices grew exponentially.
Finally, the term Responsive Web Design (RWD) was devised by Ethan Marcotte in 2010. The technique allowed the same site to work on any device regardless of screen size or viewport dimensions.
Our thanks go to LambdaTest for sponsoring the update to this older article, which we’ve completely rewritten for 2020. Please support the partners who make SitePoint possible.
How Does RWD Work?
There’s no single RWD approach or technology.
First, you must determine how a site design will react to differently sized displays. This is a challenge, and many of the first RWD sites took an existing desktop layout and removed sections as screen dimensions reduced.
A better technique was mobile first. It started with a linear mobile view, which worked on all devices then rearranged or adapted content as more space and supported browser features became available. More recently, many sites have adopted simpler layouts, where the mobile and desktop experience is mostly similar.
A typical example of RWD in action is the hamburger menu. Those on smaller screens can click an icon to view navigation links, while those with larger screens may see all the options in a horizontal list.
The following sections provide a number of technical implementation options.
HTML viewport Meta Tag
Regardless of any RWD technique, the following tag must be set in your HTML :

The width=device-width setting ensures mobile browsers scale logical CSS pixels to the width of the screen. Without this, the browser will presume it’s rendering a desktop site and scale it accordingly so it can be panned and zoomed.
Media Queries
Media queries were the primary basis of the first RWD sites. They allow CSS to target specific ranges of viewport dimension. For example:

p {
font-size: 1rem;

@media (min-width: 900px) and (max-width: 1200px) {

p {
font-size: 1.5rem;


Media queries are still used, although less explicit options are now available.
The HTML element uses media query syntax to control which image is displayed from a choice of options. This is typically used for art direction in order to display a suitable image for device viewport. For example:

CSS Viewport Units
The vw and vh CSS units represent 1% of the viewport’s width and height respectively. vmin is 1% of the smallest dimension, and vmax is 1% of the largest dimension.
These permit RWD flexibility, especially when used in conjunction with calc. For example:

p {
font-size: 1rem + 0.5vw;

CSS Columns
CSS multi-column layouts provide a way to create multiple text columns as the dimensions of a container increase. For example:

.container {
columns: 12rem auto;
column-gap: 2rem;

CSS Flexbox and Grid
CSS Flexbox and CSS Grid provide modern techniques which lay out child elements depending on their content and the space available. The primary difference:
Flexbox is used for one-dimensional layouts. Elements can wrap (or not) to the next line as necessary so columns may not line up.
Grid is for two-dimensional layouts, usually with identifiable rows and columns.
Either can be used to create an intrinsic layout (a term devised by Jen Simmons). In essence, elements are sized according to the viewport dimensions without the need for media queries. For example:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 1rem;

JavaScript RWD Options
JavaScript can also be used to determine viewport dimensions and react accordingly. For example:

vw = window.innerWidth,
vh = window.innerHeight;

Similarly, the dimensions of an individual element can be examined with offsetWidth and offsetHeight, although the getBoundingClientRect() method can return more information including fractions of a pixel:

element = document.getElementById(‘myelement’),
rect = element.getBoundingClientRect(),
ew = rect.width,
eh = rect.height;

Window and element dimensions can change as a device is rotated or the browser window is resized. The matchMedia API can parse CSS media queries and trigger change events:

const mql = window.matchMedia(‘(min-width: 600px)’);



function mqTest(e) {

if (e.matches) {
console.log(‘viewport is at least 600px width’);
else {
console.log(‘viewport is less than 600px width’);


Browser Support
The RWD technologies above all offer good browser support. The most recent option — CSS Grid — is supported by almost 95% of browsers in use today. However, it’s still necessary to test your site across a range of devices, resolutions, and browsers…
In-browser Testing
Resizing your browser window is a reasonable testing strategy for a few hours, but it rapidly becomes inaccurate and cumbersome. Most browsers offer a Responsive Design Mode which lets you select a device and user agent, rotate it, choose a resolution, alter the pixel density, throttle bandwidth, emulate touch, and take screenshots.
In Firefox, select Responsive Design Mode from the Web Developer menu or press Ctrl | Cmd + Shift + M:

In Chromium-based browsers, open Developer tools from the More tools menu or press Ctrl | Cmd + Shift + I. Then click the Toggle device toolbar icon:

Switch back to the browser tab to view the resized site:

In Safari, enable the Show Develop menu in menu bar option from the Advanced tab of the browser Preferences. Load a page and choose Enter Responsive Design Mode from the Develop menu.
However, be aware that these tools only imitate a device’s screen dimensions and user agent. They cannot accurately emulate the following:

Rendering capabilities
The browser will use its own rendering engine — not that of the emulated device. A CSS feature that works in Firefox would “work” on its emulated iPhone view regardless of actual support. That said, Chrome desktop will show a reasonable approximation to Android Chrome, and macOS Safari will be similar to the iPhone because they’re based on the same rendering engines.

Older devices
Testing the iPhone browser view on the latest version of Safari cannot accurately represent older devices with legacy operating systems and software.

High-density displays
You’re limited to your PC monitor’s physical pixels, so a site may look better or worse on a real device.

A mouse or trackpad has finer control than a touch-screen device with a small display. It may be impossible to view effects applied on-hover.

Processing speed
Your PC is likely to have a faster network and processing speed than a mobile device.

Mobile OS Emulators
Running an Android or iOS virtual machine on your device allows you to install and run real mobile browsers and use their actual rendering engines.
Android emulators include:
Genymotion: free and commercial cloud options, all Android versions for Windows, macOS, and Linux
Android Studio (and Emulator): free, Windows, macOS, and Linux
Visual Studio Xamarin (and Emulators): commercial, Windows and macOS
Bliss OS: free, Android 9 for Windows, Linux, and Chrome OS
Phoenix OS: free, Android 7.1 or 5.1 for Windows and macOS
Android-x86: free Android ISOs for any virtual machine platform.
Chrome is the obvious browser choice for Android, but you can also install Opera Mini, which is prominent on lower-powered feature phones.
Options for iOS are more limited:
These emulators still have downsides:
The software requires some technical expertise and uses considerable system resources.
Many iOS options are simulators. They adapt another rendering engine and will not always be accurate.
Online Testing Services
This segment was created in partnership with LambdaTest. Thank you for supporting the partners who make SitePoint possible.
Several online services allow you to test responsive pages on mobile browsers over the Web. In essence, you rent time on a real device and can view its screen in your browser. There’s no software to set up or maintain.
As well as live testing, some services include automated testing APIs which allow you to run scripts and check for styling regressions or broken user interfaces.
LambdaTest provides more than 2,000 combinations of device, OS, and browser. Features include:
testing localhost pages running on your development PC
debugging with integrated developer tools
geolocation testing from different locations
automatically generated, full-page screenshots across multiple devices
a built-in issue tracker
LT Browser software (Windows, macOS, Linux) to test and compare devices with auto-reload and scroll sync
Selenium-based automated test APIs
24/7 support
a free plan with unlimited access from $15 per month.
Sign up for a free LambdaTest account …

Alternative services which also provide live and automated mobile testing include:
Real Device Testing
Finally, there’s no substitute for testing on real devices. It’s the best way to assess actual processing speed, touch control, and your site’s responsive web design.
Ideally, you should test as many devices as possible, but your own recent smartphone may not be indicative of average hardware. Try to obtain mid-range devices that are a year or two old, such as a second-hand Moto G7 or iPhone 8.
Devices on the same network can access your PC’s server by entering its IP address in the browser. This can be obtained with ifconfig on macOS and Linux or ipconfig on Windows.
You can also connect a smartphone to your PC with a USB cable. This allows you to remote-control the device and easily access its developer tool panels for debugging. The technique varies across platforms but, to debug Android Chrome on the desktop edition of the browser:
On the Android device, select Developer options from the Settings and enable USB debugging.
Connect the device to your computer using an appropriate USB cable. The first time you attempt this, you may be prompted to confirm actions on one or both devices.
Launch Chrome on your PC and open in a new tab. Ensure Discover USB devices is enabled.
Optionally, set Port forwarding — for example, port 8888 on the remote device can be forwarded to localhost:8888.
Your device should appear in the list. You can now inspect a new or existing tab which opens the device’s developer tools:

To debug Safari for iPhone, do the following:
Connect your phone to your Apple computer.
Open the web page you want to debug in Safari on your iPhone.
Launch Safari on your computer.
In Safari on the computer, go to Develop > [your iPhone] > [website to inspect]. This will open Safari’s developer tools on your computer, allowing you to debug the site on your iPhone.
One Site, Many Views
Responsive Web Design technologies allow you to create a single website which can be viewed by anyone on any device regardless of technical limitations and boundaries. Making it a great user experience is another matter, but the range and capabilities of testing tools continues to improve.