What are you most proud of, and what would you do differently next time?
Proud that I am able to complete this project with little help. Only help needed was for the arrows. Feel I need to learn a better way to program the positioning of elements. Felt I used way to many margins.
What challenges did you encounter, and how did you overcome them?
Creating the phone and fitting the objects was challenging.
What specific areas of your project would you like help with?
Writing the code in a more simply way. I feel I could have coded this with much fewer lines.
Great take on this project! You asked for feedback on a more simple way of writing code. First of all, your code is very consistant in my opinion, so you are doing a great job.
A tip I could give you is to use more explainatory classes. In your code I read a lot of classes like "lefttextbox" and "lefttextbox1". That is something I personally would avoid, because if you want to change something, it could get hard to find the exact element you want to select (especially on bigger projects). The chronology could also be disrupted when you, for instance, add a new element in between two elements that are named for instance "class1" and "class2". What I would recommend is try to use more classes that discribe what the element is or does. It makes it a lot more readable and professional. I also would recommend to use dashes between words in classnames. I would write "lefttextbox" as "left-text-box". That is more readable.
For positioning of elements I would recommend to do some research on flexboxes and grids. These technologies are great for the positioning of elements. At first it can be hard to understand, but give it some time. It will help you A LOT with postioning.
Resources for flexbox and grid:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://www.youtube.com/watch?v=rg7Fvvl3taU -- (A video by Kevin Powell -- This is also a great channel to follow on YouTube)
Really nice take on this project. Very solid code.
You asked help about styling a placeholder. If I interpreted your question correctly, this is something you don't necessarily have to do with JavaScript. This is really easy with CSS-only.
You can easily style a placeholder with the ::placeholder psuedo element. For example:
::placeholder {
color: green;
font-weight: 700;
}
Check out this resource for further expaination:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
Great take on this project. Really consistant code!
The only thing I would recommend is to experiment with spacing. Your solution is quite compact (for example: sections are very close together). As a result of good consistant spacing, your website will appear much more professional. Hope this helps.
Good take on this solution! The design looks really good and professional.
You request on help with cleaning up your code:
First of all, your code looks fine to me. You use the right tags, which makes your code structured. What I would avoid, is the over-use of classnames. Not all tags need a classname (in my opinion). The thing I also would avoid, is the long classnames like "container__section_header_div_name", "container__section_texto1" and "container__section_texto2". These long classnames make your code hard to read, and it also makes elements hard to target when you want to change something. Like, when I read your CSS, I have to puzzle my way out to find out which properties are assigned to which element.
I would recommend to use short and declaritive classnames and try experimenting with targeting elements without classnames. This way you will learn how to target elements effectively without overusing classnames. A great resource for this is CSS Diner. https://flukeout.github.io/
Great take on this project! Bootstrap is a really good choice for this one. I really like the well-structured code and responsiveness in your solution.
I do have some suggestions for your future projects:
I would suggest to use some padding inside your boxes. It will make you design look a lot more professional.
In the challenge design, the mobile menu makes a horizontal entrance on the right side while yours does it vertically. Although, there is nothing wrong with the standard vertical bootstrap menu, don't get me wrong. If you want it to make it's entry vertically, try to use the bootstrap offcanvas component.
Link: https://getbootstrap.com/docs/5.0/components/offcanvas/
