P
@HelewudSubmitted 11 days ago
Mirna Andrišić
@mandrisicAll comments
- @mandrisicPosted 5 days ago
it looks good but i just have few tips on how to improve this project:
- the overlay shouldn't just have a width od 32% it should go over other content except the open hambuger menu
- there is no need for 6 columns, 3 columns is the best option for your grid in this case, because i can see that the button 'Read more' and 02 section are not verticaly aligned -> and they would be if you put them in the same column (middle one)
Marked as helpful0 - @CLTJaredSubmitted 7 months ago@mandrisicPosted 10 days ago
looks good, could use more padding here and there but overall very nicely done
0 - @ilham-boukSubmitted 3 months agoWhat specific areas of your project would you like help with?
Any feedback are welcome
@mandrisicPosted 14 days agothe challenge was to make this task using only HTML and CSS, but in your code I saw you used JS as well. you should have used details and summary tags in html which would have made everything more accessible and easier for you to make. then you could also make the first summary item be open when the page loads so the user knows that they can open the other summaries as well.
0 - @zeeguSubmitted 28 days agoWhat are you most proud of, and what would you do differently next time?
❤Things I've tried
- Added
aria-label="Rate 1 out of 5"for better screen-reader support - Considered web accessibility
- Scored 99% on Google PageSpeed Insights
- Used Mobile first approach for responsive design
Please let me know if there are any areas of improvement! Thanks :D
@mandrisicPosted 17 days agowhen I previewed your code the font Overpass didn't load and in the mobile version the containers of each rating number was I guess too big because they went to another row -> maybe it's even because it's not the correct font. all in all screenshot looks great, so good job
0 - Added
- @shadowbanksSubmitted 21 days agoWhat specific areas of your project would you like help with?
I'm open to any other suggestions.
Thank you for your time :))
- P@kephaloskSubmitted 26 days agoWhat are you most proud of, and what would you do differently next time?
Building the html structure completelly in plain JavaScript without a framework.
What challenges did you encounter, and how did you overcome them?Dynamically rendering html elements by creating reusable components.
What specific areas of your project would you like help with?n/a
@mandrisicPosted 24 days agohello, I just threw a quick glance at your code and I have some things you could improve:
- you didn't use the font that was used in the design preview
- smallest mobile version 320px doesn't look good, it's not centered (probably because the container is too big)
- tablet version would look better if it also used the same design as the mobile version (everything in one column)
just practice and you'll se these things more clearly.
Marked as helpful1 - @AlexDDevvSubmitted almost 2 years ago@mandrisicPosted 26 days ago
i couldn't see your code or your site live. but from what i can see through the sceenshot it looks okay, just a little small
0 - @danielashjariSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
- Use frameworks
- write cleaner lines of code
- Have aria attributes and accessibility in mind from beginning
- pop-ups => use js and event listeners
- aria attributes
- pictures (tags, styles)
@mandrisicPosted about 1 month agoeverything works fine, but you should focus more on structuring and designing projects as close to the design files
tip: if you want your component to be centered on the page make .attribution container have a position: absolute, so it doesn't affect the rest of the page alignment
Marked as helpful1 - @hkaur108Submitted about 1 month ago@mandrisicPosted about 1 month ago
there's a couple of things you didn't copy from the given design:
- quotation mark image is not visible (if you're having trouble understanding how to make the image go 'behind' the content and still not affect the rest of the content: read more about position: absolute and z-index)
- alignment of text - everything should be on the left, and have less padding
- cards should end on the same horizontal line
- you shouldn't have a header inside a header
- the testimonials should be centered on the page
i hope this helps little and doesn't sound too mean
Marked as helpful0 - @dharul619Submitted about 1 month ago@mandrisicPosted about 1 month ago
the desktop version looks good, but the mobile version could do some work. the 'boxes' were too big for the screen. it's better to start from the mobile version and then do the desktop version. in the code i saw that you used box-container to group the box-2 and box-3 to go in the middle, but you could have just used grid and would've saved a lot of time.
Marked as helpful0 - @je0vaSubmitted about 1 month ago@mandrisicPosted about 1 month ago
for the desktop version the only thing I could see, that you didn't horizontaly center the prices (align-items: center), but thats a minor thing. mobile version could be better, prices could use more padding, container cuts on the top, there should be more space between the product container and the background.keep coding and you'll see these mistakes more clearly.
1 - @erlley7Submitted about 2 months ago@mandrisicPosted about 1 month ago
you didn't really use the same colors as the design (you have it all written in the file style-guide.md. also, you should take more time in comparing the photos of mobile and desktop design and think about all the specific things, how they look in the photo and how could you style it to make it as similar. for example, in the table with nutrition you didn't have horizontal lines (border-bottom for each li element). you just need to take more time to focus and you'll be great in no time :)
0 - @4ndradeGabrielSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This project is a social links profile card, created as part of a Frontend Mentor challenge. The objective was to design a clean, accessible, and fully responsive profile card that displays social media links while maintaining a visually appealing and structured layout.
Technologies & Techniques Used:
-
HTML5:
- Implemented semantic elements like
<main>,<footer>,<h1>, and<ul>to enhance content structure and improve accessibility. - Added meaningful alt attributes to images, ensuring screen readers describe the profile picture correctly.
- Used aria-label attributes on social media links to provide better descriptions for assistive technologies.
- Implemented semantic elements like
-
CSS3:
- Designed the layout using CSS Grid and Flexbox, ensuring proper spacing and alignment.
- Used CSS variables
:rootto maintain a consistent color scheme and typography, improving maintainability. - Applied
:not(:last-child)selector to efficiently manage spacing between social link items without affecting the last one. - Added smooth hover and focus effects to improve user interaction, making links more visually responsive.
-
Accessibility Enhancements:
- Ensured proper keyboard navigation by adding a
:focusoutline to links for users who navigate without a mouse. - Adjusted color contrast to improve readability, ensuring text remains visible and accessible.
- Structured social media links within a
<ul>for better screen reader navigation and a logical reading flow.
- Ensured proper keyboard navigation by adding a
-
Responsive Design:
- Followed a mobile-first approach, ensuring the card adapts seamlessly across different screen sizes.
- Set
max-widthconstraints to prevent the card from stretching too much on larger screens while keeping the design centered.
-
- @Henzo238Submitted about 1 month ago@mandrisicPosted about 1 month ago
a little bigger than the design, but looks good. i would just look more individual things, for example the yellow tag "Learning" should have bigger padding. stuff like that...happy coding
Marked as helpful1 - @mouadbimkSubmitted about 1 month ago
