All solutions

I'm calling time on this one as I'm really wanting to focus my time on React and Next, and in particular server side rendering (not CSS!). The layout is just about passable on desktop...

It's my first solo project using React and Next and I have to say I like it. I love that things still work even without JS. I took some liberties with the design - for example, the detailed view of a picture is done on another page rather than a modal as I wanted to practice routing and using server components.

I'd particularly welcome any comments on the use of Next and how this could be improved.

This was another tough but good one! I'd especially welcome feedback on how I can better structure my app, and really get into the "thinking in React" state of mind. I feel like I'm getting there but not yet arrived.

There are a couple of issues on mobile (for very small screens) and honestly, I don't really want to think about a11y for this one as just dealing with React is enough, but I'm pretty sure a lot more work would be needed to make this production ready!

Any feedback/comments/criticisms most welcome!

I'm calling time on this one - the final modal design doesn't match the brief, but I really wanted to focus on React and CSS with this one (I wanted to do it as a modal rather than part of the form).

I'd really welcome any thoughts on:

• How to improve my code structure
• Any basic errors or React newbie mistakes
• Anything else you can see!

Thanks in advance for any comments.

This is my second project using React and first using styled components. I put some details in the readme, but some issues/questions I have are:

• One issue I had with styled components is keeping track of whether the components in the file were now React components or styled components! I also struggled mapping the styled components to the rendered DOM in the dev tools, which made debugging a bit tricky in some cases. How to people manage this?
• 'React.useEffect` is asking for additional dependencies in a couple of places in board.js (see FIXMEs). The only way I could get the app deployed was to ignore them. If I add them as suggested I end up with infinite loops. I wasn't sure how to deal with this if any one knows how to deal with this I would love to know.
• Board.js is a bit of a monster, I had a look at refactoring things, but I couldn't see any obvious ways to do this. I considered moving the remaining game logic functions out, but they all change state so this didn't seem sensible. Any suggestions would be welcome!

Thanks in advance for any suggestions and feedback. Cheers Dave

This is my first project using React. I've just starting learning React, and still not comfortable with it, but I'm starting to see some of it's advantages when applied to a project like this one.

