Here is my newest challenge again done all by myself. Although I've had previous form validation projects with javascript, with those I used a bunch of extrenal help whereas here I was working on my own, using my own logics and instincts. Obviously, if I compare it to the previous ones, the syntax of those seem much more eloquent, butI am wondering how far this solution is from the ideal. I would appreciate any feedback.
Here is my newest challenge which is a true milestone in my learning process. It was the very first time that I came up with the whole javascript solution all by myself (no extra help, no google, no cheating). It took me a long time to learn even how to use console.log and I finally managed to do that this time and I was simply following my instincts. Therefore, I would truly appreciate if someone could have a glimpse on my code and see if it is alright or total garbage. Really ANY kind of comment/advice is extremely helpful for me.
Thanks a lot in advance,
Cheers,
Dalma
P.S.: I've had issues with the colors, so they might not match the design perfectly, sorry about that... :/
Trying my best, as always, here is my newest challenge. Any advice is appreciated. I can't figure out why my <a> did not change to the color I set to. :(
Here is my very next challenge, I loved every single moment of doing it! Mobile first is a great approach, I can recommand it to everyone who has been scared to apply it. I used both grid and flexbox because that seemed the most convenient to me. If anybody has any advice on the html tags I was using, I would very much appreciate it!
Here is my next challenge, another faq accordion. I found mobile first much more convenient, it hardly needs any media queries which is great. However, my biggest issue was the background image. I reall wanted the desktop background image to not shrink with the screen size, but I just wasn't able to do that. Could anyone help me out with that?
Here is my next challenge which was probably my fastest one ever AND my very first mobile first approach which, I must admit, was an excellent idea as it made the project much easier to be responsive! Any suggestions maybe?
I was almost very satisfied with myself when an unforseen issue came up and I would be truely grateful if somebody could explain to me what happened. Here is the issue:
My icons are perfectly centered while coding in VS Code and using Live Server, but as soon as I refresh the page, they shift to not being centered. Each time I make some changes, they go back to the center, - making me believe that I nailed the issue - but again shift back. I can't figure out what the problem could be, as at first it always shows the way I want it to be, but the final result is also messed up.... :/
Here is my next challenge which caused me a huuuuuge headache, and after a tiresome battle with the challenge, I decided to finish it, even though there could be some more subleties to deal with (e.g. smoother transinition when opening the answers).
The biggest issue was to position the images in mobile version. I eventually decided to put the img-s in the html outside the div they were in originally, I don't know if this is the best practice.
The other issue was with JS logics. It was okay to make answers open for the click event, but I was keen on doing it in a way that only one answer should show at a time. Eventually I nailed it somehow, but it was killing!
Here is my very next challenge, it took a loooong long time to do, but eventually I am done. Javascript is a hard nut to crack for me and I was trying to bring the best out of it. Hope it seems okay and so does my CSS. Any suggestion on HTML tagging maybe? Or anything at all?
Here is my very next challenge which indeed was a challenge, however, for the first time, I am truly proud of the result. Not sure if it's perfect (more than probable that it is not at all), but eventually I nailed email validation, which was rather hard for me. This is the way I coped with it, I know there are many other ways to do so, but I would be curious to know if there is a better one. Any ideas?
Again a next challenge (my 10th, yaay) using CSS grid for the first time. It didn't seem hard though I feel like I have too much typing in my CSS. Any advice on how I could shorten it somehow? Or does it seem okay?
Again a new challenge with a tricky background, but eventually I guess I nailed it (was easier than I had imagined)... Again playing around with rem instead of pixels and no set height, no set width, only max and min. Any feedback is welcome.
Here is my next project. No fixed widths, no heights, first time I didn't actually set the size of the container initially and I made my life much easier! Any comments are welcome.
Here is my very next little project. I am getting faster and faster which makes me super glad, though I am still struggling with responsiveness... It is definitely improving a bit, however, on some devices (e.g. iPhone XR or iPhone 12 Pro) it looks pretty weird and I don't know how to handle that. Any tips maybe?
Here is my next challenge, still an easy one, but full of real challenges to me. The biggest one here is that I was starting to use percentages instead of fixed sizes, like width or height because I have been warned about avoiding the latter. However, I noticed that here, it worked better to add a fixed width to keep it responsive. Why is that? Is there a consesus on when to use percentage and when adding specified amounts is preferred?
Here is my next experimentation and honestly I am not very satisfied with the result. The task was more difficult than I expected it to be, here are my main problems and questions:
I used absolute positioning for the social media share pop-up and a separte one for the caret down. Any suggestions on how could I have done it better?
In JavaScript, I applied a click event on the css selector named "hidden", which includes both social media box and the caret down, but somehow the caret down doesn't appear when clicked on the icon. Why is that?
I was suffering with making it responsive and I think the result is just terrible. Any tips on how to be more precise and effective?
Here is my first project using JavaScript which was challenging, but fun at the same time. Overall, I am not very satisfied with my CSS, it just ended up being rather messy (again) despite the fact that the outcome looks fine. Any suggestions?
Here is my 3rd project from the bottom of my heart. I felt like I was getting more and more comfortable with flexbox and positioning that's why I was experimenting with percentages in sizing. I kind of like the outcome, but I would appreciate some feedback on it to see if it is correctly done or not. I also tried to make it nicely responsive, I just wonder if I managed to.
Here is my 2nd, i.e. second project ever created and I am open to all kinds of suggestions and criticisim. Honestly, the task was much harder than I thought it would be and even though the result seems okay at first sight, the detailes feel a little bit messy and I don't know how to be more organised in my coding. I guess my main concerns were the following:
1.) I'm not sure about how to name the HTML classes. I was trying to follow some kind of pattern, but the whole thing just ended up rather clumsy.
2.) By the end, I felt like I had a whole lot of random things in CSS, I'm absolutely sure I could not follow the DRY concept, how could I have been more effective? What are the key elements I should pay attention to?
3.) This is my very first attempt of making the project responsive, but I think it is kind of messed up as the image collapses way before 370px width. What did I do wrong?
4.) I really would like to deal with the JSON part and I also know the JavaScript for that, I just don't know how to START! Any hints maybe?
Here is my very first project EVER, I'm an BASOLUTE newbie, I am insanely glad I could get this far with my very first project. Looking forward to getting better and better, step by step. I am so new I don't even know what questions to ask. :D Unfortunately the QR-code image doesn't show on the GitHub URL, I am trying very hard to fix it, but also try to add a print screen version....
I am open to any suggestions, feedback, criticism (though I know it is highlighted to be more specific than this, but maybe in my later projects. :) )
