web development

Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).



How can I easily test responsive web design?

I am currently developing a web page and want to test and debug the site for responsive web design. For example, on smaller displays, I want to display items that are usually displayed side by side on the page to instead be displayed beneath each other. Are there any other ways to achieve this other than simply resizing the browser window?

Work from the beginning directly on the server where the website would go live, and hide/restrict its access until it's ready.

Moving WordPress website to a live server

Creating a WP webpage on a local server and when finished moving it to a live server can cause different problems. For example the website I moved to a clients' server, ended up with a great amount of missing parts.

Trying to fit the screen in CSS

In a web application I am developing, I had a CSS design problem. I had a title bar on top and underneath I had the content. I needed to get the content to spread itself to fit the whole screen instead of squeezing itself to the top.

Debug JavaScript

When programming with JavaScript it may be necessary to debug functions, get to the roots of error messages and warnings and check variables'values.

Effects for Web Pages

In the 1990s web pages were really boring because they offered only static content that did not interact with the user's actions. Nowadays, thanks to technologies like AJAX and Flash we have the possibility to enhance websites with stunning effects and interactivity. <strong>Challenge:</strong> <ul> <li>Find an easy way of adding stunning effects and interactivity to your web page.</li> </ul>

Change data sent using POST method of HTTP

The main HTTP methods used for sending data to the web server are GET and POST method. When using the <strong>GET method</strong>, the data is encoded directly in the requested URL, specifically to the query part of it. The query part starts with a question mark and consists of pairs key, value in a form <code>key=value</code>, the pairs are divided by an ampersand. For instance to inform the web server that a user wants to log off, quite often the URL of the form <code>index.php?action=logout</code> is used. Therefore it is very easy to change the sent data. The <strong>POST method</strong> uses the body of the HTTP message to store the data. The user has no direct possibility to change the data. We want to find an easy way to do so.

Improve accessibility of a website

For differently-abled people it is quite complicated to access content on the Internet. To improve this the W3C consortium issued a recommendation called WCAG - Web Content Accessibility Guidelines. The <a href="http://www.w3.org/TR/WCAG10/">recommendation </a> defines 3 priority levels of the recommendations: [Priority 1] A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. [Priority 2] A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. [Priority 3] A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents. However a lot of websites does not fulfill even the Priority 1 recommendations. We want to find a client-side solution for altering of such pages for the people with special needs.

How to track your website's usage

There are various useless for a means to precisely track the usage of one’s website. The reasons range from curiosity, needing to understand what interests the visitor most or which category of visitors are the most important. The solution to this challenge should simply describe how this can be accomplished.
Subscribe to web development