Looking to hire developers?
@Selvy2004
@nikhil-131
Submitted
What specific areas of your project would you like help with?
I would really appreciate some feedback on this project, as I have put in a lot of hard work. I would like it if you guys could look at it and tell me what you think and where I can improve!
@Selvy2004
Posted
CSS grid between the photo and the text and (new section).. give (section new ) more space, Do it by giving the container of these contents for example: grid-template-column: 3fr 2fr; “Give the right side 3fr,and left side 2fr” “I can’t remember the numbers exactly, but I give you an example and do it in your code with your way and experiment.
the text above the Learn more button, use <br> in your HTML code to make it like the original design and do it also with aside text.
put some margin between navigation and the main section, and put some margin between the main section and the aside.
But your work is so good, great job:)
Good luck:)
Marked as helpful
@Prashant062
Submitted
What are you most proud of, and what would you do differently next time?
this is first project for me so it complete easily and i ready to next task
What challenges did you encounter, and how did you overcome them?
it too simple so i did't encounter any problem
@Selvy2004
Posted
You can give colors to numbers and dots which are they with (li) elements by doing this: li::marker{color: green;} for example.
give your page more white spaces
give the text a line-height: 1.5; at least, specially with the smaller text.
h1 or the main title, make it’s font-size bigger, and make it less bolder.
give the page itself more padding and give ul and ol elements margin-right
give your webpage a bigger width. and be committed with the ordered colors.
Good luck, and happy coding:)
@Nozz21
Submitted
@Selvy2004
Posted
You can give colors to numbers and dots which are they with (li) elements by doing this: li::marker{color: green;} for example.
give your page more white spaces
give the text a line-height: 1.5; at least, specially with the smaller text.
h1 or the main title, make it’s font-size bigger, and make it less bolder.
give your webpage a bigger width.
and be committed with the ordered colors or as you like😊
Good luck, and happy coding:)
@SanderBuist2
Submitted
What are you most proud of, and what would you do differently next time?
Solving the lists.
What challenges did you encounter, and how did you overcome them?
Had to switch to tables instead of lists to get the right results
@Selvy2004
Posted
You can give colors to numbers and dots which are they with (li) elements by doing this: li::marker{color: green;} for example.
give your page more white spaces
give the text a line-height: 1.5; at least, specially with the smaller text.
h1 or the main title, make it’s font-size bigger, and make it less bolder.
and be committed with the ordered colors.
Good luck, and happy coding:)
@christianb3ll
Submitted
What are you most proud of, and what would you do differently next time?
This was my first project using Tailwind CSS. It took some getting used to but I am definitely starting to see the advantages. It was a struggle to get some elements of the design to match pixel perfect.
What challenges did you encounter, and how did you overcome them?
Getting to grips with Tailwind meant I had to jump back to the documentation repeatedly.
@Selvy2004
Posted
Use a bigger font-size for h1 or your main title
The background-color shouldn’t be #fff it should be off white(hsl(36, 100%, 99%);)
Use a smaller width for your hole web page
The aside text and the text above “learn more” button, in HTML use <br> to be like the original
change the width of learn more button to be a little bit bigger
I hope you found it useful, Good luck and Happy coding:)
Marked as helpful
@art3xias23
Submitted
@Selvy2004
Posted
Use a smaller width for your web page
CSS grid between the photo and the text and (new section).. give (section new ) more space, Do it by giving the container of these contents for example: grid-template-column: 3fr 2fr; “Give the right side 3fr,and left side 2fr” “I can’t remember the numbers exactly, but I give you an example and do it in your code with your way and experiment
The aside, use flex box or css grid to make the text nicely aligned to the photo and use a smaller gap between (part 1, part 2, and part3)
the text above the Learn more button, use <br> in your HTML code to make it like the original design
The background-color shouldn’t be #fff it should be off white(hsl(36, 100%, 99%);)
I hope you found it helpful Good luck and happy coding:)
Marked as helpful
@YhoshuaBernal
Submitted
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@Selvy2004
Posted
The background-color shouldn’t be #fff it should be off white(hsl(36, 100%, 99%);)
And you should put more white spaces in your web page, like margin between navigation and the main section, and I guess you used css grid to make the main section, use more gap (like the gap between the photo and text, and the gap between the photo and the right part( the new part)
the space between text and read more button should be bigger
You should make h1 or the main title, bigger and bolder
In aside, title number 2, in bigger screen is in two lines and it is not good, it should be in one line.
The word (New) should be bigger and bolder
And the logo should be bigger.
I hope it is helpful for you, and good luck:)
Marked as helpful
@makihero
Submitted
@Selvy2004
Posted
Your page should be centered and it should has a smaller width and your aside should be bigger and you should manage the white spaces in your page, so give it more white space and give all page margin to the top, and h1 or your main title, give it some line-height, and in mobile(smaller screen) version, the navigation open button doesn’t work.
If you found my comment helpful please press on (Mark as helpful) button😊
Good luck:)
@YsmaelOutis
Submitted
What challenges did you encounter, and how did you overcome them?
In this project, my main challenge was achieving perfect symmetry with all elements in the design, particularly dividing the available space into thirds and fitting different parts of the content accordingly. I discovered that using flex properties (grow, shrink, and basis) wasn't the ideal solution, as flexbox calculations include paddings and margins. Ultimately, I employed a combination of grid and flex to achieve a close, though not perfect, resemblance to the original design. Fortunately, I gained valuable insights into both systems throughout this process.
Additionally, animating the modal for the links on mobile proved to be quite challenging. However, in future projects, I aim to achieve a seamless animation and transition, as I believe I've learned a great deal from this experience.
Looking ahead, one approach I would take differently in similar projects is to create a .json or data.js file containing all relevant content data for the site and fetch it from the app. This would simulate a more realistic real-life usage scenario and streamline the development process.
What specific areas of your project would you like help with?
If you have any suggestions for improvement or notice any potential areas for optimization or bad practices in the codebase, please don't hesitate to reach out, especially regarding the modal system and symmetry distribution.
@Selvy2004
Posted
There is another issue, make it responsive, it doesn’t work for smaller screens. Do it! it will be a good practice for you. Good luck😊
@MaycolMont
Submitted
@Selvy2004
Posted
Your solution is so great:) But the background-color should be off white, not #fff And put more margin at the top of your hole page or at the top of navigation. But it is a great solution, good luck:)
Marked as helpful
@eduardzs
Submitted
@Selvy2004
Posted
Your page shouldn’t take the hole screen, it should be in the middle, and the colors aren’t correct, compare your solution with the original and edit them to the correct ones Good luck, and keep going:)
@YsmaelOutis
Submitted
What challenges did you encounter, and how did you overcome them?
In this project, my main challenge was achieving perfect symmetry with all elements in the design, particularly dividing the available space into thirds and fitting different parts of the content accordingly. I discovered that using flex properties (grow, shrink, and basis) wasn't the ideal solution, as flexbox calculations include paddings and margins. Ultimately, I employed a combination of grid and flex to achieve a close, though not perfect, resemblance to the original design. Fortunately, I gained valuable insights into both systems throughout this process.
Additionally, animating the modal for the links on mobile proved to be quite challenging. However, in future projects, I aim to achieve a seamless animation and transition, as I believe I've learned a great deal from this experience.
Looking ahead, one approach I would take differently in similar projects is to create a .json or data.js file containing all relevant content data for the site and fetch it from the app. This would simulate a more realistic real-life usage scenario and streamline the development process.
What specific areas of your project would you like help with?
If you have any suggestions for improvement or notice any potential areas for optimization or bad practices in the codebase, please don't hesitate to reach out, especially regarding the modal system and symmetry distribution.
@Selvy2004
Posted
Hi, Good job:) I am a beginner, I didn't even work with TypeScript and SCSS before, but you get so hard on yourself it will be so easy and a good practice for you, if you just used HTML and CSS and JavaScript. Your aside's title number 2, is in two lines at the bigger screen and it is not good, and your h1 or your main title, has big white space between each line, and "READ MORE" button's font-size should be bigger and bolder and you should use "letter-spacing: 1px"(for example) to make the word like this "R E A D M O R E"
Marked as helpful
@Medido1
Submitted
@Selvy2004
Posted
Hi!, Good job:) But I have some notes for you:
the background-color shouldn't be white, it should be off white hsl(36, 100%, 99%);
h1's font-size, should be bigger, and its font-weight too should be bigger.
In your HTML code, it will be a good thing to put all your page's content inside a <main></main> element as a container, after this give it in your css code {margin: 0 auto}, instead of 0 put your normal margin top and bottom, then the page will nicely centered.
At the mobile (smaller screen) once you open the website, the navigation certainly open, it should open just when you click on the open icon.
Good luck:)
Marked as helpful
