@mkostrikovSubmitted 3 months ago
P
DalaScript
@DalaScriptAll comments
- @taoriyllSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of using a new tool in my project - SCSS.
What challenges did you encounter, and how did you overcome them?I straggled with radio inputs and labels. I couldn't make it right till I changed HTML file
What specific areas of your project would you like help with?I couldn't figure out how to apply @media rule to this project. For some reason, everything looks so small on small screens and I tried to play with @media, but it wasn't successful. I think there is a solution and if I spent some time I could figure it out, but I'm so tired of this project (because of radio inputs) that I decided to leave it like this.
- @TarcillaRodriguesSubmitted 2 months ago@DalaScriptPosted 2 months ago
Olá! 👋
O design parece muito bom, bom trabalho!👍
A primeira coisa que quero dizer é que fiz um vídeo sobre esse projeto e você pode ver como eu o codifiquei:
QR code component coded by DalaScript
Eu construí este projeto usando:
- HTML
- SCSS
- BEM
- Mobile-first workflow
Aqui estão algumas dicas para melhorar este projeto:
- Primeiro, o que você precisa é usar elementos semânticos. Muitas vezes, você usa o elemento
<div></div>, que não é semântico. - Primeiro, devemos começar com o design para dispositivos móveis primeiro📱, para que tenhamos benefícios como Melhor experiência para dispositivos móveis🌟, Código mais simples🔧, Sites mais rápidos⚡, É mais fácil adicionar mais depois➕. Em vez de
@media screen and (max-width:)você usamedia screen and (min-width).
Boa sorte!🍀 DalaScript
Marked as helpful0 - @radhaBharadwajSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Feedbacks are welcome
@DalaScriptPosted 2 months agoHeey 👋
Here are some tips, I hope it helps:
HTML:
- In order for your website to be semantically justified, it is necessary to use semantic elements. Every web page needs a
<main>tag that separates the content. This is vital for accessibility as it helps screen readers identify the "main" section of the page. so change your<div class="mainContainer"></div>with<main></maintags. NOTE: - we don't use camelCase to identify html classes, instead we use hyphen mode, So the class would be correctly identified: main-container
- You also need to change the card tag with
<article class="card"></article>, instead of div. (A div is not a semantic element)
CSS:
- in this Challenge, you actually don't need to make it responsive, because sizes are the same for Mobile and Desktop.
- We first start writing the code for the mobile device, This is called - Mobile-first workflow.
- The rest depends on the dimensions, you just need to correctly specify the padding, margin, font size, font family and that's it.
Good Luck! DalaScript
Marked as helpful0 - In order for your website to be semantically justified, it is necessary to use semantic elements. Every web page needs a
- @jamesbarnettSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I was more methodical with regards to top and bottom margins and padding for vertical alignment when compared to my last challenge. Also, this was my first time self-hosting fonts and converting them to woff2.
Differently - I would take more of a mobile first approach. My media query strikes me as clunky. Perhaps a mobile first approach would have resulted in something different.
What challenges did you encounter, and how did you overcome them?I was tripped up briefly on the "social links list" by default margins/padding on `` elements. It first presented by making everything look "too indented". Using the search term "ul no indent" gave me plenty of explanations. I later encountered an issue with the spacing on the bottom of the social links list, but I immediately suspected default padding/margin values and confirmed it with the dev tools.
What specific areas of your project would you like help with?I am interested to hear opinions on the media query.
- Should it have been decomposed into multiple media queries?
- Is there a standard practice for media query placement within a css file?
- I am always looking for feedback on markup structure. Opinionated and nitpicky things are welcome.
I have two uses of
text-align: center. Are there better solutions?@DalaScriptPosted 5 months agoHey, Good Job!👏✨
Your design looks very good, also you don't need a lot of media queries, only if you consider it necessary.
Here are some tips to improve this project:
- First of all, we should start with mobile design first📱, that we have benefits like 1. Better mobile experience🌟, 2. Simpler code🔧, 3. Faster websites⚡, 4. It's easier to add more later➕.
- To center an article element, you must give its main element:
height: 100vh; display: flex; align-items: center; justify-content: center;Good luck!🍀👍
Marked as helpful1 - @nvallineSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
In this challenge I implemented a tabbed interface using vanilla JavaScript and laid out the design using SASS.
What challenges did you encounter, and how did you overcome them?The tabbed interface was the first time I have implemented such a feature and luckily through the community I found a great article about implementing such a feature.
What specific areas of your project would you like help with?I am always appreciative to hearing suggestions or tips on how to improve my code especially with JavaScript.
@DalaScriptPosted 6 months agoHey👋, Good Job!
Your Project looks very good and most importantly it is functional and works
I'm kind a perfectionist Person, And I'll give you some tips to improve your design.
- your image in
<figcaption class="profile">container needs outline property instead of border, and image's sizes will match. <h1>Jeremy Robson</h1>needsline-height: 47px- you need hover for your
<div class="content"></div>container. - you need also hover for your ellipses image, it should be actually button, And on hover it should change color :
<button class="card-btn"> <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd"/> </svg </button>and then to change color of those ellipses (I saw your using scss, so I will write for scss):
button { &:hover { path { fill: **here comes what color you want**; } } }Good Luck! 🍀
Marked as helpful0 - your image in
- @jamesbarnettSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am pleased it works on both desktop and mobile with respectable accuracy. I was also happy about noticing the dropshadow effect on hover and having to google to find a solution (that being the
haspseudo class).As far as differences, if I had to do it again, I would probably experiment with different markup and/or layout strategies--specifically adding an addition wrapper type div and experimenting with a 3 column grid layout or possibly sub-grid. I'd also like to do more mobile first development.
What challenges did you encounter, and how did you overcome them?The font scaling, understanding the CSS math functions. Kept breaking the layout. Got a little more comfortable with Figma, Firefox Dev Tools, and VisBug. Watched several videos on responsive fonts without media queries. Persistence, research, and experimentation paid off.
What specific areas of your project would you like help with?Would it have been better to implement the instructor avatar as a
::beforeelement? Why or why not, or just a matter of taste?My use of the
hgrouptag... appropriate? Unnecessary? Or maybe you would have used it, but differently. (removed: no longer relevant)Any other semantic elements that were used inappropriately or some that I missed an opportunity to leverage?
@DalaScriptPosted 6 months agoHey🖐, Good Job!
Your project looks good, not much to say, but I can give you some tips :
1. Your HTML file is semantically correct, but could put your card to article element, cause main is a more general container, it cannot be a single card.
2. Your div container with class name course-published should be actually p Tag, semantically is more correct. and for date, you can use time tag so it would be like that :
<p class="course-published">Published <time datetime="2023-12-21"> 21 Dec 2023</time></p>Good Luck! DalaScript
Marked as helpful1 - @jrgenwebSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I made it, next time I will try validator.js or another validator js library, in this task I googled a regex pattern. Alternatively, I could even make the component by generating the whole thing with js...
What challenges did you encounter, and how did you overcome them?the validation, I googled this
What specific areas of your project would you like help with?actually, how good or bad was this challenge
@DalaScriptPosted 6 months agoHey!🖐 Good Job!
Your Design looks actually good, but here is some tips to improve this Project :
1. background-color doesn't match, so I would change it.
2. padding size for
<div class="newsletter_form" id="newsletter-form">that element.3. spacing between elements inside your div
<div class="newsletter_content flex">element.4. after clicking on that button
<button type="submit" class="btn_close">Dismiss message</button>, Instead of disappearing the entire container, you could have the newsletter form back again.Good Luck!🎉
Marked as helpful1 - @nksheySubmitted 6 months ago
- @GSida015Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
It was really easy for me,its not first time I do this.
What challenges did you encounter, and how did you overcome them?It was really easy idk.
@DalaScriptPosted 6 months agoHey, Good job!
კარგი ნამუშევარია მომეწონა, ასევე ძალიან მომეწონა Github-ზე გაფორმება. გაუმჯობესებისთვის მოგცემ რამდენიმე რჩევას :
1. HTML ფაილში, head თეგში style-ის ელემენტი აღარ გჭირდება, ის თვისებები რა არის style-ის თეგში არის attribution კონტეინერისთვის, რომელიც თემლეითს მოყვება იდეაში, მაგრამ ეს წაშლილი გაქვს და შესაბამისად style თეგი აღარ არის საჭირო.
2. Font-ის დალინკვა დაგავიწყდა, 'outfit'-ის ფონტია და შეგიძლია ამ ლინკზე ნახო.
3. გამოიყენე ისეთი ელემნტები, რომელიც არის სემანტიკურად გამართლებული, როგორიც არის main თეგი მაგალითად, div კონტეინერი რომელსაც აქვს wrapper-ის კლასი, მის მაგივრად შეგიძლია გამოიყენო main თეგი, და div კონტეინერი რომელსაც აქვს qr-code-container კლასი, მის მაგივრად შეგიძლია გამოიყენო article თეგი.
4. ასევე მეტი ყურადღება მიაქციე დეტალებს, qr-code-ის ფოტოს border-radius-ზე მეტი გაქვს მითითებული ვიდრე უნდა იყოს.
5. text-cont კლასის p ელემენტს არ აქვს text-shadow თვისება.
6. qr-card-ს წაუშალე height-ის თვისება, რომ ზომი დაემთხვეს.
7. თუ არ გაქვს პრემიუმი ნაყიდი Fronendmentor-ზე, მაშინ გირჩევ რომ, როცა ცვლილებებს შეიტან შენ პროექტში, ახალად ატვირთო, და არ გაუკეთო სქრინშოთის ახალი გენერირება, იმიტომ რომ შეზღუდული ხარ ახალი სქრინშოთების გენერირებაში.
წარმატებები!
Marked as helpful0 - @MelvinAguilarSubmitted 11 months ago
Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀
🎁 Features:
- Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
- Progressive Web App (PWA) support. 📱🌐
- Utilized TailwindCSS for responsive styling. 🎨
- Codebase is well-maintained and formatted using Prettier. 💻
- Resemblance with the original design. 🎨
- No media queries were used. 📱
- Integrated very small animation. ✨
💻 Two Solutions in Two Branches:
- Native HTML Solution: Utilizing
<details>and<summary>tags without the need for JavaScript. 🚀 - Accessible Disclosure Solution: Implementing Accessible Disclosure with a11y in mind for enhanced accessibility. 🌐
🛠️ Built With:
- TailwindCSS. 🎨
- npm - prettier - prettier-plugin-tailwindcss. 💻
-
📚 Further Resources:
If you're interested in creating an Accessible Disclosure, I recommend checking out this informative article by Grace Snow: Tutorial: Let's Build an Accessible Disclosure
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
@DalaScriptPosted 7 months agoHey, Welll done!!
May I ask you, How do you write Solution retrospective, without this 3 questions and with your own title?
Thanks in Advance.
0 - @RVidal34Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
A truly excellent exercise that pushes us to our limits and forces us to find innovative solutions to succeed.
I loved !!!!!!!
What challenges did you encounter, and how did you overcome them?I had a lot of difficulty finding a way to modify the background of the header to match the template.
What specific areas of your project would you like help with?R.A.S
@DalaScriptPosted 7 months agoHey, Well Done,
As I read you had a problem with the header background. -In this project we had a total of 3 image-heroes, one image-hero for mobile and tablet sizes and the other two for desktop screens. I personally did it like this: -HTML : <picture> <source media="(min-width: 768px)" srcset="/image-hero.png" width="820" height="303"> <img class="bg-hero-img" src="" width="414" height="153" alt="image hero"> </picture> <img class="bg-hero left" src="/image-hero-left.png" alt="image hero left"> <img class="bg-hero right" src="/image-hero-right.png" alt="image hero right">
-CSS : .bg-hero { display: none; } @media only screen and (min-width: 1440px) { .bg-hero-img { display: none; } .bg-hero { display: block; position: absolute; } }
-Let's try this. Don't forget to give .bg-hero.left and .bg-hero.right top and left properties.
• Your HTML is semantically justified, but you can refactor the code, for example, add a main element for sections and insert it. • Sizes of images and texts, spaces between containers and texts, button hovers. After fixing all this, your website will be perfect. • Layout looks good, good responsiveness.
Good Luck
Marked as helpful0
