What I did in this task may be very simple or unprofessional, but I am proud of this result in my first attempt. And for the next step, I have decided to focus on how to make the website more responsive on different devices.
Everything is fantastic , you are following bem name convention, clean code and this is amazing approach 😻
I would appreciate the feedback :)
Hey, You did amazing work congratulations for completing this challenge
to fix accessibility issues and make code more readable :
use main and wrap inside it div.container so all page content should be contained by landmarks
Go down orderly when you are using the headings <h1> down to <h2> down to <h3> and so on . so remove div.donji as the browser can see the ordering of heading an instead it you can use this to use semantic tags and classes name to make code more readable
<main>
<header>
<h1> Join our community </h1>
<h2> 30-day, hassle-free money back guarantee </h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</p>
</header>
<div class="price">
<h3> Monthly Subscription </h3>
<p> $29 <span>per month</span></p>
<p> Full access for less than $1 a day</p>
<button class="register"> Sign Up </button>
</div>
<div class="whyus">
<h3> Why Us </h3>
<ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
</div>
</main>
<br> to separate sentence vertically in div.desno but these text are items of list so it is recommendable to use unordered list and style it instead using <p> and <br>
as this <ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
Regardless You did amazing I hope this is useful to you... Keep coding👍
Hey, You did amazing work congratulations for completing this challenge
to fix accessibility issues :
use main and wrap inside it section.container instead using section and wrap inside it div.container so all page content should be contained by landmarks
Go down orderly when you are using the headings <h1> down to <h2> down to <h3> and so on . so use <h1> instead <h2> in section div.item-1 and change font-size if you want .
to make your code more responsive
<br> to separate sentence vertically in div.item-3 but these text are items of list so it is recommendable to use unordered list and style it instead using <p> and <br>
as this <ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
div.item-1 , div.item-2 and div.item-3 use this :<main>
<header>
<h1> Join our community </h1>
<h2> 30-day, hassle-free money back guarantee </h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</p>
</header>
<div class="price">
<h3> Monthly Subscription </h3>
<p> $29 <span>per month</span></p>
<p> Full access for less than $1 a day</p>
<button class="register"> Sign Up </button>
</div>
<div class="whyus">
<h3> Why Us </h3>
<ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
</div>
</main>
you forget to use border-radius for section.container to get more awesome preview .
you can comment footer tag to get identical preview design .
you can use variables to give your style semantic names :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
All feedback are welcome.
Hey, You did amazing work congratulations for completing this challenge
to fix accessibility issues :
font-size if you want .To make your code more Responsive
top:100px in main.container use this to center your container in the page
and avoid scrollbody {margin :0;display:flex;flex-direction:column; min-height:100vh;}
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
<main class="container cards">
<header>
<h1> Join our community </h1>
<h2> 30-day, hassle-free money back guarantee </h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</p>
</header>
<div class="price">
<h3> Monthly Subscription </h3>
<p> $29 <span>per month</span></p>
<p> Full access for less than $1 a day</p>
<button class="register"> Sign Up </button>
</div>
<div class="whyus">
<h3> Why Us </h3>
<ul>
<li> Tutorials by industry experts </li>
<li> Peer & expert code review </li>
<li> Coding exercises </li>
<li> Access to our GitHub repos </li>
<li> Community forum </li>
<li> Flashcard decks </li>
<li> New videos every week </li>
</ul>
</div>
</main>
main.container to make it more responsive as thismain
{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(270px,auto);
grid-template-areas:
'header header'
'price whyus';
gap: 20px 0px;
margin: auto auto;
align-items: center;
justify-content: center;
border-radius: 15px;
background: var(--white);
}
header {
grid-area: header;
display: grid;
gap: 30px;
margin: auto auto;
}
main div.price,main div.whyus
{
min-height: 100%;
padding: 30px 30px 0px;
color: var(--white);
}
main div.price {
grid-area: price;
background: var(--Cyan);
border-radius: 0px 0px 0px 15px;
}
main div.whyus {
grid-area: whyus;
background: var(--light-cyan);
border-radius: 0px 0px 15px 0px;
}
@media (max-width: 775px)
{
main {
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
'header'
'whyus'
'price';
gap: 10px;
}
}
instead of delete footer tag use can comment it as well structured page should contain semantic tags as header,main,footer
finally you can use the BEM approach for your next projects. It's a popular CSS naming convention for writing cleaner and more readable CSS classes. ---> Why BEM? , The Block, Element, Modifier BEM
Regardless You did amazing I hope this is useful to you... Keep coding👍
My biggest problem was removing the side scroll bars.
Hey Gabriel Francisco You did amazing work congratulations for completing this challenge
to fix accessibility issues :
You should use <main class="container"> and wrap inside it <div class="grid"> and <header></header> so all page content should be contained by landmarks.
give class name cards instead div.grid as you can use more than different grid
Element h2,p not allowed as child of element menu in this context. and menu not allowed here you can replaced it with div.card as <menu> used for toolbars and for listing form controls and commands as right click menu.
To make your code more Responsive and to remove scroll
instead of using large padding or margin for header or div.grid-center use this to center your elements in the page.
body {margin :0;display:flex;flex-direction:column; min-height:100vh}
**/*it is a child of the body and we make flex-grow:1 to distribute space-equally in top and bottom*/**
main{display:flex;place-items:center;place-content:center;flex-grow:1;flex-direction:column}
don't give section or div specific height that will damage the responsivity in mobile and will make scroll if width of screen small or height of the div large than screen height view so remove height and use min-height instead .
avoid to give cards height and give it only padding but not large
don't use article, menu and aside all this tags in this challenge as all these are cards so you can use divs and give all div semantic name card as this ;
<section class="cards">
<div class="Supervisor card">
<h2> Supervisor </h2>
<p> Monitors activity to identify project roadblocks </p>
<img src="images/icon-supervisor.svg" alt="Supervisor">
</div>
<div class="Team-Builder card">
<h2> Team Builder </h2>
<p>Scans our talent network to create the optimal team for your project </p>
<img src="images/icon-team-builder.svg" alt="Team-Builder">
</div>
<div class="Karma card">
<h2> Karma </h2>
<p> Regularly evaluates our talent to ensure quality </p>
<img src="images/icon-karma.svg" alt="Karma">
</div>
<div class="Calculator card">
<h2> Calculator </h2>
<p>Uses data from past projects to provide better delivery estimates </p>
<img src="images/icon-calculator.svg" alt="Calculator">
</div>
</section>
You you can comment the footer tag to hide it and avoid scroll
you can use variables in css and save colors or fixed sizes in variables like this :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
Feedbacks will be appreciated.
Hey @Ola , Congratulations for completing this challenge
My suggestions
instead of this:
<div class="stats-card">
<div class="stats-content">
<p>80K</p>
<span>Followers</span>
</div>
<div class="stats-content">
<p>803K</p>
<span>Likes</span>
</div>
<div class="stats-content">
<p>1.4K</p>
<span>Photos</span>
</div>
</div>
use this
<ul class="stats-card">
<li>
<p>80K</p>
<span>Followers</span>
</li>
<li>
<p>803K</p>
<span>Likes</span>
</li>
<li>
<p>1.4K</p>
<span>Photos</span>
</li>
</ul>
You make clean code ,semantic and responsive so Awesome and Keep Coding 💻😊
Hey @helioLJ Congratulations for completing this challenge
Your code is very semantic ,clean and readable so Keep Going on .
my only suggestion on your code is :
Use only one <h1> per page or view. It should concisely describe the overall purpose of the content. Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users
Regardless You did amazing Work Congratulations for this ,Hope this comment is helpful , Keep coding 😊
I'm a beginner, less than a month. I would like to know how to make the "per month" stay perfectly in mid position beside the $29 which is bigger in size. Thanks
Hey, You did amazing work congratulations for completing this challenge
to fix accessibility issues :
h1 down to h2 down to h3 and so on . so use h1 instead h3 in div.container-top and change font-size if you want .To make your code more Responsive
span.per month you can use this :html
<span class="dollar-sign">$29 </span><span class="month-text"> per month</span>
css
span
{
vertical-align:middle
}
OR use this :
html
<p class="price"> <span class="dollar-sign">$29 </span><span class="month-text"> per month</span> </p>
css
p.price
{
display:flex;
align-items:center
}
span
{
display:inline-flex
}
p.price span.month-text
{
padding-left:10px;
}
<p class="heading-details"> 30-day, hassle-free money back guarantee</p>
instead of using
<p class="bright-yellow-color">30-day, hassle-free money back guarantee </p>
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
kindly drop feedbacks
Hey Emmanuel You did amazing work congratulations for completing this challenge
to fix accessibility issues :
You should use <main class="container"> and wrap inside it <div class="order-summary-card"> so all page content should be contained by landmarks.
Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h2 and change font-size if you want .
You can wrap your <div class ="attribution"> in a footer tag like this <footer><div class="attribution"></div></footer> to avoid accessibility issues. and you can comment the footer tag to hide it and get more awesome view
To make your code more Responsive
body{
background-size: contain;
background-repeat: no-repeat;
}
use <a href="#"> cancel order</a> instead <div>cancel order </div> to make it more semantic.
don't use multiple <br> to make content line by line but give div.text width:80% as example and text-align:center.
it's recommendable to use <p></p> instead of using div.texts to make it more semantic for screen reader.
remove extra padding and margin from any tag using this :
*{padding:0px;margin:0px}
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
This one took me a long time to do (Approx. 4hrs). I'm a newbie when it comes to coding. I'm currently taking a Full Stack Bootcamp Course through Udemy taught by Dr. Angela Yu. I currently just finished the Bootstrap section from that course.
I did not look at any solutions for this challenge. I just work through with what I know so far to make it look like what it should. I have not tested this on mobile so I'm not sure if this code will work.
I guess any advice on workflow on how to tackle this challenge from start to end would be amazing. I found myself all over the place mid way to completing this challenge.
Thank you so much for your help.
Hey odyg You did amazing work congratulations for completing this challenge
to fix accessibility issues :
You should use <main class="container"> and wrap inside it <div class="container"> so all page content should be contained by landmarks.
give class name card instead div.container as page contain more than one element so it is not the container for all content in the page
You can wrap your <div class ="attribution"> in a footer tag like this <footer><div class="attribution"></div></footer> to avoid accessibility issues. and you can comment the footer tag to hide it
To make your code more Responsive
flex.container use this to center your elements in the pagebody {margin :0;display:flex;flex-direction:column; min-height:100vh}
**/*it is a child of the body and we make flex-grow:1 to distribute space-equally in top and bottom*/**
main{display:flex;place-items:center;place-content:center;flex-grow:1}
**/*you can make it in this challenge to get identical design but don't make it in really site you work on as semantic layout should contain header,main,nav,footer,etc.*/ **
footer{display:none;margin:0}
don't give section or div specific height that will damage the responsivity in mobile if width of screen small so remove height and use min-height instead .
you can use variables in css and save colors or fixed sizes in variables like this :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
Hey ,You did amazing work congratulations for completing this challenge
To fix accessibility issues :
<h1></h1> instead of <h2></h2>------------------------------------------------------------------ Tip ---------------------------------------------------------------------
Html
<h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>
css
h1 span
{
display: block
}
use media query for mobile and Ipad but in this challenge you will use for mobile only with min-width:375px or smaller and max-width:775px.
don't give section or div specific height that will damage the responsivity in mobile remove height and use min-height instead.
don't give section.top and section.bottom any height as content will overlap above each other in Ipad and Mobile screen.
use grid template instead using position and top or left as this
/*
give semantic classes names to divs and section so instead of bottom class you can rename it to **cards** and and give children class name as card and semantic name about what is contain as **Supervisor,Team Builder ,etc...**
*/
section.cards
{
display: grid;
grid-auto-rows: minmax(200px,auto);
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 'Supervisor Team-Builder Calculator '
'Supervisor Karma Calculator';
gap: 30px 30px;
}
.cards .card.Supervisor
{
grid-area: Supervisor;
align-self: center;
border-top: 5px solid var(--Cyan);
}
.cards .card.Team-Builder
{
grid-area: Team-Builder;
border-top: 5px solid var(--Red);
}
.cards .card.Karma
{
grid-area: Karma;
border-top: 5px solid var(--Orange);
}
.cards .card.Calculator
{
grid-area: Calculator;
align-self: center;
border-top: 5px solid var(--Blue);
}
@media(max-width: 775px)
{
section.cards
{
grid-template-areas: 'Supervisor Supervisor Supervisor'
'Team-Builder Team-Builder Team-Builder '
'Karma Karma Karma'
'Calculator Calculator Calculator';
}
}
@media(min-width: 775px) and (max-width:1100px)
{
section.cards
{
grid-template-columns:repeat(2,1fr);
grid-template-areas: 'Supervisor Team-Builder '
'Karma Calculator';
}
}
and this guide to use Grid
give cards border-radius to be more beautiful
you can use variables in css and save colors or fixed sizes in variables like this :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
I just completed this new challenge and I would love to hear reviews about the solution I was able to come up with and what I can improve on going forward.
Hey Promise You did amazing work congratulations for completing this challenge
-- to fix accessibility issues :
<main</main> and wrap inside it <div class="container"></div> so all page content should be contained by landmarks.-- To make your code more Responsive
don't give section or div specific height that will damage the responsivity in mobile if width of screen small so remove height and use min-height instead .
use <a href="#"> cancel order</a> instead <p>cancel order </p> to make it more semantic
you can use variables in css and save colors or fixed sizes in variables like this :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
You used semantic class names and id so code is readable and this awesome
Regardless You did amazing I hope this is useful to you... Keep coding👍