Any suggestions for improvements on the React side of things are most welcome (please do keep in mind I'm just starting with React though). The CSS is a hot mess so please just ignore that part. I've also only focused on React here, not a11y, semantic HTML, well structured CSS, and all the things I usually love.

I added the form at the end to enable you to change user so you can play around with things more easily. All changes should be saved to local storage so you can mess around without worrying about loosing anything.

I enjoyed this one as it seemed to play will with an 'intrinsic design' approach. I feel like I'm getting better and more used to this approach, and I think it's a lovely way to build pages.

I only used one breakpoint in this design which is to adjust the alignment of text in some sections. Any feedback or suggestions for improvements are most welcome. Thanks!

Getting both to the dropdown and burger-menu to work without Javascript as a fall back has been a challenge. The result is OK, but not perfect, if JS fails the dropdowns will activate on hover, and navigation items will wrap, remaining visible, instead of being hidden by the burger-menu.

I'm still working on an intrinsic design approach, and the only breakpoint in the page is to left align the main content at larger viewports. I'm getting much more comfortable with this approach now, and I feel like its a lovely way to build things. The main advantage is that it relegates breakpoints to minor tweaks rather than massive layout shifts.

Any suggestions for improvements are most welcome.

Another attempt at intrinsic design. I think the layout is mostly working OK but have two issues that have flummoxed me that I would welcome advice on:

• The h1 should be white on the black background, and black otherwise. I have tried following some online tutorials using mix-blend-mode for this but cannot make it work.
• For some reason, object-fit and object-postioning don't seem to have any impact on the map image. This is only really obvious on large screens, but again, I am a bit unsure of what I am doing wrong here.

EDIT:

• I just check how this looks on Safari - oh dear, some very storage behaviour going on in the header on the home page.
• And I realised I forgot to do the srcset for mobile images. That is probably my least favourite part of HTML, so I think I'm going to leave it. It's not where I wanted to focus with this one!
• And having just looked at the design and my attempt, I think I need to focus a bit more on combining this approach with 'pixel pretty close' if not perfect. I am way out here.

Not pixel perfect but I've been continuing to explore intrinsic design. I think this is a big improvement on my last attempt at this approach. I lent heavily on the guidance in https://every-layout.dev which I found super useful.

This time I have only used two media queries: one to realign text from left to center, and another to remove the position adjustment on the hero image at narrow viewports. There's definitely a place for media queries, but it's fun and challenging to push this approach.

Any recommendations/suggestions for improvement are most welcome.

Hello All,

I've been playing around with this one.... I've been trying to implement an 'intrinsic design' approach and avoid hard breakpoints where possible. I'm almost there but you'll see a couple of layout issues at some screen widths.

Any suggestions on potential improvements on this or any other points, without resorting to breakpoints, are most welcome! I've put a few more details and a longer explanation in the repos readme. Thanks in advance.

I've focused on JavaScript and the HTML Drag and Drop API for this one, so some aspects of the CSS are not finalised get (e.g. dark mode). But I would appreciate any advice on the following:

What overall approach would you take to writing the JavaScript for this kind of challenge? I ended up kind of using localStorage as a place to manage the state of each todo, but honest the code is a bit of a mess and there are a lot of re-rendering calls.

I was wondering if an approach using a Class or Constructor might be better? Any advice on this would be welcome. I'm not at the stage with JS yet when I can see the best way to approach something (I think I am mostly there with CSS...) so I can end up with quite complex code.

KNOWN ISSUES:

1. The checkbox ticks disappear in Chrome on large viewports - no idea why yet! I'm only using media queries in one place and they don't affect this. [UPDATE: FIXED]
2. The Drag and Drop API isn't working well on Firefox - I will look into fixing this but if it's too much, honestly, I'm just going to leave it!
3. The filters are a mess on iOS. They work, but the style class doesn't seem to be applied, but is on desktop. [UPDATE: FIXED]
4. I am using beforebegin to insert the element being dragged, this means you can't move an item directly to the bottom of the list.

If you spot any other issues please let me know, but I'm thinking that I've gone on a wrong track here with the way I've approached things JavaScript-wise as there seem to be so many possible edge-cases!

Thanks in advance for any advice.

UPDATE: FIXED

• Layout on small viewports improved
• Ticks disappearing on large viewports
• Application of active filter class on small viewports

Calling time on this one!

I'm not entirely happy with this one (see problems below for details). I had problems with the recommended APIs, with one just reporting a duplicate API key, which I couldn't get past, despite trying with multiple email addresses and accounts.

This led to me using a more unreliable API as an alternative, which used http rather than https. As a result sometimes the city location is not retrieved and Chrome rejects the call. Any comments or feedback most welcome.

OK the mobile issue is really not great either. I need to add overflow:hidden to the body, and somehow add postiion:fixed as well. This is fine but it creates a new stacking context which messes things up. I need to look further into this. Suggestions welcome.

This one tripped me up in places I didn't expect. Notably, pseudo elements and SVGs. I put some details of the specific issues in the readme.

Key problems are:

• Horizontal scrolling is still an issue because of the first pseudo element. I am not sure how I can fix this, or why it is only happening on the first pseudo element and not the second. They are essentially the same element with some extra transitions on the second one. Any advice on this would be appreciated.
• I wanted to inline the SVG images but it caused so many issues that I opted not to in the end, and although not ideal took the performance hit. I had problems with background color, sizing and strange things in Safari - like bits of the SVG missing. Any suggestions on resources, courses or learning materials would be really appreciated.

Some details in the readme but, I would very much welcome advice on the following issues:

• I have failed get the final of the three svg icons working properly. I spent a long time on this and still failed. I need to have an approach to standardize icons of different sizes. Any suggestions on how to do this are most welcome.

• have struggled to off-set the introduction section banner image. I tried translate and positioning, but it always resulted in horizontal scrolling. I have not got an approach to deal with this kind of issue that I can fall back to. Any suggestions would be very much appreciated.

• When I add a single result the JS renders the entire containing element meaning that all the li elements animate in again rather than only the one just added. I have had this issue a couple of times now and would appreciate any advice on how to make a change that affects just the item added.

Thanks!

I had to do a lot of mental gymnastics to get the animation working on this one. I feel like a need to lie down for about a week now. Any feedback or suggestions most welcome.

Just updated this one as I noticed that the JS refresh was overwriting the transitions. It works now but the JS is not ideal and very repetitive.

UPDATE:

Fixed some issues that were bothering me on this one. i) Fixed the textarea issue below - I had created in input with the type textarea - only took me a couple of hours to work that one out! 🤦‍♂️

ii) Fixed the project title not appearing in the title on each project page. Some hectic delving into 11tys pagination object was involved...

iii) Linked up all my other FEM projects so that each project actually links to a FEM project I did - just for fun... Only bookmark challenge remains outstanding.

Again, any feedback most welcome

Thanks

I learnt a lot about 11ty on this project. I used collections and pagination for the first time. It was difficult but I can see this being very useful. I think I could have hard coded this in about half the time, but making edits to this site is now a real breeze thanks to 11ty and nunjunks templating.

