Rebecca Padgett

@bccpadge

All comments

Yash Babani• 410
@Yashbabani0
Submitted 23 days ago
What specific areas of your project would you like help with?

I'm having trouble changing the color of the logo to white
Huddle landing page with alternating feature blocks
1
Rebecca Padgett• 1,640
@bccpadge
Posted 23 days ago
Hello @Yashbabani0. Congratulations on completing this challenge!!!🎉

It is best practice to use class names than the id attribute.

More info📚:

HTML - The id attribute

To answer your question, you can use the filter CSS property. The code below will only change the color of the text and not the message bubble.

.logo{ filter: invert(1); }

Another option is making a copy of the logo.svg file and rename the file and edit the fill colors to white.

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
1
kristinakasalova• 50
@kristinakasalova
Submitted 23 days ago
What are you most proud of, and what would you do differently next time?

In this project I tried to learn to work with Figma, so I'm glad I found my way around it, although still needs a bit of work.

What challenges did you encounter, and how did you overcome them?

I struggled most with position in the middle of the desktop page and generally with block positions and their alignment. Fonts have also proved to be a bit of a pain despite the fact this wasn't the first time I used them.

What specific areas of your project would you like help with?

Alignment, alignment, alignment. I feel that despite my efforts there is room left for improvement and I will be immensely happy if you share best practice with me.
QR code HTML | CSS
1
Rebecca Padgett• 1,640
@bccpadge
Posted 23 days ago
Hello @kristinakasalova. Congratulations on completing this challenge!!!🎉

I have a few tips you might be interested in to improve your solution.

HTML 📃:

Every website should have at least one landmark like a main tag

Example

The code below is show how to use HTML5 Semantic Elements

<body> <main> /*All content goes here*/ </main> <footer> /*attribution info goes here*/ </footer> </body>

CSS 🎨:

You can use Flexbox or CSS Grid to center the qr code component in the middle of the website

Flexbox

body{ display:flex; justify-content:center; align-items: center; min-height: 100vh; }

CSS Grid

body{ display:flex; place-content: center; min-height: 100vh; }

Here is my solution to this challenge - Qr code component

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
0
Sergiiicode• 30
@Sergiiicode
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I am learning javascript, how could I optimize and do it in the best way possible, is it a solution that I find but that other ways open to do them or how could improve in javascript?
faq accordion frontend mentor
2
Rebecca Padgett• 1,640
@bccpadge
Posted about 2 months ago
Hello @Sergiiicode. Congratulations on completing this challenge!!!🎉

I have a few tips to improve your solution.

HTML 📃:

Your index.html file needs to be improve upon by using semantic HTML tags

Its best practice to wrap all your content using one landmark like a main tag

You can change the background-image using the picture tag in your index.html file.

Here is a code snippet of the picture tag when I did this challenge:

<picture class="accordion__banner"> <source media="(max-width:37.5em )" srcset="./assets/images/background-pattern-mobile.svg" /> <source media="(min-width:62em )" srcset="./assets/images/background-pattern-desktop.svg" /> <img src="./assets/images/background-pattern-desktop.svg" width="1440" height="320" aria-hidden="true" alt="" /> </picture>

More info📚:

HTML Semantic Tags

HTML Picture Tag

Accessibility

Also you can implement this Accordion example that includes ARIA for screen readers.

Here is my solution to this challenge - FAQ Accordion

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
1
Oyesina Paul• 90
@oyesina-paul
Submitted 2 months ago
Product preview card component
#accessibility
1
Rebecca Padgett• 1,640
@bccpadge
Posted 2 months ago
Hello @oyesina-paul. Congratulations on completing this challenge!!!🎉

I have few suggestions you might be interested in to improve your solution.

HTML 📃:

On the body you can remove margin: 1rem; and add margin-inline: 1rem; for mobile devices.

Margin-inline is a CSS logical property which means margin will be on the left and right.

Also, you can add min-height:100vh on the body to place the component in the middle of the website and you can remove margin-top: 5rem; because it is unnecessary code.

More info📚:

CSS logical properties and values

Here is my solution to this challenge: Product preview component

I hope you find this useful and don't hesitate to reach out if you have any questions.
Marked as helpful
0
hitmorecode• 6,270
@hitmorecode
Submitted 3 months ago
I had problems with the image file. On small screen there was too much white space on the top and bottom of the image. Had to do a workaround it to fix it.
Blog Preview Card
1
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @hitmorecode. Congratulations on completing this challenge!!!🎉

I have a few tips to improve your solution.

When I did this project, placed the img in my index.html file and used the CSS default styles display: block; and max-width: 100%;

You can improve the publish date by using the time - The (Date) Time element

Example:

<p> Publish <time datetime="2023-12-21>21 Dec 2023</time> </p>

Here is my solution to this challenge - Blog preview card

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
0
Lucifer• 40
@Raghujeet
Submitted 3 months ago
QR-code-component-responsive
1
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @Raghujeet. Congratulations on completing this challenge!!!🎉

I have a few suggestions to improve your solution.

HTML 📃:

Every website should have at least one landmark like a <main> tag

Images should have more descriptive alt text - alt="qr code to frontendmentor.io"

When implementing heading tags on page be sure use them in chronological order.

You can switch the h2 to a h1

More info📚:

HTML Headings

Here is a code snippet of how I would update your index.html file

<body> <main> /* All content goes here */ </main> <footer> /* Attribution goes here*/ </footer> </body>

CSS 🎨:

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in preferred browser.

To center your component on the page, you can use Flexbox or CSS Grid

Flexbox

body{ display: flex; justify-content:center; align-items: center; min-height: 100vh; }

CSS Grid

body{ display: grid; place-content: center; min-height: 100vh; }

Be sure to look at the styleguide.md file to get the correct colors and typography

Add a max-width: on your card container and won't have to use media queries

Images have default CSS styles and also you can add border-radius: 1rem which is 16 pixels.

img{ max-width: 100%; display: block; }

Pixels to Rem converter

Here is my solution to this challenge - QR code component

I hope you find it useful and don't hesitate to reach out if you have any questions
Marked as helpful
0
MahmoudZah• 10
@MahmoudZah
Submitted 3 months ago
Qr code page by html css
1
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @MahmoudZah. Congratulations on completing this challenge!!!🎉

I'm only going to focus on your index.html file because it needs to be improved.

You need to read this article on HTML Semantic Elements on W3schools website. Your index.html file is non-semantic due wrapping everything in div.

Wrap your content using landmark like <main> tag.

Here is how I would improve your index.html file

<body> <main> <img/> <div> <h1>Improve your front-end skills by building projects</h1> <p>paragraph text goes here</p> </div> </main> </body>

Here is my solution to this challenge - QR code component

I hope you find this useful and don't hesitate to reach out if you have any questions
0
Jhonne• 90
@Jonee2
Submitted 3 months ago
What are you most proud of, and what would you do differently next time?

Most of the design look clean of first try

What challenges did you encounter, and how did you overcome them?

Not many challenges, had to rewrite some of the code because of bad practices but the design was easy.

What specific areas of your project would you like help with?

Any feedback on good practices would be good.
Blog preview card
3
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @Jonee2. Congratulations on completing this challenge!!!🎉

You can wrap the the img and name in a div and then use flexbox to align them. Be sure to change the h3 to a h2 because heading tags must be used in chronological order. You can use gap property to add space between the elements as well.

div{ display: flex; align-items: center; }

I hope you find this useful and don't hesitate to reach out if you have any questions.
2
CarlosFujimoto• 20
@CarlosFujimoto
Submitted 3 months ago
How could I have used less div?
Social Links Profile Resolution
2
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @CarlosFujimoto. Congratulations on completing this challenge!!!🎉

To answer your question, you should use less divs because your website isn't accessible for screen readers. Div is a non-semantic HTML tag.

You should read this Frontend Mentor article on 10 fundamental web accessibility tips for front-end developers

Every website should have at least one landmark like a main tag

Images must have descriptive alt text because screen readers will say the file image source path. Example:

<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall" />

For the social media content should be wrapped in ul because it is a list.

Attribution should be wrapped in a footer because holds copyright and legal information.

More info📚:

HTML Semantic Elements

