Looking to hire developers?
@0xabdulkhalid
@JamesWallison1
Submitted
What are you most proud of, and what would you do differently next time?
It was finished easily :)
What challenges did you encounter, and how did you overcome them?
No challenges I think
What specific areas of your project would you like help with?
Nope, I don't really but if you can't, please feel free to give any solutions!
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
button elements needs to have a hover state with transparent background, actually we can handle that issue with a css color function named rgba()rgba() function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.rgba(0,0,0,0) for the button elements during hoverbutton:hover {
background: rgba(0,0,0,0);
color: white;
outline: 1px solid white;
transform: scale(1.02);
}
button elements. Currently this is your rules for them,.button-1{
padding: 12px 30px 12px 30px;
border-radius: 20px;
border: none;
background-color: white;
color: var(--Bright-orange);
font-family: "Lexend Deca";
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
justify-content: flex-end;
margin-top: 60px;
}
.button-2{
padding: 12px 30px 12px 30px;
border-radius: 20px;
.... // Same rules
}
.button-3{
padding: 12px 30px 12px 30px;
border-radius: 20px;
..... // Same rules
}
button {
padding: 12px 30px 12px 30px;
border-radius: 20px;
border: none;
background: white;
font-family: "Lexend Deca";
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
justify-content: flex-end;
margin-top: 60px;
}
.button-1 {
color: var(--Bright-orange);
}
.button-2 {
color: var(--Dark-cyan);
}
.button-3 {
color: var(--Very--dark-cyan);
}
button elements to apply general button styles and then we added the classes you've added in markup for modifying like button-1, button-2 and so on to apply unique colors for each of them without duplicating entire styles.transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba provides more granular control over the color correction.my submission for this challenge where i used this technique and feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@RegexRiddler
Submitted
What are you most proud of, and what would you do differently next time?
Managing the flex and grid layouts was tricky. Next time I'll sketch out the page on paper and plan my grids in advance.
What challenges did you encounter, and how did you overcome them?
The greatest challenge was the hero section, and making the images clip a little on the sides while preventing overflow.
What specific areas of your project would you like help with?
Any feedback is appreciated :)
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
PREVENT LAYOUT SHIFTS 📉:
width and height attributes.img which aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.img element have no explicit width and height to prevent CLS,<img src="./assets/images/hero.png" loading="lazy" alt="">
<img src="./assets/images/hero.png" width="820" height="303" loading="lazy" alt="" >
height and width needs to have the actual measurements of that corresponding image. I shown mobile image as an example because Mobile devices can be easily affected by CLS than Desktop devices..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@maiarasteffen
Submitted
What are you most proud of, and what would you do differently next time?
Gostei muito de desenvolver utilizando as propriedades do display e do position, para colocar cada elemento separado! foi muito bom também trabalhar com os pseudos before, after e hover para modificar os elementos quando passa o mouse!
What challenges did you encounter, and how did you overcome them?
O maior desafio foi para estilizar a parte do elemento ativo, quando passa o mouse, mas com pesquisas descobri que o código fica mais fácil de trabalhar com opacidade, sabendo como utilizar.
What specific areas of your project would you like help with?
Me ajudou muito no desenvolvimento de Front-end
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
IMPROVING HOVER STATE 🪄:
:before is not set so during the hover it looks box in shape. We need to add smooth rounded corners for that.border-radius: 7px for img, Instead of adding for that you can add it for image-link anchor tag. It's the parent of both things so we could easily add borders and prevent children overflow using overflow: hidden..nft-card .image-link {
overflow: hidden;
border-radius: 7px;
}
.nft-card .image-link .image {
border-radius: 7px;
}
img and :before for getting the perfect result!.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@MuliroMatt
Submitted
What are you most proud of, and what would you do differently next time?
I did something using grid that I've never done before
What challenges did you encounter, and how did you overcome them?
It was hard positioning the elements where they should be, but I learned how to use grid-row and grid-column and solved it.
What specific areas of your project would you like help with?
I'm up to any suggestions
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
MAKING ACCESSIBLE TESTIMONIALS :
section element which is not intended to use to build Testimonials, Actually we need to use <figure> and <blockquote> elements to wrap the testimonials.<figure>
<figcaption>
<img src="./assets/images/image-daniel.jpg" alt="Daniel Clifford" />
<div>
<p>
<span class="sr-only">Testimony Author</span>
Daniel Clifford
</p>
<p>Verified Graduate</p>
</div>
</figcaption>
<blockquote>
<h2>
Testimonial Title
...
</h2>
<p>
Testimonial Quote
...
</p>
</blockquote>
</figure>
img inside testimonials because they are not for decoration, It will help us to tell the user who is the author of the testimonial, its recommended to use the author's name as the alt attribute value like alt="Daniel Clifford" instead of "user image"..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@nickabate
Submitted
What are you most proud of, and what would you do differently next time?
Constantly improving my proficiency with Tailwind and speeding up my development flow with new tools.
What challenges did you encounter, and how did you overcome them?
Remembering to utilize utility classes, and avoiding creating redundant classes.
What specific areas of your project would you like help with?
Any efficiencies I might have missed with Tailwind like utility classes which may have been utilized better.
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
ADDING HOVER STATE 🪄:
hover state for the card ?section elementtransition-shadow duration-300 hover:shadow-[12px_13px_0px_#000]
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@shankar405
Submitted
What are you most proud of, and what would you do differently next time?
I completed the task next time will do it in more details
What challenges did you encounter, and how did you overcome them?
be able to finish what i started
What specific areas of your project would you like help with?
grid, responsive design
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
margin.margin to center the component both horizontally & vertically, Instead we should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.Grid to center the component.body {
min-height: 100vh;
display: grid;
place-items: center;
}
.card {
margin: auto;
margin-top: 25%;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@AmitKumar1590
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
QR CODE NEEDS TO BE SCANNED :
alt attribute with valid content instead of just empty alt ""alt attribute should explain the purpose of the image.alt="QR code to frontendmentor.io"<img src="image-qr-code.png" alt="QR code to frontendmentor.io">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@andguyen1
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of the structuring, it's similar to the last one so not much needed to be done. Nonetheless, I got more practice of using this kind of structuring and playing around with the positioning.
What challenges did you encounter, and how did you overcome them?
I had some issues with mobile implementation. I still have them, but I fixed my sizing issues using width: 100% and height: auto;. This had fixed the problem I faced for a while.
What specific areas of your project would you like help with?
I'd like help with how I can better structure this and/or where or how I should best be editing my sizing and etc.
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
ADDING HOVER STATE 🪄:
box-shadow has not been set yet. Your solution would be perfectly finished if you add this as a finishing touch!.container {
transition: box-shadow .3s;
}
.container:hover {
box-shadow: 12px 13px 0px 1px #000;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@olicoder13
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
HTML 🏷️:
<div> or <span>.
They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers<div class="contenedor"> element with the proper semantic element <main> in your index.html file to improve accessibility and organization of your page<div class="contenedor"> into<main class="contenedor"> because it includes all content directly related to the page's main idea..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@Graciano1997
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of this work and next time I hope match 100% the design
What challenges did you encounter, and how did you overcome them?
I face challenged on implementing the counting down logic, I overcoming the issues by practice bellow math operations: Eg: 172799(seconds) === 2 days 86400(seconds) ==== 1 day
172799s/86400s == 1 day
((172799s)%86400s)/3600s == 23hours
((172799s%86400s)%3600s)/60min == 59min
((172799s%86400s)%3600s)%60s == 59seconds the remains seconds...
What specific areas of your project would you like help with?
I would receive an help for match 100% the provided design
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
DESIGNING USING PIXEL PERFECT 🖼️:
my submission as an example of how it helps us to design much better looking websites..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@leonardomzb
Submitted
What are you most proud of, and what would you do differently next time?
Proud of my first webpage using JavaScript :)
What specific areas of your project would you like help with?
Any feedback is welcome.
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
MAKING RATING FORM ACCESSIBLE :
button elements which are paired up with Javascript to handle the operation.<div class="button-flex">
<button class="rating-button ...">1</button>
<button class="rating-button ...">2</button>
...
</div>
<button class="submit-button ...">Submit</button>
input element with type="radio" which is wrapped inside fieldset and form. By using radio buttons instead of normal button we can simply give checkboxes like options to select instead of relying on Javascript to work.<form>
<fieldset>
<legend class="sr-only">Please select a rating</legend>
<div>
<input type="radio" name="rating" id="rating-1" value="1">
<label for="rating-1">1</label>
</div>
<div>
<input type="radio" name="rating" id="rating-2" value="2">
<label for="rating-2">2</label>
</div>
....
</fieldset>
<button type="submit">
Submit
</button>
</form>
my submission for this challenge, So that you could figure out how built this rating component in an inclusive way to prevent accessibility issues..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@Mys1337
Submitted
What are you most proud of, and what would you do differently next time?
Proud for having finished this project without too much struggle
What challenges did you encounter, and how did you overcome them?
Didn't encounter any hard challenges. Just proud that everything I've learn so far are being used and not forgotten
What specific areas of your project would you like help with?
I would like to have opinion about the html sematics if it is correct. And also I would like to know if there is a specific way to structure the css file code to make a better code
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
BODY MEASUREMENTS 📐:
min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientationheight: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@peter4049
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of deconstructing first and starting to build HTML & adding the CSS section by section and VS Code Live server shows each update and finally placing all CSS and live server final results on the same page the moment of happiness is priceless. It's give me a lot of force to do more.
What challenges did you encounter, and how did you overcome them?
In the beginning, I was confuse about display and viewport, and it made me upset but go back to the theory also I tested at the code pen and finally when I fully understand I came back to the project and finish it up.
What specific areas of your project would you like help with?
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
ADDING HOVER STATE 🪄:
hover state for the card ?.container {
transition: box-shadow .3s;
}
.container:hover {
box-shadow: 14px 15px 0px #000;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
What specific areas of your project would you like help with?
I can't say for sure but I'm open to suggestion if there are ways I can optimize or correct my solution
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
MAKING SOCIAL ANCHORS ACCESSIBLE :
<a> elements lacks aria-label attribute. It's important for social links which can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.<a href="#" aria-label="Facebook profile of Loopstudios">
<img src="images/icon-facebook.svg" alt="">
</a>
my submission and/or feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@LagoGiovanna
Submitted
What specific areas of your project would you like help with?
I would like to understand more about making a responsive web page. I feel like his is hard for me.
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
USING ALT EFFECTIVELY :
alt like ''A picture of Giovanna's photo". So you don't want to add words like "photo", "picture" because accessibility devices will automatically add the word "picture" or "photo" by default.alt attribute should explain the purpose of the image, in our case the image is a portrait of yourself right ? then alt would be your name itself.alt="Giovanna"<img src="assets/images/avatar-giovanna.jpg" alt="Giovanna">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@Kingkobi01
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
POINTING CURSOR ↗️:
button element has not a pointing cursor, this property plays a major-role in terms of both UI & UXcursor: pointer CSS property is important for button-like elements because it changes the cursor from the default arrow to a pointer when hovering over the element. This provides a visual cue to the user that the element is clickable and encourages interaction.cursor: pointer helps to improve the usability of the interface by making it easier for users to identify interactive elements. It also helps to provide feedback to the user by indicating which elements are clickable and which are not.button elementbutton {
cursor: pointer;
}
button has got the pointer & you learned about this property as well.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@skalii-sofiia
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
DECORATIVE SVG'S ♨️:
alt attributes for Star svgs, because the alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.alt attribute.alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decorationExample:
<img src="images/decorative.svg" alt="">
<img src="images/icon-star.svg" alt="Stars">
👇
<img src="images/icon-star.svg" alt="">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@gakrita
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
BACKGROUND iMAGE 📸:
CTRL and +. We need to place the background in immovable manner, moving background svg will give a bad impression to the user who visits our site.background color with the background svg they provided to place perfectly as same as design without any distortion.main {
background: top/contain url(./images/pattern-background-desktop.svg) no-repeat, #E1E9FF;
}
@media (min-width: 800px) {
main {
background-image: url(images/pattern-background-desktop.svg);
}
}
css file.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@risangabdurrahmang
Submitted
What are you most proud of, and what would you do differently next time?
I`am completed this first challenge and i use a mobile first design approach
What challenges did you encounter, and how did you overcome them?
I had difficulty in setting up responsive images but it can be solved with try codes
What specific areas of your project would you like help with?
I think it should be more thorough in writing code for responsive design
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
.attribution element has not been placed bottom yet. Actually it needs to be placed at the bottom of screen and the card component wants to be centered. So let me explain, How you can place the component at bottom with using absolute positioning for footerattribution element you first need to change it into a footer element.attribution will typically contains information about the author of the section, copyright data or links to related documents. So it needs to be a footer element instead of plain div element to improve accessibility of your solution.Flex layout of css to center the component, So you just want to add absolute position for <footer> element to place it in bottom of the pagebody {
position: relative;
}
footer {
position: absolute;
bottom: 1em;
}
attribution component has been properly at bottom..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@LGfariaZ
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
ANCHOR ELEMENT 🔴:
<a> elements (Social links) lacks aria-label attribute which is way more important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.<a href="#" aria-label="Visit us on Facebook">
<img src="./src/images/icon-facebook.svg" alt="">
</a>
my submission and/or feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@adrian-reina-391
Submitted
What are you most proud of, and what would you do differently next time?
First it looked excellent in the mobile view but in the PC view the design was broken so I had to start from scratch as I couldn't find the problem, I just did the right thing by not giving up
What challenges did you encounter, and how did you overcome them?
I did not understand why or how to ensure that in the PC view, the cards take up all the space that I assign to them in the grid, so I had to start with the PC view to do everything until I finished in the cell phone view.
What specific areas of your project would you like help with?
I would like to understand what needs to be done so that an element always occupies the entire area of its corresponding grid
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
MAKING ACCESSIBLE TESTIMONIALS :
section element which has no semantic relations for testimonials, Actually we need to use <figure> and <blockquote> elements to wrap the testimonials.<figure>
<figcaption>
<img src="./assets/images/image-daniel.jpg" alt="Daniel Clifford" />
<div>
<p>
<span class="sr-only">Testimony Author</span>
Daniel Clifford
</p>
<p>Verified Graduate</p>
</div>
</figcaption>
<blockquote>
<h2>
Testimonial Title
...
</h2>
<p>
Testimonial Quote
...
</p>
</blockquote>
</figure>
alt for img inside testimonials instead of empty one alt="" because they are not for decoration, It will help us to tell the user who is the author of the testimonial, its recommended to use the author's name as the alt attribute value like alt="Daniel Clifford".
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@OladokunLT
Submitted
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
filter property..social-media {
filter: invert();
display: flex;
gap: 1rem;
|
filter you can smartly tweak colors of logo. Additionally we added flex layout to make it close to the design image..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@ryyHardy
Submitted
What are you most proud of, and what would you do differently next time?
I liked how I used the CSS cascade this time to clean up the CSS a bit for the text elements. I did not fully match the design because I read the text was supposed to be smaller on mobile and the dimensions of the card looked slightly different in the design files.
What challenges did you encounter, and how did you overcome them?
Organizing the text elements was difficult because they were similar, but had slight differences. I used a "p" selector to basically set a default for the paragraphs and I overwrote them slightly for each text element. That helped, but I still needed to use a lot of weird values for the units and I'm sure there is a better way.
What specific areas of your project would you like help with?
I was wondering if I should have used different units for a lot of the spacing challenges I had. I tried to use a mix of em, rem, and % but I'm not sure if I did that correctly. Also, I feel like the CSS for the active states looks a little weird.
Also, I used a lot of descendant selectors like ".class1 .class2" and I'm not sure if there is an alternative or if it was even necessary to do that in most of them.
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
HTML 🏷️:
attribution element on your solution actually needs to be a footer element instead of div element which causes lacking of landmark for a webpage and allows accessibility issues to screen readers.<div> or <span>.
They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers<footer> typically contains information about the author of the section, copyright data or links to related documents.<div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your pagefooter from being inside the main element, because the main and footer elements needs to be direct child of body element..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@ikitamalarose
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud to have been able to respect the design for each screen size
What challenges did you encounter, and how did you overcome them?
...
What specific areas of your project would you like help with?
Any comments to improve my work are welcome :)
@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
PREVENT LAYOUT SHIFTS 📉:
width and height attributes.img which aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.img element have no explicit width and height to prevent CLS,<img src="starter-code/assets/tablet/image-hero.png" alt="">
<img src="starter-code/assets/tablet/image-hero.png" alt="" width="820" height="303">
height and width needs to have the actual measurements of that corresponding image. I shown mobile image as an example because Mobile devices can be easily affected by CLS than Desktop devices..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful