This website was rebuilt after completing the Kevin Powell x Scrimba x Frontend Mentor course, so it is not independent work. The course itself is awesome! I recommend taking it 😊
aDev
@Senkuu-Midoriya
All comments
- aDev• 280
@Senkuu-Midoriya
Posted
Hey ania, I love the solution and how you went about adding the JS and logic.
If I may I have a few pieces of advice, 1). in the responsive mode with the hamburger menu I think you have positioned the items in the hamburger menu at the top right, whereas it is supposed to be in the middle 2). the active animation on the hamburger items is not working perhaps because you used the wrong selector
The overall webpage is superb, and the effort you put into making it can be seen.
Thank you for sharing you webpage with us and allowing us to learn from it, aDev
0 - Lucas 👾• 104,540
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Equalizer Landing Page.
I added some features:
- 👻 h1 span: spinning color animation;
- 👾 Phone image on hover;
- 🥰 2 more breaking points;
Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!
aDev• 280@Senkuu-Midoriya
Posted
Hey Lucas, I love you solution and I can see that you have put a lot of effort into the solution. I love how you tried making it the same as the design, which is would say you have.
I have a few pieces of advice: 1). try adding the same font to the description, because it seems like you haven't changed it there 2). if you add more of a transition to the elements that can be hovered on like the icon links, them we can see how it changes from pink to orange.
Amazing solution as always, aDev👌
Marked as helpful
0 - Hissue• 60
@Hissue556
Submitted
Hi i'm a newbie front end web dev wannabe. i find it difficult to create a responsive website and i would love some feedback about my way of doing it, honestly i don't even know if i'm on the right path for that. tysm ♥
aDev• 280@Senkuu-Midoriya
Posted
Hi @Hissue556, I love the little touches that you have added to your website to make it look even better and more like what the design of the website was going for. Don't worry if you are not going on the right path, everyone has a different pace of learning and different things they find difficult, the longer you stick at it the more you will learn, and can teach people. As for the responsive design I would suggest you watch Kevin Powell's take on it, to learn how to properly make responsive designs.
If I may I have 2 key pieces of advice for you, 1). instead of putting a border radius on an image if you put it on the entire components and say an overflow of hidden it will give you the same affect without making the image have a border radius on all sides which would make it look more like the design. 2). I would suggest that you do a lot less gradients on you webpage to make it look cleaner and simpler, which would make it look better overall, without making it look a but less refined, a linear gradients here and there is fine, and I love what you used it for, but for things like the button most of the time, flat color are fine unless you are trying to do it for a specific animation or to make it pop with the flat colors from the rest of the page.
Overall, I think the webpage is amazing and I can't believe that you are still just starting out, the webpage look amazing and you have a real eye for making the designs look even better.
Thank you for sharing you website with us, and I can't wait to see even more of the websites you make and continue to put your own touch on.
Thanks, aDev
Marked as helpful
1 - ...• 600
@HatimHJ
Submitted
aDev• 280@Senkuu-Midoriya
Posted
Hi @HatimHJ, a wonderful webpage you have got here which look very good. I especially like the logo components next to the actual bar which look almost exactly like the design.
If I may, I have a few pieces of advice: 1). there is a button with go and reset and an input, I am not sure why this is, but I could see how you could implement it into the design, perhaps make it so that the user could use it to say how much storage they have used. 2). add a bit more styling such as a border radius and custom padding, widths, heights, etc. to make the UI a but more good looking, such as on the upload button and the file button where you can add a border radius which would help the design look even better, a bit more styling here and there with better placed out components can make you webpage look even better! 3). add a cursor pointer to the buttons, to make the user know that they can click on it. 4). if you make the size of the icons smaller or make the buttons bigger the design will look much more refined. 5). add the bar with the gradient to the progress bar, this can be done with making the dark blue bar with a div, and inside of that adding the gradient progress bar, and for the circle you add an an after element with a border radius of 50% to make the circle.
I hope this advice helps you, and I can't wait to see more webpages like this with you touch added to it to make it even more usable and functional.
Thanks for sharing you webpage with us and allowing us to learn from it as well, aDev
0 @agustrinaldokurniawan
Submitted
aDev• 280@Senkuu-Midoriya
Posted
Hi @agustrinaldokurniawan, amazing solution you have got here, it really does look like the design, and the webpage itself look wonderful. I especially like how you have made the webpage look like the design exactly, which is very hard to do correctly, and my begin a newbie still struggle with that sometimes, I can see all the hard work you have put into the page and it really shows, with the quality of the webpage.
If I may, I have a few little critiques, 1). make the width of the component a bit greater so that it look more even which will make it look slightly better. 2). I am not sure if you have used the correct font family( if you have than it is my mistake, I guess look at code and webpages for too long have made my brain a bit numb :) ), else if you haven't if you do so, it would look more like the design. 3). for the desc below "How did we do" if you adjust the line height of that description, it will make it look more spaced out and a bit more refined, however this is a very small thing, and the website still looks amazing. 4). for the thank you page of the project, if you adjuist the width of where it says you selected __ of 5, it will look more like the design, and a bit more spaced out and overall a bit better. All of these are very little critiques and the website look amazing and almost exactly like the design, which is shown by how little the errors are.
This webpage is amazing and look very wonderful, I can't wait to see more of your amazing creations, and webpages.
Thanks for sharing you webpage with us and allowing us to learn from it, aDev
Marked as helpful
0- Nazif Barassounon• 470
@nazifbara
Submitted
Any feedback to help me improve this project would be appreciated.
aDev• 280@Senkuu-Midoriya
Posted
Hey @nazifbara, amazing website you have got here, I am still working on my rendition of this webpage but what you got here is amazing, and is almost exactly like a design, this shows a lot of skill and hard work that you must have put in to make the webpage, and it has really payed off. I especially love how you have done the box shadows, it really brings out the white just like the design. If I may, I have a few pieces of advice for you: 1). you might want to use different fonts weights as given in the style guide to make the links look better. 2). if you add a transition to the elements of you webpage that have a effect like hover on them it will be a much nicer looking transition to the hover state, etc. 3). if you add a margin or padding to the text or image where it says "A Simple Bookmark Manager" the image will overflow of the screen which is the affect that it has on the design, and if you apply an overflow hidden on the entire body the x-axis scroll bar will go away this can also apply to the other images on the webpage which also require the same type of styling as per the design. 4). on the button for the tabs such as simple bookmarking, if you apply an outline of none, when it is clicked on there will not be an outline which will make the user experience better. 5). on the accordion if you use a ui library like material ui or use some more JS you can make it so that only one accordion can be open at a time so that the user won't have to scroll or open an close the accordion bar manually. 6). for the contact us component if you add a width of 100% the entire width of the webpage should be taken up by that element like in the design.
I loved how you were able to make the accordion and dropdown almost exactly like the design as I am struggling with that, I would appreciate it a lot if you would mind taking the time to explain how you made those two elements, as you seemed to be an experienced developer, and my begin a newbie, the advice that you give would be invaluable to me, and my web dev journey.
Thank you for taking the time to show us your wonderful webpage and helping us learn from it, any advice from an experience dev like you would be appreciated.
Amazing website, aDev
Marked as helpful
1 @C1nemaclub
Submitted
The most difficult part was dealing with the styling since I didn't have access to the design files. I'm unsure about the styling since I had to use my eyes to try and see what the styles were from the images.
aDev• 280@Senkuu-Midoriya
Posted
Hey, quick comment, if you need the design file Frontend mentor provides it for free when you download the starter, it is called style-guide, this is will help you get all the colors you need and know what fonts sizes and fonts families you need so that you can focus on coding it up.
Hope it helps :), aDev
Marked as helpful
1- Precious• 490
@2peagles
Submitted
I was going to use boostrap but decided to do custom css, and anyways I had trouble with the Supercharge your workflow part I used columns and the first one was acting really weird. The other thing I had trouble with was downsizing the svg. I hope it's close would love any feedback also I tried to use less div's which I felt mad it harder and less easier to read, but maybe it's just me. I didn't break it into components either I didn't feel the need to since it was a short page just html and css.
aDev• 280@Senkuu-Midoriya
Posted
Hey @2peagles, I can't believe that you have only been into react for 4 months now, it seems like you are a professional already from just looking at the webpage. The webpage looks amazing, however if you don't mind I have a few pieces of advice, 1). add a transition to your buttons to make them have a clean affect when you hover over them or click on them 2). for the download for mac button there is not any animation when clicked on 3). I would suggest you add a bit more margin between the elements to make them look nicer 4). to size down an svg using the img tag you can just adjust the height and it will adjust the width relatively 5). although it may seem small, by dividing the webpage into separate components the code will be easier to read, and more organized when working in bigger teams. Overall, the website is amazing and I can not wait to see even more amazing webpages like this from you soon.
Thank you for sharing you webpage with us and allowindg us to learn from it, aDev
Marked as helpful
1 - aDev• 280
@Senkuu-Midoriya
Submitted
I had a bit of trouble formatting my code and refining it, and I am sure there are simpler ways to do somethings. I learnt a lot about using positioning, and it was a good way to practice flexbox. I would love to hear if there are better ways to do the things I did or simpler cleaner one. Any advice would be appreciated
Thanks to frontend mentor for providing us with such wonderful projects to practice with for free. :)
aDev
aDev• 280@Senkuu-Midoriya
Posted
I would love any advice on how to deploy my website with a better free hosting service, or related to the code and if there are simpler ways to do things, or ways that I should be doing things. I am still a newbie and have not gotten into more advanced things like accessibility, however I plan on learning that very soon due to the fact that I want anyone to be able to enjoy my webpages.😁
Thanks to anyone who leaves feedback, aDev
1 - Elaine• 11,420
@elaineleung
Submitted
This was a very straightforward landing page, but this took me a lot of time; it might even be the one project I've spent the most time on so far. The positioning of the elements was challenging as usual, but the most difficult and time-consuming task was trying to understand some of the design choices (such as having two very similar sans-serif fonts, and then where they get used in the text was not as apparent as I thought). Anyway, at least I now learned how I can position elements off the page and have it be responsive! I'm just glad it's over and we can all move on with life 😅
Very minimal animation here (or much of anything really) since I just wanted to focus on the important parts of the CSS, which is messier than usual as I wanted to try to structure it the way similar to what Kevin Powell did in his latest tutorial series. I also wanted to bring in some CUBE CSS since Kevin did that also. In short, a lot of experimenting, not too much organizing and therefore will clean up and refactor later.
As always, please feel free to let me know whether something isn't working the way it should. Thank you everyone!
aDev• 280@Senkuu-Midoriya
Posted
Hey Elaine, amazing website that you have done here, the design and you webpage are pixel perfect, it is so hard to get it that way, and it surely must have taken a lot of effort, but it shows in the webpage, which looks amazing. If I may, the start for free button, when it is hovered everything works fine, but when you take the cursor out of the button the outline from the hover affect still stays. Also the image in the second part of the webpage is not positioned a bit askew, in the design some of the picture is cut of, I would suggest that you apply an overflow hidden on the body, and add a padding or margin the picture or the text next to it depending on how your code is formatted.
If you don't mind I would love for to answer these questions of mine relating to the webpage: 1. How were you able to but the background image on top of the hero. 2. How were you able to apply the JS for the dropdown menu. Any answers to these questions is invaluable to a newbie like me, to gain knowledge from an experience web dev like you. :)
Thank you for sharing this webpage with use and allowing us to learn thorough it, aDev
Marked as helpful
1 - Lucas 👾• 104,540
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Alternating Sections.
I added some features:
- 😎 I recreated the logo as a SVG (this way I could animate it).
- 👻 I added an animation on the logo (chat-box icon flip and turn).
- 👨🔬 Some custom design improvements.
Happy to hear any feedback and advice!
aDev• 280@Senkuu-Midoriya
Posted
Hey Lucas, amazing website that you have built, I especially liked your logo affect. It is amazing how your are able to make the websites designs even better. If you don't mind, how did you get the svg to animate, and how did you format your code to be able to do that. I am a newbie and don't have much experience yet, and seeing you do such amazing things is jaw dropping to me. Any answer would be appreciated from a knowledgeable person like you.
If you don't mind me saying, I noticed that the middle section of your webpage moves a bit when it is hovered over, I am not sure if this was intentional but it is a very slight thing.
Thanks for sharing you knowledge with us, aDev
Marked as helpful
0