CSS 🎨:

Add CSS Reset to remove default styles

A (more) Modern CSS Reset by Andy Bell

Josh Comeau CSS Reset

Font size shouldn't be pixels because pixels don't scale when users want to change their font size in preferred browser.

Switch height: 100vh; to min-height: 100vh` on the body because it causes problems on mobile devices.

Here is my solution to this challenge - Social links profile

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
0

@CaioQuerino

Submitted 3 months ago

Nesse desafio tive que usar algumas tags para marcar o e estilizar no css, cada ponto era muito espacífico, porem fiquei com duvida se deveria fazer da forma que fiz

Não consegui deixar alguns pontos do código como era para ficar, gostaria de uma ajuda para corrigir essas imperfeiçoes

<div class="instrucoes">
                <h3 class="sub-titulo">Instructions</h3>
                <ul>
                    <ol>
                        <li>
                            <strong class="text-color">Beat the eggs:</strong> In a bowl, beat the eggs with a pinch of
                            salt and pepper until they are well mixed.
                            You can add a tablespoon of water or milk for a fluffier texture.
                        </li>
                        <li><strong class="text-color">Heat the pan:</strong> Place a non-stick frying pan over medium
                            heat and add butter or oil.</li>
                        <li>
                            <strong class="text-color">Cook the omelette:</strong> Once the butter is melted and
                            bubbling, pour in the eggs. Tilt the pan to ensure
                            the eggs evenly coat the surface.
                        </li>
                        <li>
                            <strong class="text-color">Add fillings (optional):</strong> When the eggs begin to set at
                            the edges but are still slightly runny in the
                            middle, sprinkle your chosen fillings over one half of the omelette.
                        </li>
                        <li>
                            <strong class="text-color">Fold and serve:</strong> As the omelette continues to cook,
                            carefully lift one edge and fold it over the
                            fillings. Let it cook for another minute, then slide it onto a plate.
                        </li>
                        <li><strong class="text-color">Enjoy:</strong> Serve hot, with additional salt and pepper if
                            needed.</li>
                    </ol>
                </ul>
            </div>

Responsive recipe page

#accessibility#web-components

Rebecca Padgett• 1,640

@bccpadge

Posted 3 months ago

Hello @CaioQuerin. Congratulations on completing this challenge!!!🎉

I have a few suggestions you might be interested in to improve your solution.

For the instructions section you should only wrap the content using ol rather than ul

ol is a numbered list
ul is an unordered list like a navigation links on wrapped in nav
Instead of wrapping your content using <div> replace them using <section> or <article> tag - HTML Semantic Elements
Be sure to using Heading tags in chronological order
- All the <h3> should be <h2>

You can use the HTML Tables for the Nutrition section .

Example:

<table>
<tr>
   <td>Calories</td>
   <td>277kcal</td>
</tr>
</table>

Here is my solution to this challenge - Recipe page

I hope you find this useful and don't hesitate to reach out if you have any questions

Marked as helpful

P
Juan Ceballos• 150
@jceballos29
Submitted 4 months ago
FAQ Accordion
#react#vite
1
Rebecca Padgett• 1,640
@bccpadge
Posted 3 months ago
Hello @jceballos29. Congratulations on completing this challenge!!!🎉

I have a few suggestions you might be interested in to improve your solution.

HTML 📃:

Take look at this article to make your website more semantic - HTML Semantic Elements

Using a <div> on a website has no semantic meaning

For this project, a HTML button tag would be better and users can use TAB on the keyboard to navigate to each question.

Accordion Example from ARIA Authoring Practices Guide (APG)

CSS 🎨:

Font size shouldn't be in pixels because pixels don't scale when users want change their font size in preferred browser.

Here is an Frontend Mentor article on Responsive Design and W3schools on CSS Media Queries

Here is my solution to this challenge - FAQ accordion

I hope you find this useful and don't hesitate to reach out if you have any questions
0
Ali-AK004• 190
@Ali-AK004
Submitted 4 months ago
Simple social-links-profile Using :

CSS Flexbox

HTML 5 Semantics

social-links-profile
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @Ali-AK004. Congratulations on completing this challenge!!!🎉

I have a few tips to improve your solution below.

HTML 📃:

Image should have alt text <img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall" /> for screen readers

CSS 🎨:

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in preferred browser.

I see you used pixels and rem units in your stylesheet and would be to stick to rem units.

Here is a pixels to rem converter

You can also implement the DRY principle which means Don't Repeat Yourself on img, span, and a have the same style; you can do this

img, span, a{ display: block; }

Here is my solution to this challenge - Social links profile

I hope you find this useful and don't hesitate to reach out if you have any questions
2
Oyesina Paul• 90
@oyesina-paul
Submitted 4 months ago
How do i make my project responsive? Responsive Design Is the most difficult for me.
QR code component
3
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @oyesina-paul. Welcome to Frontend Mentor Community!!!🎉

Here are few tips you might be interested in to improve your solution.

HTML 📃:

Wrap all your content using a main tag

Attribution should be wrapped in a footer tag

The image should have alt text: <img src="images/image-qr-code.png" alt="qr code to frontendmentor.io"> for screen readers

HEADING TAGS

<h1> is the most important tag on a website and <h6> is least important on the page

The title on this page is <h1>Improve your front-end skills by building projects</h1>

CSS 🎨:

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.

Best practice to remove default styles using the CSS Reset below

A (more) Modern CSS Reset

CSS Reset

To center your component in the middle of the page you can use Flexbox or CSS Grid

Flexbox

body{ display:flex; justify-center; align-items: center; min-height:100vh; }

CSS Grid

body{ display: grid; place-content: center; min-height:100vh; }

You can add the font-family on the body and everything within the body will inherit the font-family

On your .container add max-widthso your component will be responsive without media queries For the image, you can put max-width:100%; and display:block; for default styling

Use these styles and your attribution better position on your website

.attribution { font-size: 0.688rem; text-align: center; /* position: relative;*/ /* top: 10px;*/ position: fixed; inset: auto auto 1em 1em;

Inset property is a shorthand for top, right, bottom, left

Here is my solution to this challenge - Qr code component

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
0
Yahir_AM• 370
@Yahir-am
Submitted 4 months ago
Hi everyone, I hope you like this solution I think is not the most accurate so if you have any suggestions that could help me to improve my code you can comment about it, thank you! 🤠
Social links profile main using HMTL & CSS
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @Yahir-am. Congratulations on completing this challenge!🎉

Here are few tips you want to implement to improve your solution.

HTML:🗒️

Every website should have a h1 and you wrap Jessica Randall in a h1

CSS:🎨

When you add hover styles in CSS it is good practice to implement a smooth CSS transitions

Example:

.links ul li{ transition: 300ms ease-in-out: } .links ul li:hover{ background-color: var(--Green); }

Your solution looks great and keep up the great work!!!

Here is my solution to this challenge - Social links profile

I hope you find this useful and don’t hesitate to reach out if you have any questions
1
Kim• 440
@01057057kim
Submitted 4 months ago
I'm not very good with tailwind css, i am still learning. Thank you. I welcome suggestions in the comments.
Social links profile
#tailwind-css
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @01057057kim. Congratulations on completing this challenge!!!🎉

When you upload your repository to Github you can add nodule_modules in the .gitignore file and the folder won't be shown.

Here are few tips you might be interested in to improve your solution.

HTML 📃:

Images must have descriptive alt text for screen readers

Example: <img src="./assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">

Be sure to understand the purpose of a HTML tags when you code your projects.

button and links are two different things

More info📚:

button vs links

Example:

<ul> <li> <a href="www.github.com">Github </a> </li> </ul>

When adding a font-family be sure to add a fallback just encase the other font is unavailable.

font-family: "Inter", sans-serif;

The classes like max-h-1400 and min-w-375 are unnecessary on the body and on your <main> tag you can add max-w-[400px] to your component and height property is not needed.

Use the mx-auto which is margin-left and margin-right

More info📚:

Tailwind CSS Cheatsheet

Here is my solution to this challenge - Social links profile

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
2
aneeshthakur67• 90
@aneeshthakur67
Submitted 4 months ago
flexbox, position and @media queries
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @aneeshthakur67. Congratulations on completing this challenge!!!🎉

Here are a few suggestions you might want to implement to improve your solution.

HTML 📃:

Images must have alt text for screen readers

Example: <img class="profile-pic" src="./assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">

Every website needs to have a h1 and you can do one of two things.

Wrap the text Jessica Randall in a h1

Wrap the title of the website in a h1 like this <h1>Frontend Mentor | Social links profile</h1> for screen readers and keep the text Jessica Randall in a h2

When using Heading Tags be sure to use them in chronological order.

I use this .visually-hidden CSS class

.visually-hidden:not(:focus):not(:active):not(:focus-within) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

The code below needs to improve upon

<div class="social-buttons"> <button class="buttons">GitHub</button> <button class="buttons">Frontend Mentor</button> <button class="buttons">LinkedIn</button> <button class="buttons">Twitter</button> <button class="buttons">Instagram</button> </div>

Be sure to understand the purpose of a HTML tags when you code your projects.

button and links are two different things

More info📚:

button vs links

Example:

<ul> <li> <a href="www.github.com">Github </a> </li> </ul>

CSS 🎨:

To center your component in the middle of the page use Flexbox or CSS Grid on the body

Flexbox

body{ display:flex; justify-center: center; align-items: center; min-height: 100vh; }

CSS Grid

body{ display: grid; place-content:center; min-height:100vh; }

You can remove the styles that are commented out because it unnecessary to add styles when you don't need them

.container { /* position: relative; */ /* top: 10rem; */ /* margin: 0 auto; */ /* width: 25%; */ /* display: flex; */ /* flex-direction: column; */ /*align-items: center;*/ /*justify-content: center; */ background: hsl(0, 0%, 12%); border-radius: 10px; }

When you use max-width on your .container you don't need to use media queries Add this code below and use rem units improve accessibility

Pixels to rem converter

You can play around with the padding value

.container{ max-width: 25rem; padding: 2rem; } img{ max-width: 100% display: block; } h2, p{ text-align: center; }

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
1
aneeshthakur67• 90
@aneeshthakur67
Submitted 4 months ago
max width and other thing
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @aneeshthakur67. Congratulations on completing this challenge!!!🎉

I have a few tips you might be interested in to improve your solution.

HTML 📃:

Wrap your content using a main tag and your attribution in a footer tag

Example: Do this <main class="container"></main> instead of a <div class="container">

CSS 🎨:

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.

Add these styles below in a media query

container { margin: 90px auto; width: 650px; background-color: white; padding: 30px 25px 30px 30px; border-radius: 24px; } @media (min-width: 1024px) { container { margin: 90px auto; width: 650px; background-color: white; padding: 30px 25px 30px 30px; border-radius: 24px; }

You can remove the background-color:white on the .container and wrap all the other content using section or article tag and then add the the background-color: white.

Here is my solution to this challenge - Recipe Page

I hope you find this useful and don't hesitate to reach out if you have any questions
0
Rylulu• 80
@Rylulu
Submitted 4 months ago
Recipe Page Solution
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @Rylulu. Congratulations on completing this challenge!!!🎉

I few tips you might be interested in to improve your solution.

Add font-family: "Outfit", sans-serif; on <main> tag and it will look like the design in the starter files.

Your h1 and h2 use the same font-family and you can implement DRY principle - Don't Repeat Yourself Example:

h1, h2{ font-family: "Young Serif", serif; } h1{ font-size: 2.5rem; color: var(--boldcolor); } h2{ color: var(--headcolor); font-size: 2rem; }

CSS 🎨:

You can also add margin:0; and padding:0 along with the

* { box-sizing: border-box; }

Here is my solution to this challenge Recipe page

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
0
mhmoddimo• 160
@mhmoddimo
Submitted 4 months ago
Give me you're advice ❤️
Blog preview card
2
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @mhmoddimo. Congratulations on completing this challenge!!!🎉

I have a few tips you might be interested in to improve your solution.

HTML 📃:

You can wrap the date using the time(Date) Time element to make your HTML more semantic

<h4>Published <time datetime="2023-12-21"> 21 Dec 2023 </time> </h4>

For the avatar image you need to add alt text for screen readers and improves accessibility

<img src="assets/images/image-avatar.webp" alt="headshot of Greg Hooper">

CSS 🎨:

Add min-height: 100vh; on the <body> instead of height:100vh; because it takes fixed height rather a minimum viewport height.

More info📚:

Set width and height on page

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.

To improve accessibility use rem units

More info📚:

Pixels to rem calculator converter

Best practice to use CSS shorthand property when applying margin and padding etc

More info📚:

CSS shorthand properties

Here is my solution to this challenge Blog preview card

I hope you find this useful and don't hesitate to reach out if you have any questions
1
Mohamed Beshri Amer• 10
@mohamed351
Submitted 4 months ago
Blog Preview card
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @mohamed35. Congratulations on completing this challenge!!!🎉

I have few tips you might be interested in to improve your solution.

HTML 📃:

Every website should have a <h1> and you can hide the <h1> for screen readers

Example: <h1>Frontend Mentor | Blog preview card</h1>

Add this .visually-hidden CSS class to the <h1>

/* sometimes referred to as .sr-only */ .visually-hidden:not(:focus):not(:active):not(:focus-within) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

It is unnecessary to wrap the <span>Learning</span> in a <div>

You can wrap the the avatar info in <div> because <footer> tag is best used for copyright and legal information.

To make the code semantic wrap the the date using the (Date)Time Element

<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>

CSS 🎨:

Best practice to write CSS in an external stylesheet. Make a file named style.css and you can add link in the <head></head> like this <link rel="stylesheet" href="style.css">

Add a CSS Reset as well to remove all default styles in the browser and here are two CSS Resets that you can choose from

Andy Bell Modern CSS Reset

Josh Comeau CSS Reset

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.

.card-containers{ display: flex; justify-content: center; align-items: center; /* height: 100vh;*/ }

When you apply height:100vh; your component doesn't fit well on mobile devices and add `min-height:100vh;' it takes the minimum viewport height.

