html css popup #362

DmytroMukhin · 2022-08-30T14:36:13Z

HTML CSS popup

Demo
Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

github-actions · 2022-08-31T15:31:25Z

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Please, make sure you haven't made common mistakes.

Universal recommendations:

Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

kasionio

Good job.
Take a look at the comments and make corresponding changes.

And fix the issues shown in the screenshots:

Fonts on mobile screens don't fit each other and the right padding of the container is too big on the right. The dots menu icon looks too big.
Weird situation on 800px screen

kasionio · 2022-09-08T19:43:34Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.css

+}
+
+.visualy_hidden:not(:focus):not(:active),
+input[type="checkbox"].visualy_hidden,


why not use just class visualy_hidden?

thank you, I fixet.

kasionio · 2022-09-08T19:51:55Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.css

+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;


this can be moved to a style, also margin and padding. also you can you resetting CSS styles, it's a good practice
https://www.webfx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/

ok, I was use that.

kasionio · 2022-09-08T19:55:08Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.css

+
+.navigation__link:hover,
+.navigation__link:focus {
+  outline: 0.01rem solid #54bab9;


0.01 rem. and how much is it in pixels?

it's 0,16px))

kasionio · 2022-09-08T19:59:17Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.html

+</head>
+<body>
+    <header class="header">
+        <div class="container">


looks like redundant container. why not move these styles to nav? There is no such class in styles as navigation

thank you, I fixet

kasionio · 2022-09-08T20:02:01Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.html

+                  <ul class="popup__list">
+                    <li class="popup__item">
+                      <a class="popup__link" href="#">
+                        <figure class="popup__figure">


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
This is not the correct use of this tag. It is not needed here

thank you, I fixet

kasionio · 2022-09-08T20:02:59Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.html

+                            class="popup__img"
+                            src="icons/calendar.png"
+                            alt=""
+                            width="40"


why do you need inline style here?

I tested with the size and forgot to remove.

kasionio · 2022-09-08T20:03:57Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.html

+                            </figure>
+                          </a>
+                        </li>
+                        <li class="popup__item popup__item--hiden">


why do you need class popup__item--hiden?

sory, I forgot to remove.

kasionio · 2022-09-08T20:05:15Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.css

+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #666666;


sory, i removed it.

kasionio · 2022-09-08T20:05:57Z

submissions/DmytroMukhin/HTML_CSS_Hooli-style_Popup/index.css

+  background-color: #e1eaea;
+}
+
+::-webkit-scrollbar-track-piece {


https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
pay attention that it can't be used in production

thank you, I fixet

stale · 2022-09-28T16:06:36Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

OleksiyRudenko · 2022-09-28T18:57:32Z

Up

stale · 2022-10-12T19:12:30Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

OleksiyRudenko · 2022-10-13T21:30:34Z

Up. I recommend you to ping the reviewer to see if they have time to review your fixes.

stale · 2023-04-11T22:12:25Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

add html css popup

f734ae6

DmytroMukhin changed the title ~~add html css popup~~ html css popup Aug 30, 2022

DmytroMukhin added 2 commits August 30, 2022 18:56

change index.css

feb6f0e

change index.css

178bc75

A-Ostrovnyy added the task-PopUp label Aug 31, 2022

kasionio self-assigned this Sep 8, 2022

kasionio self-requested a review September 8, 2022 19:41

kasionio requested changes Sep 8, 2022

View reviewed changes

DmytroMukhin added 2 commits September 14, 2022 12:25

fix bags

66423ef

fix bags 2

ff4d8fe

stale bot added the 💤 Stale label Sep 28, 2022

stale bot removed the 💤 Stale label Sep 28, 2022

stale bot added the 💤 Stale label Oct 12, 2022

stale bot removed the 💤 Stale label Oct 13, 2022

stale bot added the 💤 Stale label Apr 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

html css popup #362

html css popup #362

DmytroMukhin commented Aug 30, 2022 •

edited

Loading

github-actions bot commented Aug 31, 2022

kasionio left a comment •

edited

Loading

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

kasionio Sep 8, 2022

DmytroMukhin Sep 14, 2022

stale bot commented Sep 28, 2022

OleksiyRudenko commented Sep 28, 2022

stale bot commented Oct 12, 2022

OleksiyRudenko commented Oct 13, 2022 •

edited

Loading

stale bot commented Apr 11, 2023

html css popup #362

Are you sure you want to change the base?

html css popup #362

Conversation

DmytroMukhin commented Aug 30, 2022 • edited Loading

HTML CSS popup

github-actions bot commented Aug 31, 2022

kasionio left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stale bot commented Sep 28, 2022

OleksiyRudenko commented Sep 28, 2022

stale bot commented Oct 12, 2022

OleksiyRudenko commented Oct 13, 2022 • edited Loading

stale bot commented Apr 11, 2023

DmytroMukhin commented Aug 30, 2022 •

edited

Loading

kasionio left a comment •

edited

Loading

OleksiyRudenko commented Oct 13, 2022 •

edited

Loading