Tarcilla Rodriguesโข 10
@TarcillaRodrigues
Submitted
P
DalaScript
@DalaScript
All comments
- PDalaScriptโข 380
@DalaScript
Posted
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
0 - radhaBharadwajโข 80
@radhaBharadwaj
Submitted
What are you most proud of, and what would you do differently next time?
Feedbacks are welcome
PDalaScriptโข 380@DalaScript
Posted
Heey ๐
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 helpful
0 - In order for your website to be semantically justified, it is necessary to use semantic elements. Every web page needs a
- Junier Bolรญvar ๐ทโข 710
@Junbol
Submitted
What are you most proud of, and what would you do differently next time?
Working with SCSS animations, BEM & MediaQueries specially
- working with CSS GRID Areas combined with Dynamic Grid columns and rows.
- creating all the logic in Javascript to do the math.
- Using forEach again to iterate on the buttons
- Using javascript to add the logic to reset input fields , classes and button's active state.
What challenges did you encounter, and how did you overcome them?
same as above
What specific areas of your project would you like help with?
none
PDalaScriptโข 380@DalaScript
Posted
Hey there! ๐
As I understand your idea, make this project with your own design. You don't need help, so I have nothing to say.
good luck! DalaScript
0 - PJim Barnettโข 260
@jamesbarnett
Submitted
What 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?PDalaScriptโข 380@DalaScript
Posted
Hey, 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 helpful
1 - PNate Vallineโข 350
@nvalline
Submitted
What 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.
PDalaScriptโข 380@DalaScript
Posted
Hey๐, 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 helpful
0 - your image in
- PJim Barnettโข 260
@jamesbarnett
Submitted
What 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?
PDalaScriptโข 380@DalaScript
Posted
Hey๐, 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 helpful
1 What 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
PDalaScriptโข 380@DalaScript
Posted
Hey!๐ 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 helpful
1- Nika Peikrishviliโข 340
@nkshey
Submitted
PDalaScriptโข 380@DalaScript
Posted
Hey, Good Job!
แซแแแแแ แแแ แแ แแแแฃแจแแแแ แแ, แแแแ แ แแ แแคแแ แแ แกแแแฅแแแแ, แแแแแแแแฃแ แ แแแแฃแแแฃแ แ แฎแแ แแแแแแแ, แแแแ แแ แกแแแ แแ แฏแแแจแ แแแ แแ แแแแฃแจแแแแ แแ.
แแแแ แ แแแแแแช แแแแแแ แแงแ:
1. แแแแแแ แแแ แกแแแกแแแแก, แ แแแแกแแช FAQ-แแก แแแแฎแแแแ แแฅแแแฅแแ, แฐแแแแ แแก แแคแแฅแขแ แแแแ แแแแ แแ แฃแแ แแแแ แแแ แแแกแคแแ แ แคแแ แ แ แฉแแแ แขแแฅแกแขแแ.
แฌแแ แแแขแแแแแ!
0 - SIDAโข 190
@GSida015
Submitted
What 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.
PDalaScriptโข 380@DalaScript
Posted
Hey, 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 helpful
0 What are you most proud of, and what would you do differently next time?
Learn a lot of javascript here
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
Is there a proper way for the share popup thing.
PDalaScriptโข 380@DalaScript
Posted
Hey, Good Job!
Here are some tips on how you can improve this project:
1. you actually don't need this text below your article : For desktop only works for 1920px monitor size and it works for any phone..
2. To make the article size exactly the same as in the design, you just need to give it the correct padding value.
3. For the mobile version, the share div container should appear and overlap the account div container. This was probably the most difficult part of this project. For example, you can look at my project.
If you think my comment helped you, don't forget to mark it as helpful.
good luck!
0- Melvin Aguilar ๐ง๐ปโ๐ปโข 61,220
@MelvinAguilar
Submitted
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. ๐โ๏ธ
PDalaScriptโข 380@DalaScript
Posted
Hey, 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 What 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
PDalaScriptโข 380@DalaScript
Posted
Hey, 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 helpful
0
