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 am in the process of converting a game from Javascript/jQuery to Vue. This particular game is entirely controlled by keyboard input, with no mouse interaction involved. Players navigate through the game using the "up" and "down" arrow keys to cycle thro ...
Is there a way to successfully download a large 400+ mb Json file using xmlhttprequest without encountering the dreaded Ah Snap message in Chrome due to its immense size? One potential solution I've considered is implementing setInterval() to read th ...
Currently, I'm looking to retrieve a collection of objects using JavaScript from a JSON file that resides on my website. While I could easily embed the array of objects directly into my JavaScript code, I am interested in understanding how to work wit ...
I've been working with requireJS in my application. Every time I try to register a controller on my module, it gives me an error saying that the controller is not defined. Here's the code for my LoginController located in login.controller.js: f ...
I am currently working on creating a world map using D3. I obtained the JSON file from the following link: https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json Below is the code snippet I'm using: // Defining SVG dimensio ...
Is it possible to create a triangle in CSS that smoothly transitions between two colors without relying on a hover state? .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; b ...
After following the guidelines outlined in the migration documentation (v4 to v5), I have implemented the changes in my theme: import { createTheme, Theme } from '@mui/material/styles' import { grey } from '@mui/material/colors' declar ...
For the past few weeks, I've been working on a React app where I heavily rely on Material UI components. One particular component changes its style based on the values of its props. To achieve this, I used the following approach: const useStyles = ...
I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...
I found this helpful resource at: I decided to test out the second block of code. When I made changes in the handleForm function, it looked like this: function handleForm(e) { e.preventDefault(); var data = new FormData(); f ...
Attempting to implement custom validation in Angular 2 has been a challenge for me. I have followed the necessary steps based on my understanding, but still struggling to get it working. import { FORM_DIRECTIVES, AbstractControl, ControlGroup ,FormBuilder ...
Asking for some guidance on a few queries I have. I've developed a backend node server with express & mongo to run specific tasks and store them in the database, along with creating an admin page using express & bootstrap. Everything is functioning s ...
Is there a way to read all JSON files within a folder in my Meteor application? This is the structure I currently have: /server -- /methods -- -- file1.json -- -- file2.json I've attempted to read all JSON files using this code snippet: var ...
Currently, I am facing an issue where I need to click on a link using Selenium and Java. When searching for the link using XPath, I am encountering a problem where only white spaces are displayed instead of most of the webpage content. The highlighted link ...
I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...
I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...
I recently added persisted state to my Vue application using the command npm install --save vuex-persistedstate. After that, I configured my Vuex store.js file in the following way: import Vue from 'vue' import Vuex from 'vuex' import ...
I am currently working on a project where I need to load JSON using a JavaScript function and then make the loaded JSON objects accessible to other functions in the same namespace. However, I have encountered some difficulties in achieving this. Even after ...
I have encountered an issue where a simple grid, with the gaps set to 0, displays a small line when I apply the transform:scale(1.5) css property. I am unsure if this is a bug or if I am doing something incorrectly. Interestingly, the result in Firefox dif ...
Implementing Google Places for a location text box has been successful. However, I am now looking to create a class-based implementation so that I can use it with multiple places effortlessly. Is it possible to achieve this using JQuery? <script type ...