that i used react and did mobile first.
What challenges did you encounter, and how did you overcome them?making use of reusable components and conditional rendering of the daily, weekly and monthly data
What specific areas of your project would you like help with?nothing
I finished this honestly really quickly
What challenges did you encounter, and how did you overcome them?I thought getting the padding/ margin pixel perfect was pretty difficult but got the pretty close.
What specific areas of your project would you like help with?I would like tips on cleaner code. I don't think its messy but maybe ways to make it easier going forward?
Your work looks amazing. Well done!
font-weight to your text to match the design.<a href="website link here">text here</a>
I hope this was helpful, and if you need any help, don't hesitate to contact me HERE
Hi, I see you almost match the design perfectly,
Here are some tips to make it perfect.
Instead of repeating the same style to every button alone, you could just give the same class name and style them all together in the CSS file
Change the button's text color to white.
Wrap all the buttons in on <div class="button"> and apply this css:
.links {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 2%;
width: 80%;
height: 50%;
margin-top: 15px;
margin-bottom: 20px;
This is just the beginning of your awesome journey as a front-end developer Keep up the good work.
I hope this was helpful, and if you need any help, don't hesitate to contact me Here
I am very proud due to the fact that I focused on not looking at my notes and just trying to code this as if I was working on a project for a client on a deadline. I tried to use the documentation for many of the aspects that I was unsure of and played around with styling for a little before I figured out what I needed to do to get the display that I was looking for.
What challenges did you encounter, and how did you overcome them?This biggest challenge I had was styling the @media query although I know it is not perfect, I am happy with the results. I used the documentation on media query to do the best that I can, and I am very happy with how it turned out in the end, especially in the sense of scalability.
What specific areas of your project would you like help with?The media query if someone wants to explain what I did wrong or what I can do better next time, I am all ears.
Hi Ryan, You did well, and your work is great.
here's how can help you make it better,
<body> like this:<!DOCTYPE html>
<html>
<head>
</head>
<body>
your code should be written here
</body>
</html>
then add a body selector in your CSS file and apply the background-color: #D5E1EF; inside instead of html, which is useless in our context.
display:flex; justify-content:center; align-items: center in the body selector.
-Change the color of the h1 to black to match the designThis is just the beginning of your awesome journey as a front-end developer Keep up the good work.
I hope this was helpful, and if you need any help, don't hesitate to contact me here.
Hi, you did well. You are a few steps away from matching the design.
hsl(220, 15%, 55%).justify-content:center; align-items: center; to your body selector in the CSS file to center your qr-component in the middle of the screen horizontally and vertically.<center> tag add text-align: center; to the card selector in css file, same the for the h2 tag.This is just the beginning of your awesome journey as a front-end developer Keep up the good work.
I hope this was helpful, and if you need any help, don't hesitate to contact me here.
I like build this site more fast, but i learned much
What challenges did you encounter, and how did you overcome them?Somethings not adjust and i broken my mind for adjust they
What specific areas of your project would you like help with?somethings in javascript
Hi, Márcio, you are on the right path; well done!
rem instead of px to give your element more flexibility on different screens.style.css
@media screen and (max-width:600px ){
.card-main {
height: 100%;
flex-direction: column-reverse;
}}
main.js
const image=document.getElementByClassName("img-card")
function imageAdjust (){
if (window.matchMedia("(max-width: 900px)").matches) {
image.src="/assets/images/illustration-sign-up-mobile.svg"
}
else{
image.src="/assets/images/illustration-sign-up-desktop.svg"
}
}
window.onload = imageAdjust;
window.onresize = imageAdjust;
This is just the beginning of your awesome journey as a front-end developer Keep up the good work.
Hope this was helpful and if you need any help don't hesitate to contact me here.
Hi Alejandro, You did well with the design; it looks good.
For mobile, try to place share-icon and share_div in the same div and hide the share_div initially. Once the user clicks the share_icon, hide the user_div and display the share_div, displaying them on top of each other is not a good practice.
Add the else case once the user want to hide the share options, it's not included in your code just by adding an else statement that undoes what you changed in the if statement .
Add some semantic HTML to make your code accessible to screen readers.
I Hope this was helpful
getting comfy to work with tailwind and build responsive and pretty design
What challenges did you encounter, and how did you overcome them?fetching the data and manipulating DOM elements using javascript
What specific areas of your project would you like help with?I need help with javascript.
Thank you in advance
Tried mobile-first workflow for the first time.
What challenges did you encounter, and how did you overcome them?Surprisingly, recreating the design was harder than the responsiveness.
What specific areas of your project would you like help with?I've a lot to improve on for this project. Any feedback is welcome.
keep it up & Hope this was helpful!
<a href="www.github.com"">GitHub</a>
display: flex;
justify-content: center;
align-items: center;
Adjust the width and height to match the design
Try to customize it by adding your name, profile picture, and personal social links.
Add some creative stuff, like icons for every social media button, maybe some effects when hovering,...
If you needed any help feel free to contact me Anwar Mestycer
keep it up
I hope this was helpful!
display: flex;
justify-content: center;
align-items: center;
Adjust the width and height to match the design
Try to customize it by adding your name, profile picture, and personal social links.
Add some creative stuff, like icons for every social media button, maybe some effects when hovering,...
keep it up
Hope this was helpful!
styling the page because of the amount of things to style
What specific areas of your project would you like help with?any better approaches or solutiones
Well Done
Challenge yourself by using CSS pro-processors like Sass, Less,. or CSS frameworks like Tailwind and Bootstrap.
I hope this was helpful!