More info📚:

min-height

Here is my solution to this challenge Blog preview card

I hope you find this useful and don't hesitate to reach out to me if you have any questions
1
Fadhil Suheri• 100
@ifumikuah
Submitted 4 months ago
playing with scss and handlebars templating

i think my SCSS is still messed up, suggestions about that are very welcome 🙏

others suggestions are welcome too!
result summary component with SCSS and Handlebars.js
#sass/scss#handlebars
2
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @ifumikuah. Congratulations on completing this challenge!!!🎉

To center your component in the middle of the page you can use Flexbox or CSS Grid on the <body>

Flexbox

body{ display:flex; justify-content:center; align-items: center; min-height:100vh; }

CSS Grid

body{ display:grid; place-content: center; min-height:100vh; }

Here is my solution to this challenge Result summary component

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
2
Jean Walter Louis• 120
@Jwalt95
Submitted 4 months ago
What this challenge easiest than the others you did? Can you comment on my code to help improve?
Order Summary Component
3
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @Jwalt95. Congratulations on completing this challenge!!!🎉

I have a few tips you might be interested in to improve your solution.

HTML 📃:

Every website should have <h1> and the title of this component you can use <h1> or <h2>

You can use <h1>Frontend Mentor | Order Summary card component<h1> to explain the project for screen readers by adding visually-hidden CSS class

