After 5 years of creating webpages, I have realized that my sites tend to have a nostalgic 1995 internet vibe. Despite being a C# programmer with knowledge in HTML, JavaScript, and CSS, my design skills could use some improvement. Is there a quick reference guide for web design do's and don'ts?
Note: While my websites may not look visually appealing, they are functional!
Check out these valuable resources - they may be older but are still highly relevant:
Exploring the Principles of Stunning Web Design
Mastering Five Simple Steps for Colorful Design
Evaluating Your Site Design: The C.R.A.P. Test
Take a peek at the HTML, CSS, JavaScript, and assets of your favorite websites. Everything you need is right there - that's the beauty of the open web.
While you may be seeking visual assistance, I recommend checking out this guide for important technical considerations:
If you're looking for a great example of what not to do, check out this link:
Unfortunately, there isn't a strict set of guidelines for web application design and user experience like CUA offers. There are resources available for finding aesthetically pleasing designs:
Browsing websites like Smashing Magazine regularly can provide valuable insights on layouts, design templates, typography, and optimizing workflows for different types of websites.
Utilizing an asp.net template in my last project drastically improved the initial look and feel of my app, making it more appealing to end users right off the bat. Your mileage may vary, so experimentation is key!
Take the time to familiarize yourself with the fundamentals of design - concepts such as the rule of thirds, equilibrium, symmetry, contrast, rhythm and patterns, as well as proportion (divine proportion).
Dedicate an hour to researching "principles of design" and be prepared for the creative inspiration it may spark for your projects.
When I first started out, this book was a lifesaver for me. It has been a go-to recommendation for many people who have found it extremely helpful:
The Non-Designer's Web Book
In addition, the author's comprehensive design book is also worth mentioning. It delves into design principles rather than getting bogged down in technical minutiae.
Make sure to take a look at Dan Cederholm's bulletproof CSS
I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...
I've come across a seemingly simple problem that I just can't seem to solve. My current project involves working with an asynchronous messaging bot. In this particular scenario, the bot is supposed to react to an event by calling a Restful API a ...
After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...
Within my codebehind file, I have defined a CSS class. When I use the "class" attribute on normal HTML elements, the style is applied correctly. However, if I apply the class to a MudElement using the "Class" attribute, the style does not get pulled. Altho ...
I am seeking a way to streamline the process of generating block comments for documentation in vim. For example: /** * comment */ Are there any available plugins that can assist with this task? ...
I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...
Based on a recommendation from a discussion on this link, I decided to mock the readFileSync function and then mocked my outer function. Now, my goal is to verify whether the variable's value has been set as expected. file.js const fs1 = require ...
I attempted to create a pie-chart using extjs, but unfortunately, the pie-chart is not showing up. Interestingly, when I pass the JSON data through AJAX inline, it works perfectly fine. However, when I try passing it through a file, it doesn't work a ...
Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...
Presently, I have this item: https://i.stack.imgur.com/0dBd9.png however, my objective is to achieve this look: https://i.stack.imgur.com/NEBZf.png The code snippet in question is as follows: .bonus-div { width: 290px; height: 29px; ma ...
$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...
I've been struggling to save an array containing the items in my online shopping cart. Even though both the object and the array are being filled correctly, when I check the sessionStorage, it shows an array with an empty object. I've spent a lot ...
As reported by Axios, it seems that this is a feasible solution: https://github.com/axios/axios/issues/462#issuecomment-252075124 I have the code snippet below where pos_title contains a value. export function getQuery(pos_code, id) { if (id === 94) ...
Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...
There is no argument constructor in the base class and it is not serializable, so I tried using Object During deserialization, an exception was caught which stated: The constructor to deserialize an object of type 'ProjectHttpClientEx' was not ...
I've managed to establish a successful connection between my custom server using Node.js and Express.js with Next.js. The issue I'm facing is when trying to fetch a specific car by its id upon clicking it among other cars, as I keep encountering ...
In my backend development with Sails JS, I am utilizing ES6/7 and have created a class to handle background tasks. After reading a post on StackOverflow (link), it was recommended to initiate background tasks in config/bootstrap.js. Following this advice, ...
Here is a simplified code featuring a reusable button component: import React from 'react' import styles from './Button.module.scss' const Button = (props) => { return ( <button type={props.type} className={styles.btn} onC ...
When attempting to input text into a username field, I encounter an issue where the SendKeys() function errors out with a message stating that the element is not interactable. Despite already waiting for the element to exist, the problem persists. Below is ...
In the process of creating a web application, I am faced with the task of registering users based on their specific category. To accomplish this, I have incorporated a combo-box where users can indicate their user type. My objective is to display an appro ...