I’m looking for suggestions for how best to structure my design in terms of HTML elements and modular CSS hooks (without relying on extensions, frameworks, libraries, etc.) or links to sites that have specific whole webpage examples of how to break a page down into modules, components, states and modifiers, etc, in keeping with a reputable coding style guide.
Whoops - first time user here, may have deleted my first reply… anyway, thank you for the suggestion - but I’d like to do this myself without relying on any fancy Photoshop extensions or CSS frameworks so that I can get a better handle on the basics of HTML/CSS.
Everyone has to get the basic idea of HTML/CSS, but softwares and plugins are meant to help us power up our work and effectiveness. Therefore When I look at your work, that you spent a few or a lot of hours to write this code. I see, the outfit is pretty miserable, not even finished, with some isuess( UI design ), I can do with adobe software within an hour or less, also with much better visual effects.
There aren’t many HTML elements to handle all the different things we might like to do, but when there are, it’s good to jump on them with glee. In this case, you’re working with lists, and HTML provides the “unordered list”, “definition list” etc., which are where I’d suggest starting. So …
<h1>List Name</h1>
<ul>
<li>Inactive list item</li>
<li>Inactive list item</li>
<li>Inactive list item</li>
</ul>
or
<dl>
<dt>List Name</dt>
<dd>Inactive list item</dd>
<dd>Inactive list item</dd>
<dd>Inactive list item</dd>
</dl>
There is no need to insult my work; it is neither helpful nor constructive. I never claimed it was complete.
I am looking to build the code myself, from scratch, based on what I understand to be needed and my working (and always improving knowledge) of HTML. I am not looking for shortcuts–the fastest way to do something is not always the best way.
Thanks for your reply. I had planned to use the unordered list element as you suggest, for the list. I was a little thrown off by my navigation in the header, since I’ve always seen those coded as unordered list element too, but I don’t think it makes as much sense when my list item elements are svgs or drop down menus.
I’ve talked with a friend of mine who happens to be a developer. I have some more concrete ideas now about how to go about things (for one, there’s a term for what I’m trying to do, and it’s called ‘slicing’). Just by using that term in my searches online, I’ve found a lot more resources for what I’m trying to do. I plan to post an updated link to an updated HTML file in the next day or two.
That was how it used to be done in the 1990s - that technique no longer applies when you need a modern responsive layout where any image of the page you have will only represent its appearance on some devices.
It’s the image that gets sliced, not the HTML, but as @felgall says that’s not a technique to use today. You probably just need to use your image as a background image.
Thanks @Gandalf. I’d love to update my post again so I’m not using the term ‘slicing’, but it seems I may have exhausted my edits to the original post.
What I am meaning to ask is a good way of structuring my HTML elements (and assigning/naming classes) so that I can write my stylesheets and scripts in a modular, scalable fashion. Ultimately, on my next project, I hope to use the Sass pre-processor for CSS, so I’d like to start thinking about and organizing elements with that in mind in my current project (the To Do List)- for example if I have a dropdown menu, I use:
.dropdown-container .list-item .is-active {}
Instead of doing this:
.dropdown-container__list-item--is-active {}
Where each item is the smallest unit of reusable functionality.
HTML should define semantically what each piece of the content is.
CSS defines how the page is to look to a particular group of visitors and gets applied to the HTML regardless of what the HTML is - at most you’d add ids and classes to the HTML to provide points to attach the CSS although even that is not always necessary given all the different CSS selectors available now.
The PSD would at most give an indication of how the page should look with CSS applied for a particular viewport width and perhaps provide some of the images that the page uses.
There’s lots of work being done on this by various people, who have come up with a range of solutions such as Object Oriented CSS, BEM and Smacss, to name a few.
One of these (can’t rememember which one anymore) had some good exercises.
Describe a photo in html & css.
I’ve been using these type of exercises to hire & find new templaters.
Thanks @ralphm. I’ve heard about those (and even started using at least the naming conventions for BEM in my codepen linked in my original post), but the resources I’ve found on them so far have been pretty abstract in terms of the application. I’ve begun inspecting the pages on the sites that promote a particular style (like the three you linked) for some idea of how to use it on my page.