Tried experimenting with breakpoints and more semantic HTML.
What challenges did you encounter, and how did you overcome them?Getting the paddings and margins correctly.
What specific areas of your project would you like help with?Just overall look and feel of the code, see if there are any improvements CSS-wise.
Good job with this challenge! My advice for the future is to try not to use IDs and to prefer classes instead. By doing this, you have more flexibility with overriding styles, as you can have many elements with the same class, but only one with an ID. Additionally, when you want to override a style, it’s easier to do so with a class because classes have lower specificity than IDs. One last piece of advice: read about BEM (Block Element Modifier) for naming classes in HTML. It will help you with naming conventions and has advantages when you start using preprocessors like SCSS or LESS.
I am proud of been able to make style the responsive landing
What challenges did you encounter, and how did you overcome them?I had slight challenge to centralize the elements but successfully achieved this flexing and aligning items in the center
What specific areas of your project would you like help with?I will like more help with centralizing elements
Great job with the first challange! Using flexbox as you did is great idea. You can center stuff using display: flex, justify-content: center, align-items: center then you should have center stuff even for flex-direction: row and flex-directions: column.
You can try also this way, but using flex is better.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
I am most proud of how quickly and easily I was able to complete everything. I am also quite proud of the mobile-first design approach that I used as this was my first time building something using that approach. And this was also my first time using css custom properties and they're pretty cool and very helpful. One thing I would do differently is I would plan things better before I actually start coding. I have a tendency of rushing into starting, although that's only because I don't want to "overplan", so I guess it's just about finding a balance.
What challenges did you encounter, and how did you overcome them?I didn't really face too many challenges, I guess there were just a few things that I had to search up, but it wasn't anything that I didn't end up finding a solution to/solving myself. I did struggle to decide how to go about writing my media queries. I also didn't know how to structure my html regarding the use of semantic html and the image specifically, but I ended up putting the image in a header tag on its own.
What specific areas of your project would you like help with?Due to this being my first time using a mobile-first design approach, the main thing I want feedback on is whether or not I went about it in the correct manner. I'm not really sure whether or not I wrote my media queries properly so I would like to know media query best practices. I would also like feedback on whether I used the css custom properties properly because this was also my first time using those. Lastly, I'm still trying to get a proper understanding of using semantic html, so any feedback on how I did regarding that would be appreciated.
Great job on this challenge!
Regarding your question about HTML: Your HTML structure is well-organized, especially with the use of semantic tags. I recommend reading about the BEM methodology for naming classes in your HTML. Additionally, instead of using empty <div> elements for creating lines, consider using pseudo-elements (::before and ::after). This way, you can avoid empty divs.
Regarding your question about CSS: Your use of custom CSS is excellent—nice work! I suggest reading up on breakpoints; for example, check out this article: Bootstrap Breakpoints. You can also see how other services set breakpoints for reference.
it was difficult to center align it, i would appreciate assistance on that.
What specific areas of your project would you like help with?Center alignment of the work. Both the margin and align properties did not work
If you’re having issues with margins, try setting the following on the body:
display: flex;
justify-content: center;
align-items: center;
or different approach for .container:
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
As you can see, using the flex option on the body tag results in less code. Let me know if this helps! If you still have any issues, feel free to reach out, and I'll do my best to assist.
Iam Proud that this task made me learn new things and i learned them quickly
What challenges did you encounter, and how did you overcome them?i've had some challenges with hosting the project and also there was a problem with the photo not loading and i've solved the photo problem by specifying the right path and solved the host by reading the documentation.
What specific areas of your project would you like help with?Is it okay to use the code below to make spaces between the elements every time or there's a better approach to do the same
display: flex;
flex-direction: column;
gap: 20px;
Thanks in advance.
Hey, good job! Regarding your question, yes, this approach is better than adding margins to every single element in the container, as it reduces the amount of code.
For the hosting issue, you can use GitHub Pages—it's really simple, and you can set it up in just a few clicks. Go to your repository, then to the repository settings. In the left menu, you should see the 'Pages' option; click on it. Set the source to 'Deploy from a branch,' select the main branch, and click 'Save.' After a moment, you'll see the deployment and a link to your page. This gives you a free and straightforward hosting solution for your website.
it is a nice challenge but next time ill add my personal picture and account links maybe for my portfolio
What challenges did you encounter, and how did you overcome them?editing the cursor to pointer
Overall, good job! In the future, check the positioning of elements in the design. For example, your modal is currently at the top but should be centered. Also, remember to check the whitespace; there is less whitespace on the Y-axis around the buttons. For your next project, you could try moving the CSS styles to a separate file and importing them into your HTML.
Learning about BEM Methodology
What specific areas of your project would you like help with?
clamp() on root element's font-size?Overall, great job!
Responsive Typography: Using clamp() on the root element for responsive typography is a good idea. It helps create a fluid typographic scale that adapts well to different screen sizes.
CSS Stylesheets: There are important differences between using Reset stylesheets and Normalize. Choose one based on your project's needs:
Reset Stylesheets: Use these if you want complete control over your styling and prefer to remove all default browser styles. Normalize: Opt for this if you want to maintain some default styling while ensuring consistency across browsers. Design Considerations: Always consider how the layout will change as screen sizes increase. For instance, having a large image alongside a smaller section can disrupt the visual ratio, affecting the overall design.
Keep up the good work!
Great work with recreating this design.It's smaller but for me it's exact copy of the design but just smaller. Good job and great that you separate files from SCSS, for this simple page it would be enough just one file, but it is great that you used that.
I am new to programming, so doing this challenge introduced me to new CSS selectors and functions that i never knew. It was quite a struggle, but it was also fun. I am confident that i will not be as stuck as i was in the challenge, should i repeat a similar design.
What challenges did you encounter, and how did you overcome them?● I design the desktop view first, so it was kinda difficult to make it responsive for mobile phones. ● The share effect after clicking was difficult for position accurately.
What specific areas of your project would you like help with?None, i successfully completed it
For me, it's a good job! The solution is slightly larger, and the share button has different colors than in the design, but I think you can be satisfied, especially after all your hard work. It’s great to hear you overcame your struggles. I have some advice for you.
You can replace this code:
padding: 20px;
padding-bottom: 8px;
with
padding: 20px 20px 8px 20px;
Now, you have all the padding in one line. Of course, when you want padding on only one side, it's good to use properties like padding-top, but when you need padding on multiple sides, it's better to use this shorthand.
Regarding Flexbox:
Regarding to FlexBox,
flex-direction: row;
row is the default value, so you don’t have to specify it in the selectors.
Good work, and good luck with the next challenge!
The description text about front-end developer should be white, and whole modal should be a little higher and widther, but for me it is a good job. You completed everything and without figma files good luck with next challange!
I am proud of completing this challenge from scratch I have use only HTML and CSS so I will go for javascript try to do more functioning
What challenges did you encounter, and how did you overcome them?First of all I mess up by writing everything without step by step process then i write code from begining and apply styling tag by tag which also help me to finish it earlier
What specific areas of your project would you like help with?I am not sure about this question sorry.
I think you did a great job, but you should work of sizes and placing text. Font size in your project is to big. And colors of text are different than in solutions. In google you can find couple web apps than can get you color in your image.
I think you did a great job. Of course, there are some differences, but in my opinion, it's a good job. The main difference is the height of the modal, but once you fix that, it will be perfect.
