Tomazi
@tomazi15All comments
- @Diviner-Beibei@tomazi15
dont think you can import svg's using css in React, you can import svg as a component: there are some examplese here good read:
https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/
Marked as helpful - @Corbinhol@tomazi15
@Corbinhol
Really good functionality and design, I would break it up into components it would be easier to maintain and manage.
A very good practice is to always add form validation because at the moment the user can enter anything, ie invalid email, name or pone number, You could start with something very simple that html gives you out of the box in you email input can be set to
type="email"
or phone number totype="number"
this would make sure that the user is forced to enter valid email and for phone user has to enter numbers only, also the form can be submitted without entering any dataJust few things to consider but overall well done and keep it up
- @Alpha437@tomazi15
Hi @Alpha437
Congrats on completing your challenge it looks really good, there might be some
heights
andwidths
but without figma guidelines its hard to get it 100% but considering think your solutions looks great.In terms of responsiveness as a good practice use
mobile-first
design methodology. - @Taiwo-art@tomazi15
Hi @Taiwo-art
Sometimes i also find that some colours provided for the challenges do not really match the prototype.
When that happens i usually find the solution for the challenge i am working on and use chrome
colour picker
extension to get the correct colours.Marked as helpful - @WiaterKa@tomazi15
Hi @Kamil Wiater
Firstly i think you have done great job in terms of the design and responsiveness.
One thing i would change immediately is the directory naming convention ie:
secondary page
when you have a folder with a space in it i can cause you a lot of headache if you were trying to ship your code into production, when you bundle your code it could break. to avoid it just try sticking to not using space ie:secondaryPage
.Next thing i would do i would strip the html page from its
sections
and turn them into stand alone components.also i would create
src
directory when i would keep all the implementation files to keep them away from all the config files likepackage.json
suggested file structure:
./src/ components/ pages/ images/
Also for each component, you would create a sub directory where you would keep all the component specific file ie:
component.js
componet.scss
component.test
Keep the up the good work 👌
Marked as helpful - @divyanshu29@tomazi15
Hi @Divyanshu Sharma
When you want to host your static project on github it has to have
index.html
this is the standerd naming convention otherwise github will not display. changeLearn.html
toindex.html
- @Kure-ru@tomazi15
Hi @Kure-ru
The problem you are having is is
z-index: -1
I think what this does it puts yoursummary section
behind everything thing even including thebody
and even dough it is visible on the page because its is not covered by any other element. In short the the whole summary section sits behind and the whole section is not clickable including your button hence why you cannot see thehover effect
.Even if you inspect the element you will see you cant pick any elements on your summary sections but you can on your result section.
To fix this
add
z-index: 10
to your summary class andz-index: 20
to your results class. This way you will not be sending anything behind the pagebody
but you will simply put result on top of summary.If you still struggling i can make a PR to your repo :)
Hope this helps keep coding 👌
Marked as helpful - @morganakuhnen@tomazi15
Hi
Really good effort keep it up 👌
On suggestion on your looks like Annual Price £59.99 /year is in one line but the price should be in the next line, had a look at your html DOM and this should fix it:
on your
class="price"
adddisplay:flex
andflex-direction: column;
you can add multi-nested divs and at any level you flex.Hope this Helps
Marked as helpful - @jonathan401@tomazi15
Hi
I Think you have done a really good job, the design does what it suppose to do in terms of the responsiveness. Main issues you are having is with
widths
,hights
,margins
andpaddings
its hard enough the get the right without figma designs so over all good effort. One small thing i could say when it comes toz-index
use it intens
as in 10, 20 etcKeep it up 👌
Marked as helpful - @mjkodkks@tomazi15
HI
Well done for completing this challenged visually it is really good! and i love tailwind css my self it allows to produce a simple to advanced design very quickly! css it self can be annoying especially when you have to manage multiple break points and write a
@media
query for them.Small if you have adde
tailwind.config
in your html you can removetailwind.config
from the root. Also its a good practice to keep yourjs
in separate file as well asroot css
rules ie:body
orhtml
.I would also recommend looking into semantic html.
Keep it going 👌
Marked as helpful - @trottiemcqueen@tomazi15
Hi
All i can say is keep going and dont stop :)
Your are missing few key things here:
Mobile view Icons (check your path) Buttons The columns are overlapping when changing your screen size i think this is because you have declared
grid-template-columns
in%
try something likepixels
orrem
which are fixed widths.Also try finding out how you can use custom google fonts for future challenges
Marked as helpful