Looking for feedback on my blogging website
Hello, I am looking for any feedback on the content, readability, design or anything would greatly be appreciated . Also I would like some feedback on styling my Tables of Content. Should I do
list-style: none; on all the li elements or just the children of the li elements?
https://blogbydave.netlify.app/blog/40 Replies
this ... is scary
putting aside the choice of font, the headers aren't big enough and they all look the same
or waaaaaaaaaaaaaaaaaay too tiny
this would be great as a wizzard with steps or an article per problem
and bigger titles
you also don't style these, and don't add a link to jump to the header, which makes keyboard-only navigation a chore
the images also don't open in a new window or a zoomable pannable dialog, which is stupidly useful for cellphones
Gotcha, that would make sense. I also found that all my blogs to long. Yeah navigation is a chore. Jumping back to the Header is a good idea. I wonder how I could implement that style wise. Maybe a link on the right side of the site?
yup, a link on the left or right would help a lot
You mean click on the image and the image opens in a new window? Also you got examples of zoomable pannable dialog?
either a new tab or just how those sites do when you click on an image and it opens separatedly
you know, like how discord does
Oh ok, I gotcha now. For my tables of content should I remove the list-style?
I mean set it to none.
no, but you should do better use of css counters
Oh ok, I'll look into that
you know what you could add that almost nobody else does?
collapsable checkable titles
so we can keep track of which step we've done
Yeah, I could look into that. I don't know how to code it but there should be a video on it out there maybe.
a simple checkbox
maybe a <details> too
Well I am using <details> already. What functionality with <details> do you think I can add?
the collapsed headers that hide the content
Oh ok, I'm not that good with CSS yet but I will give it a shot. Gotta search some documentation on <detail> or find a collapsable checkable title tutorial on Youtube. I'll come back and ask for help if I need it, once I give it an honest shot.
you can make a quick proof of concept with just a checkbox inside the title of the
<details>
but try it, give it a good shotOk so I found a reference that I would like to use for the main header navigation. I want it to be a button that points upwards and when you click it, it will bring you to the top of the page. Like this website here. https://css-tricks.com/snippets/css/a-guide-to-flexbox
Do you know if I have to use Javascript to accomplish this? This is all I could gather from developer tools
Chris Coyier
CSS-Tricks
CSS Flexbox Layout Guide | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
that's just a
<details> tag
if you don't want to do all the links manually, for the headers, you can just use javascript to generate the links and everything
or do it server-sideYou mean this button at the bottom right of the website? I didn't see a <details> tag in the inspect. Or are you talking about <details> tag for my own website?
the titles
on that link
Oh ok, I was referring to the button. For the website that I linked do you think that would be a good idea if I did my titles like that too?
That's the collapsable title think you were talking about right?
it is
the button pointing up?
Yeah you have to click on the black sidebar to get it to appear I think? I was asking if I need to do Javascript in order to do something like that
no, i think you can do it with just css, using scroll-based animations
Ok, and you said I can write a JS script that will grab the links for me and apply the <details> element on it?
no, you can write some js to generate the links, or whatever you do for the menu on the side
I use a plugin for eleventy so I have the links for the headers generated already. That's how I got the Tables of Content
then try to find a plugin or write your own
Hello, hope you don't mind me messaging again but I found out something that could help me make the new window images. I think it's called a modal image.
I tried following Kevin's Powell video on it but I got confused on how I could apply that technique with an image. Since he uses it as a dialogue button
https://youtu.be/TAB_v6yBXIE?si=GL5fY-OwQqS5o7YF
Kevin Powell
YouTube
dialog = the easiest way to make a popup modal
Ever needed to make a modal? Well, we have a native HTML element that does the job with the dialog element! It does a lot of things out of the box that are really awesome, so let’s see how it works!
🔗 Links
✅ Codepen: https://codepen.io/kevinpowell/pen/KKyOYvM
✅ The polyfill: https://github.com/GoogleChrome/dialog-polyfill
✅ a11y modal: htt...
well, instead of showing text, you can just have an image inside
that's literally it
Something like this?
<dialog class="modal" id="modal">
<img src="/assets/blog/blog-1-installation-method-1.png" alt="">
</dialog>
basically
and a button to close it
This will need to be done for every image?
Wrap a <dialog> class on it?
Is there a way for it to be done automatically?
Maybe through Javascript?
you can generate it server-side
you can do it for just a single image
Hello I did figure out how to create modal images on my site thanks.
I have a problem with my image not displaying fully in container eventhough I gave my image the property of
object-fit: contain;
https://github.com/DaveSamuels1998/Dave-Samuels-Blog
https://blogbydave.netlify.app/blog/2025-01-23-enable-administrator-account-vmware-network-adapter-settings-creating-static-ip-address-deleting-user-accounts-without-server-manager-installing-rsat-tools/GitHub
GitHub - DaveSamuels1998/Dave-Samuels-Blog
Contribute to DaveSamuels1998/Dave-Samuels-Blog development by creating an account on GitHub.
instead of sizing the container, size the image