/* sometimes referred to as .sr-only */ .visually-hidden:not(:focus):not(:active):not(:focus-within) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

The text Order Summary can be wrapped in <h2>

More info📚:

Heading Tags

Images that are decorative can have alt text blank and aria-hidden:true; do it can be ignored by screen readers

CSS 🎨:

Add background-repeat: no-repeat; on the body and the image won't repeat

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser setting.

Try implementing the shorthand property for padding, margin and other CSS properties.

More info📚:

CSS Shorthand property

Here is my solution to this challenge Order Summary card component

I hope you find this useful and don't hesitate to reach out if you have any questions
0
Yogesh-Mourya• 70
@Yogesh-Mourya
Submitted 4 months ago
Hello! I'm Yogesh Mourya and this is my solution for this challenge! 😊

It's a very good project to polish HTML and CSS skills.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊
"3-Column preview card" Using HTML and CSS.
2
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @Yogesh-Mourya. Congratulations on completing this challenge!!!🎉

I have few suggestions you might be interested in to improve your project.

HTML 📃:

Wrap all content using the <main> tag

Attribution info can contained in <footer> tag

Every website shouldn't have more than <h1> tag

To fix this issue you can add this code below

<h1>Frontend Mentor | 3 Column preview card component</h1>

Add the class .visually-hidden on the <h1> for screen readers

.visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

More info📚:

Visually hidden

All card titles should be <h2>

In this project, icons are decorative and you can leave the alt text blank and add aria-hidden:true; so it can be ignored by screen readers

When code future projects, be sure to understand the HTML Semantic Tags and the purpose of them. The text Learn More should be wrapped in <a> tag instead of the <button> because you are not triggering an action, like navigation or form.

More info📚:

links vs buttons

CSS 🎨:

Best practice to add a CSS Reset to remove all default styles in the browser and below are two options you can pick from

Andy Bell Modern CSS Reset

Josh Comeau CSS Reset

Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser setting.

The code below has unnecessary CSS styles

.wrapper{ display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: hsl(0, 0%, 95%); /*width: 100vw;*/ min-height: 100vh; /*overflow-x: hidden;*/ /*overflow-y: scroll;*/ }

Code that is commented out you can remove them

To save you few lines of CSS you should implement the DRY principle which means Don' Repeat Yourself. You have .cont-1, .cont-2, .cont-3 have the same CSS styles add class called .content on each card in your index.html file and add the those same styles.

Be sure to use rem units instead of pixels because it better for accessibility

Here is my solution to this challenge 3 Column card component

I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
1
Nasrul Khakim• 30
@illuminasrul
Submitted 4 months ago
This is a Blog Preview Card, created using HTML and CSS. This project requires some basic knowledge of HTML and CSS, also little bit of understanding design principle would be so helpful.