Using 11ty's pagination feature (and collections), adding projects from a markdown file updates the portfolio page and the pagination links and text automatically. I also inlined my CSS to improve performance. I split my CSS into 'critical', which appears on every page, and other page specific CSS is inlined on each page

I would very much welcome advice on the following issues:

Regarding 11ty, I spent a lot of time working out pagination. I thought that content that I put below the last --- in my .md files would appear in the template I referenced. This didn't happen. I suspect something to do with 11ty's data cascade, but I haven't understood what was happening yet.

One thing that has driven me crazy is styling the textarea on the form. I would like the text to wrap, at the moment it just carries on on one line, and I would like to user inputted text to start at the top (in the same location as the placeholder text). I moved the placeholder text, but cannot get the user text to start where I want it to.

Any other advice and suggestions would be gratefully received. Thanks!

BTW - The homepage is blank as this wasn't really included in the design. You'll have to click through to a page to see the content.

This was a big step up for me in terms of the tech used to build the site. Any comments or feedback would be most welcome. I put some details and questions in the readme, but I would really like to know:

1. Is it OK to use inline styles to set custom properties? I did this using nunjunks and it worked really nicely, but I wasn't sure if this is really best practice.

2. How to make individual HTML pages from a JSON object! I can see that 11ty's pagination should do this but I couldn't make it work!

Thanks for any other comments and feedback!

I had some issues with this one:

1. I thought from the design that the carousel was only needed on small screens. I have made this happen, but only on page load, as such if you change the size of the window the design won't respond. This works fine large to small screens, as the content is visible, but not if you start small and then make the window larger.

2. The carousel is problematic. It's not accessible, and the buttons for changing the image shown are too small. This is in line with the design, but I don't like it and my conclusion from this challenge is that carousels should be avoided at all costs - they seem rubbish from UI, accessibility and coding hassle perspectives.

3. For some reason I cannot get focus to move to the links inside my main element. It will move to the buttons (if they are there on small screens )but not the links. But outside the main the same element with the same class works fine. I am not sure if it is the something in the main causing the issue?

Any advice on this would be really appreciated. @grace-snow I wondered if you had a moment to look at this with your a11y eyes...

Any feedback and comments are most welcome. Thanks.

I found understanding the API documentation quite difficult. Also my slow internet connection made testing this quite painful! Any comments are most welcome.

Any feedback would be most welcome on this one.

I was a bit unsure of the best markup for this one. In the end I went for checkboxes rather than buttons, and I think this holds up OK - if you remove the CSS it is easier to see.

I also had to add in some odd padding values to the pill shaped elements and the labels as I couldn't get the font vertically centered. Any alternative suggestions on this would be welcome.

I should also add that having tested this with a screen reader there is still quite a bit of work needed with labels and focus to make this work nicely.

Thanks again for any feedback.

Sept 21: I just updated this to improve the transitions of elements on and off the page and remove the janky feel to the page. Any comments most welcome.

Any feedback most welcome! I really struggled with the layout and positioning of the background image of the introduction section here.

I think it took me as long to get to a "just about OK" working solution on that part as the rest of the page put together. Any advice on that would be especially welcome!

I have tried a progressive enhancement approach here on the menus, if JS fails:

1. The burger menu won't activate and the top level links will simply remain visible at all times. The fallback styling is not perfect but it works.

2. The dropdown menus remain as a hover activated list of links rather than the ideal situation of a click activated menu, with buttons that activate the drop downs.

I found this challenge more difficult than I anticipated.

I knew the navigation would be difficult, but I also found the layout of the sections in the main very difficult. In the end, I used grid to lay things out, but any suggestions for better approaches would be appreciated.

Any other comments, criticism and suggestions for improvement would also be very welcome. Cheers.

I have a few issues with this one that I would welcome feedback on, mainly related to images.

1. The orange icons look distorted on Chrome and Firefox, but not Safari. I have tried to get the aspect ratios working, but I can't manage it and maintain the overall icons at a consistent size. Any advice on how to approach this would be appreciated as I've stumbled on this issue a couple of times.

2. I should have adjusted the 'hero' image so that it aligned flush with the viewport at smaller viewports, and the opposite for the the second image (flush against the opposite side). I tried adjusting using a relative positioning, but it didn't maintain the margin on the side that wasn't flushed, and a few other random things that didn't work. Any ideas?

Thanks for any other comments and feedback. I am loving SCSS more with every challenge now and while I'm really glad to have waited a good while before trying it out it is really speeding up my work now.

This is my second challenge trying out SCSS. I enjoyed SCSS much more this time around as I am getting more comfortable with it.

Any comments on how I can improve my use of SCSS would be particularly appreciated. Any other comments or feedback on any points are also very welcome.

PS. I bumped up the font size compared to the design specification as I found it to be very small in the design....