No luck with WordPress, will MODX be easier for me?

Getting Started
3

If you’re willing to learn a little about HTML and CSS (not hard. I hate gatekeepers) you should be able to get something done but it may not be your end goal.

First, is getting a design into MODX which tyically starts with finding a page template, splitting out the header, footer and then whatever in-page content subcomponents into Chunks and included in your template.

This may be sacrilige to some folks here but I have had good luck with Claud AI in taking an image or some HTML and using a good prompt to have it give you the HTML and also include the dynamic MODX Resource and System Settings tags.

I prompt I used by uploading a screenshot of a webpage was as follows. In my case I asked it to give me the result using TailwindCSS, but this could be just standard CSS or Bootstrap or any other way you want.

Please analyze this image and create an accessible webpage implementation with the following specific requirements:

1. Semantic Structure & Accessibility:
   - Use semantic HTML5 elements throughout (header, nav, main, section, article, aside, footer, etc.)
   - Implement appropriate ARIA landmarks, roles, and attributes where semantic HTML alone isn't sufficient
   - Ensure proper heading hierarchy (h1-h6)
   - Include skip navigation links
   - Maintain logical tab order
   - Provide appropriate alt text for images
   - Ensure interactive elements are keyboard accessible
   - Add ARIA labels and descriptions for complex components
   - Implement proper focus management for interactive components

2. Layout & Styling:
   - Implement using Tailwind CSS utilities only (no custom classes)
   - Match the exact positioning of:
     * Logo placement
     * Hamburger menu location
     * [Any other key visual elements from the image]
   - Provide responsive behavior specifications
   - Ensure sufficient color contrast ratios

3. Technical Requirements:
   - Integration with MODX CMS and FormIt
   - Include a complete meta header section optimized for SEO
   - Implement a base element with `[[!++site_url]]`
   - Use relative URLs throughout

4. MODX-Specific Elements:
   - Identify all required MODX tags and their purposes
   - Flag any custom TVs that need to be created
   - Include FormIt snippet calls and parameters

5. Accessibility Documentation:
   - Document the purpose of each ARIA attribute used
   - Explain any complex interactive patterns and their accessibility implementations
   - Note any required screen reader considerations

Please provide the implementation with clear separation between:
- Semantic HTML structure
- ARIA attributes and roles
- Tailwind utility classes
- MODX template tags
- Required TVs and system settings

Additionally, please note any accessibility features that require JavaScript implementation.
3 Likes