This is perfect for beginner in web development to get the hands dirty by solving real world problem.

The challenge is to build and get it look as close as possible. I can use any tools I like to help me complete the challenge.

Users should be able to :

See hover states for interactive elements

feel free to give me some feedback, that’d be really helpful for me
Blog Preview Card Using HTML & CSS
1
Rebecca Padgett• 1,640
@bccpadge
Posted 4 months ago
Hello @illuminasrul. Congratulations on completing this challenge!!!🎉

I have a few suggestions you might be interested in to improve your solution.

HTML 📃:

Wrap all your content using the <main> tag

Images that are decorative you can leave the alt text blank and add aria-hidden: true; so it can be ignored by screen readers

Add alt text to the avatar image: `alt="headshot of Greg Hooper">

For the published date you can wrap the date using the <time> tag Example

<p class="metadata"> Publish <time datetime="2023-12-21">21 Dec 2023</time> </p>

Your div.container has unnecessary CSS styles

.container{ max-width: 1440px; */ /* height: 100vh; */ /* margin: 0 auto; */ display: grid; place-content: center; min-height: 100vh; }

CSS 🎨:

Adding a CSS Reset is good practice to remove all default styles in the browser

You don't need to add font-size:16px; on the <body> because that is the default font size

When you add min-height:100vh; your component be placed in the center of the website.

Be sure to use rem on other CSS properties like margin and padding because it better for accessibility.

Here is my solution to this challenge Blog preview card

Hope you find it useful and don't hesitate to reach out to me if you have questions
1

Rebecca Padgett

All comments

Huddle landing page with alternating feature blocks

QR code HTML | CSS

faq accordion frontend mentor

Product preview card component

Blog Preview Card

QR-code-component-responsive

Qr code page by html css

Blog preview card

Social Links Profile Resolution

Responsive recipe page

FAQ Accordion

social-links-profile

QR code component

Social links profile main using HMTL & CSS

Social links profile

flexbox, position and @media queries

max width and other thing

Recipe Page Solution

Blog preview card

Blog Preview card

result summary component with SCSS and Handlebars.js

Order Summary Component

"3-Column preview card" Using HTML and CSS.

Blog Preview Card Using HTML & CSS