Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Hey everyone! I'm looking for a forum-style platform similar to Stack Overflow where I can get some feedback on my first project. It's the first one I've built from scratch, so I'm open to any critiques or suggestions on what could be improved.

I have a few specific questions like whether using too many media queries is considered bad practice and how to tackle responsive design challenges like creating a hamburger menu. Currently, I'm struggling with controlling when flex items wrap in my menu - it's not behaving as expected when the screen size changes.

Additionally, I noticed that "flex basis" and "flex grow" seem to have a similar impact on the layout. I'd appreciate any advice on handling different widths for menu items.

Feel free to take a look at the code snippet below and let me know if you spot anything that could be optimized or changed for better results. Thanks in advance!

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: hsl(9, 41%, 19%);
  margin: 0;
  font-family: 'Bowlby One SC';
}

header {
  background-color: darkgoldenrod;
  color: hsl(9, 41%, 19%);
  margin: 0;
  padding-bottom: 0.5em;
  border-bottom: 3px solid rgb(112, 98, 98);
}

/* More CSS styles... */

Answer №1

Before diving into creating your own UX design, I recommend checking out the User Experience Stack Exchange.

IMPORTANT NOTE:
Have you thoroughly thought about whether starting from scratch is the right approach for your UX design? It may appear simple, but without a well-defined plan, it can become quite challenging. Consider experimenting with UX frameworks like Material Components for the Web or Bootstrap before attempting a professional project as your first endeavor.

If you are determined to proceed with your own design, here are some valuable tips:

  • Maintain consistency in element widths that do not occupy the entire page: avoid resizing the search box proportionally to the page dimensions.
  • If customizing your UX design, prioritize coherence by using consistent button styles with minor variations. Establish a standard design for all buttons using the .btn class, while adjusting height for buttons within navbars if necessary.
  • When styling an existing element (e.g., input type="text") from scratch, consider disabling default styles such as the "user agent stylesheet" in Chrome either manually (e.g., specifying outline: none for text inputs) or via -webkit-appearance: none on Webkit-supported browsers.


I hope these tips prove helpful 😊 (and hopefully they align with your query). For further guidance on creating your own design, UX Stack Exchange remains an excellent resource.

Update:
Following suggestions from Sheshank S., consider implementing a more appealing color palette. Explore this guide for insights; emphasizing the use of ample white space creates a sense of openness and breathability on well-designed websites.

Many successful websites utilize generous white space to enhance freedom, spaciousness, and readability.

Additionally, familiarize yourself with preferred colors among different genders (both genders tend to dislike brown and orange).

For continued pursuit of your UX design venture, delve into reading Universal Principles of Design by William Lidwell.

Another Update:
It has come to my attention that moderators may relocate this discussion to UX Stack Exchange at some point. That's just how things go.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML Input Hidden : Completely Concealed

I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...

How to use Nokogiri to efficiently extract targeted nodes from HTML

In my Ruby script, I am trying to extract specific values from an HTML document using the Nokogiri gem. The HTML content I'm parsing includes information about a user and their registered device. #!/usr/bin/ruby require 'Nokogiri' doc = No ...

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

Organizing content on a webpage with specific pixel measurements

I have a div and am utilizing Bootstrap 5. I'd like to have the Description and Length elements on separate lines when the page width is <=1024px. <div class="col-3 col-md-4 col-lg-3"> <div class="card d- ...

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

Steps for transferring a checked statement from an HTML document to a JavaScript file

Struggling to transfer checked statements from HTML to JS file {{#each readValues }} <br> Plug: {{@index}} => {{this}} <input type='checkbox' class="plug" onclick="sendData();" /> {{/each}} The code above is written i ...

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

Tips for aligning buttons in a row

I am trying to find a way to make my buttons more compact within a <div> element when the length exceeds 100%. Is there a way to achieve this while avoiding wrapping to a second line? Is there a solution similar to using scaleX, but one that takes i ...

Increase the size of clickable hyperlinks in CSS

I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you ...

Setting size using percentages in Semantic-UILet's explore how to define the size

Since discovering semantic-ui a few days ago, I've been impressed and have decided to switch my app from Bootstrap 3 to semantic-ui. I could use some assistance here. I'm attempting to split the body of the page into two parts. I would like the ...

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

The jQuery .html() function seems to only be functioning properly on the initial element

I'm currently collaborating with a partner on a project using WordPress and PHP for an assignment. We've made progress, but I’m encountering a particular issue. My problem arises when utilizing the .html() function in Ajax—only the first tab ...

Separate the text content stored in the database into individual paragraphs

I have a piece of text saved in my database : model.Description : "Bacon ipsum dolor sit amet fatback pork belly swine cow drumstick jowl" In my view, I would like to split the text like so: <p> Bacon ipsum dolor </p> <p> sit ...

Refresh page upon clicking the same state link in AngularJS using ui.router

Just received an interesting request from our QA team that seems a bit out there. Let's dive in: imagine you are already on the 'about' state/page within an angular-based app, and when you click on the 'about' state URL again from ...

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() => { setTimeout(()=>{ ...

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

Pressing a button within an HTML table to retrieve the corresponding value in that row

How can I click a button inside an HTML table, get the value on the same row and pass it to an input field called FullName? Thanks for your help! <td><?php echo $r['signatoryname'] ?></td> <td ...

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...