- Was able to work out the event loop of the whole app.
- Problem : To keep checking the current tip selected.
- Solution : Used stack properties push() and pop()
- How to write better code?
Good effort. For this feedback I will focus on the CSS. I recommend setting the min-width media query at around 600px. It is currently at 1440px which means someone on laptop (like me), never gets to see the desktop layout as my screen is below 1440px.
Also set a max width (around 800px) for the calculator card so that it does not stretch out too much (regardless of the size of the viewport the user is using)
Most proud of: I learned how to use the old way (XML) and the new way (fetch).
Do differently: Create a loading spinner.
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None, but I welcome any comments and hints.
Hi, good effort.
One recommendation for improvement is in the media query. It stays in mobile design until 1000px. You can use css grid auto-fit / minmax to create a responsive layout at all screen sizes. This article from css tricks gives a good demonstration of how this works.
The thing I'm proud of the most it the time it took me to complete this project. The previous challenge took me more than a week to get to a point where I was somewhat satisfied, so I was expecting to take about that long to complete this one. However, this time around it only took me three days as it didn't take too many tries to get everything to work properly.
What challenges did you encounter, and how did you overcome them?Nothing particularly challenging this time around. Completing this challenge wasn't a breeze, but there was constant progress at all times.
What specific areas of your project would you like help with?If anything, I'd like to improve the design of the mobile layout. I'm not completely satisfied with it.
A very good effort.
One area I would suggest for improvement is to give the container a max-width (eg 900px) so that at desktop the layout will remain constant no matter how large the viewport. This will enable you to cut down on the amount of media queries you have used.
I also recommend learning to use mobile first design as I find this reduces the need for media queries. This article from Kevin Powell gives a good introduction to mobile first design
The Javascript
What challenges did you encounter, and how did you overcome them?The Javascript
What specific areas of your project would you like help with?The actual sizing, spacings and all
Well done. The solution is very close to the brief at both mobile and desktop design.
One potential area for improvement is using a naming convention for your css variables. This will make it easier to understand, especially if you review your code at a later date. This is a good article on css variable naming conventions - link - guidance on css naming conventions
I will be glad if you correct me if I am missing something.
Hi Tarik
A good effort. A few potential areas for improvement:
Please review either the figma or sketch files provided in the challenge. You will be able to get the correct layout at different viewports, font, colours shown in the design - (https://www.frontendmentor.io/learning-paths/building-responsive-layouts--z1qCXVqkD/steps/65eab0bd5acebd40b10dc978/challenge/start)
Consider using media queries to better reflect the changes at different viewports. For example there is a single hero image at mobile / tablet view. This transforms to 2 images (left and right side) as you have shown in the desktop view. This article on the use of media queries - (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
Consider using css variables for values you use repeatedly. This will save on typing and remembering. See example below:
:root {
--ff-primary-font: "Red Hat Display", sans-serif;
--fc-primary: #28283d;
}
html {
font-family: var(--ff-primary-font);
color: var(--fc-primary);
}
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Good effort. A few areas for potential improvement.
Avoid using inline CSS as it can be difficult to maintain. For the card borders you can an extra class for each card - eg for the first card - ''' class="card supervisor" ''' in the html and then in the styles page set the top border colour using ".supervisor"
I recommend having an interim media query at about 700px where you can have 2 cards per row and then at the 1200px break out into the desktop design. Below is an example using grid:
@media (min-width: 700px) {
.container {
display: grid;
gap: 2rem;
grid-template-areas:
"one two "
"three four";
}
.card {
max-width: 340px;
}
.card:nth-child(1) {
grid-area: one;
}
.card:nth-child(2) {
grid-area: two;
}
.card:nth-child(3) {
grid-area: three;
}
.card:nth-child(4) {
grid-area: four;
}
}
@media (min-width: 1200px) {
.container {
grid-template-areas:
"... two ..."
"one two four"
"one three four"
"... three ...";
}
}
Well done. Very good representation of original. Slight suggestion for improvement is more explicit naming of the root variables. For instance "--color1-a" . I am curious to learn what the "a" stands for.
Thanks for submitting your effort. Your css style is not showing. Please place it inside the <head> element for it to show - see below
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social links profile</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
******
</head>
It is best practice to save the style as a separate page - eg "style.css" and then link to it from the <head> element. See example below (final line in head section)-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social links profile</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
</head>
box-shadow
into that active stateA very good replication of the brief - well done.
A few minor areas for improvement -
To make the container centred on all views (especially mobile) place the display flex on the body and make the width of the container a percent of the body, with a max width in pixels - see example below -
body {
font-family: "Figtree", sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: 1rem;
width: 90%;
max-width: 375px;
margin-inline: auto;
}
Also consider using css variables for your colours as it makes it easier to remember - see example below:
:root {
--clr-white: hsl(0%, 0%, 100%);;
}
.content {
background-color: var(--clr-white);
}
You can read further on css variables here - mdn - css variables
That was hard, I didn't know how to put the color above the image so I used Photoshop, any tips to improve my code? The most difficult part for me was when I have to make a text above another in a single line. The stats part.
This is a decent effort. This article will give you some tips on how you can add an overlay using CSS - https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
Regarding adding text over another, you can place the stats in a span and then in css display the span as a block (display: block) to force the following text into the line below
<div> <p><span>10k+</span>companies</p> <p><span>314</span>templates</p> <p><span>12m+</span>queries</p> </div>All feebback thank you and welcome
A decent effort. I recommend using google fonts to get similar fonts to the ones used in the example (get the "inter" and "Lexend Deca" fonts from here - https://fonts.google.com/).
Also have a look something to make you website more dynamic such as flexbox. This is a good article to get you started - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Gracias por los comentarios.
Bien hecho, es una buena réplica. Un consejo: considere crear consultas de medios para que puedan verse en pantallas más pequeñas (ipads, teléfonos).