All comments

Sare•920
@saseozSubmitted 7 months ago
preview component
1
Cousnay•320
@Disney-BanjePosted 6 months ago
Great code!

I would only advise you that, if you want to place the content in the middle of the window using display: grid;; I would suggest to try and use place-content: center since it allows you to align content along both the block and inline directions at once.
Marked as helpful
1
Vipin•40
@vipinsharmaaSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
Finished with very less googling and quickly.
What challenges did you encounter, and how did you overcome them?
Not very. Googled when needed.
What specific areas of your project would you like help with?
Overall.
Social links profile using HTML and CSS
1
Cousnay•320
@Disney-BanjePosted 7 months ago
Congratulations on completing your challenge

I have some suggestions for your future projects:

Try use semantic in your code. For example instead of <div> you could use <article>.

Because this is a social link profile the keyword is link, which means that instead of using the HTML element <button>, you would need to go for <a href=''>....your code...</a>.

Finally, instead of using a div element<div class= 'socials'> as your links wrapper, it is much better to use and unordered list element <ul class='socials'> for accessibility purposes.

Here is an example:

<ul class= 'socials'> <li> <a href="#">GitHub</a> </li> - -- - Add your next elements below --- - </ul> **Congratulations again for making your code work...**
Marked as helpful
1
Cousnay•320
@Disney-BanjeSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I think I did my best to write good semantic for the HTML and tried to write clean CSS.
What challenges did you encounter, and how did you overcome them?
This project was easy for me.
What specific areas of your project would you like help with?
However, I would love your review. If there is any thing that I could improve on.
HTML semantic blog preview card
3
Cousnay•320
@Disney-BanjePosted 7 months ago
Thanks for the suggestion
1
Kaarel•60
@KarlaXBTSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud that I got it done in roughly 3 hours. It looks like my workflow is improving, perhaps my code aswell.
What challenges did you encounter, and how did you overcome them?
This time I was able to use the figma file to get the better precision. Figma looks like a good tool to learn more deeply.
What specific areas of your project would you like help with?
I think I need to look into mobile first development and get more acquainted with using media queries.
Blog preview card using HTML and CSS
1
Cousnay•320
@Disney-BanjePosted 7 months ago
Great code

Congratulations on achieving your goal of doing your code in under 3 hours.

I would advise you to improve on your semantic next time maybe trying to wrap the card <div class='card'></div> inside an article tag element <article class='card'></article>.

It would be better to wrap the <p class="content__tag">Learning</p> and <p class="content__date">Published 21 Dec 2023</p> inside a <figcaption> since they describe the image inside the <figure> element.

And wrap all your HTML code inside the main element since it wraps the content of the body of a document. REFERENCE
Marked as helpful
1
Noel Dasco Jr.•40
@Kiru100Submitted 7 months ago
Includes only html and css
1
Cousnay•320
@Disney-BanjePosted 7 months ago
Good code!

I would advise you only if you want to recreate the design to perfection to play with the sizing of the font and the container to achieve the look you are looking for, because the <br/> element is less reliable.

Try using relative units they will be handy in your next projects.
Marked as helpful
1

@vanzasetiaSubmitted almost 3 years ago

Hello Everyone! 👋

My second JavaScript challenge is completed. 🎉

The tooltip or the "share element" is a tricky one. It took me almost one day to figure out how to create and position it correctly. 😅

Now for the questions:

If you try using screen reader on my website, can you understand the page content?
Can you navigate through this website comfortably using your keyboard (Tab and Enter)?
In my opinion, the drawers image is a decorative image, since it doesn't contain any information at all. But, it is a banner or the cover image of that article that commonly has alternative text. So, what do you think about it?
I notice there are is-open, is-active, what kind of class naming convention is that? I want to google about it, but I don't know what keyword should I use.

Any questions on the technique that I'm using are very welcome! 🙌

Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link to the community feedback! I will be glad to help you too!

Thanks!

Article Preview Component | HTML CSS Sass JS

Cousnay•320

@Disney-BanjePosted about 1 year ago

Hey vanzia

I have a question. Why did you opt to add the element of the social links inside the div.card__share that contains together with the share buttons? Could please explain to me the process and the decision behind this choice?

I would love if I could get an explanation of the process step by step if possible.

Here is the section I am referring to:

 <div class="card__share">
              <button
                class="card__button js-cardShareToggleButton"
                type="button"
              >
                <span class="sr-only">Share</span>
                <!-- prettier-ignore -->
                <svg width="15" height="13" class="card__icon" aria-hidden="true"><path fill="#48556a" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
              </button>
              <div class="share js-shareOptionsElement" hidden>
                <p class="share__text">share</p>
                <ul class="share__list">
                  <li class="share__item">
                    <a
                      href="https://www.facebook.com"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-facebook.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Facebook (opens in new window)</span
                      ></a
                    >
                  </li>
                  <li class="share__item">
                    <a
                      href="https://www.twitter.com"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-twitter.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Twitter (opens in new window)</span
                      ></a
                    >
                  </li>
                  <li class="share__item">
                    <a
                      href="https://www.pinterest.com/"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-pinterest.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Pinterest (opens in new window)</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

Marked as helpful

Meryem Çetinkaya•330
@meryemctnkySubmitted about 1 year ago
Article preview component
1
Cousnay•320
@Disney-BanjePosted about 1 year ago
Hey, I hope you doing well.

Your code is really straight to the point and understandable.

However, I have a question. Could you explain to me the below section in Javascript how it is working?

I would love it if you could provide some explanation of your coding process.

#Code

if (window.innerWidth > 767) { if (tooltip.style.display == 'block') { tooltip.style.display = 'none'; } else { tooltip.style.display = 'block'; }
0
Anshika Bangar•20
@AnshikaBangarSubmitted almost 2 years ago
Product Preview Card using HTML and CSS
2
Cousnay•320
@Disney-BanjePosted almost 2 years ago
Hello, Anshika I hope you are doing well.

Good try for this project. However, I think that I have some tips that will help you in your next project.

First, if you are using vscode as your working space I would advise you to press the shortcut ctrl + ! and press enter Key this will save you time by generating automatically the Metadata.

Try to use comments so that someone who is reviewing your code can know what he is looking at. -To center a div use the following code

display: flex; flex-direction: column; align-items: center; justify-content: center;

Hope this will be helpful

Have a nice day
0
Cousnay•320
@Disney-BanjeSubmitted almost 2 years ago
I wish for some confirmation with the image whether my solution is correct.
responsive card
2
Cousnay•320
@Disney-BanjePosted almost 2 years ago
Hello Adriano, I am doing well thanks for asking. Hope you are doing well as well. Thanks for the help with the image. I have to say, that I struggled a lot with that part yet I have realized that it is the same as in photoshop where we use blend mode for such things. And also thanks for the extension that will probably save a lot of time.

Thanks again, for taking the time to review and give me advice on my code
0
Bory3693•50
@Bory3693Submitted almost 2 years ago
All feedback is welcome :)
Order summary component
1
Cousnay•320
@Disney-BanjePosted almost 2 years ago
hello Bory Hope you are doing well. Your work is awesome. The advice I would give you is to ensure that the beginning of a page's main content starts with an h1 element instead of an h2. This is best practice and also you will follow the heading hierarchy.

<h1>Order Summary</h1>``` Good work
Marked as helpful
0

Cousnay

All comments

preview component

Social links profile using HTML and CSS

HTML semantic blog preview card

Blog preview card using HTML and CSS

Includes only html and css

Article Preview Component | HTML CSS Sass JS

Article preview component

Product Preview Card using HTML and CSS

responsive card

Order summary component