Sarah• 20
@sangelici
Submitted
Added my own spin on some things but the core of the challenge is there.
seekinfox
@seekinfox
All comments
- seekinfox• 560
@seekinfox
Posted
nice and clean..well done.
1 - wowza18• 40
@elams18
Submitted
Hello, I did this quickly to test my knowledge with css. I got stuck with making the landing page responsive (aka media query). I felt like there were a lot of duplicate/unwanted code to make it to look as I want. Are there any methods to reduce the same?
Thank you!
seekinfox• 560@seekinfox
Posted
I think Tailwind CSS and Sass both are completely different.
Tailwind is a framework similar to the bootstrap. but it is much more easier to learn and once you start using prototype components you will fall in love with tailwind. if you know css you can go ahead.
sass is a extension of CSS and is more advance version. it is full of advance features. it will help you organize your style sheets and it will make a big difference if you are on some larger projects. I cannot imagine myself writing css for larger projects, its a nightmare. you can just go ahead learn it and it will only help you..
1 - Dan Ushindi• 120
@DanUshindi
Submitted
May you help me to find how to play with the font family of"we are launching soon!"
seekinfox• 560@seekinfox
Posted
I did not understand your question. but i will post this in case it's helpful
<p><span>we are launching<span> soon!</p>css -> you can use span almost everywhere in html and give it a custom style.
p { color: black; } p span { /* span is child elem of p*/ color: gray; }0 - issam hosni• 140
@issam-hub
Submitted
if there is anything you can tell me to improve this or my progress in frontend developement, please let me know
seekinfox• 560@seekinfox
Posted
You can start using sass. maybe you will find the styling much easier.
Marked as helpful
1 - wowza18• 40
@elams18
Submitted
Hello, I did this quickly to test my knowledge with css. I got stuck with making the landing page responsive (aka media query). I felt like there were a lot of duplicate/unwanted code to make it to look as I want. Are there any methods to reduce the same?
Thank you!
seekinfox• 560@seekinfox
Posted
You're at the where you are ready to learn sass/scss. you should start using it, it will take you very less time to learn it.
With it you can use
@mixinswitch allows us to write a chunk of code and reuse it wherever we need when styling. it is only one of the advantages.get on it !
Marked as helpful
1 - Aye Thandar• 20
@10598ayethandar
Submitted
This is my first project using html and Css.I really need feedback for my very first challenge.Please teach me and tell my mistakes to rise my front end developer skill.I decide to continue learning in front end development.My html and Css code are old because I learn html and css by myself using website and course.I continue learning in javascript, bootstrap and jQuery.So I really need feedbacks for my first time challenges.Thanks you all.
seekinfox• 560@seekinfox
Posted
It's cool that you finished your first challenge.
You have used internal css
Now take it to the next level by using external css. Create a new file
style.cssand put all your css in there.- Search how to link them to your html.
Since you are a beginner, after you are comfortable with using html
learn semantic html, it's just some additional tags. You can search them and add them in your practice.
And do more smaller projects..
Marked as helpful
0 - Elena Martinez• 80
@nenamartinez
Submitted
Hello everyone! Any feedback is appreciated, but here are some questions/issues I'm having:
The background. I can't quite wrap my head around how to use the background-image properties to make it look like the design. Help please.
Semantics. I tried to keep code semantics in mind, let me know how I did.
Anything else that jumps out to you that would help me improve would be appreciated, thank you!
seekinfox• 560@seekinfox
Posted
You can use
background-repeat: no-repeat, repeat; background-size: 90%, 50%; background-position: top nrem left nrem , bottom nrem right nrem;. //you can change the unit and it can be negative.Separate two values with " , ".
If you set only one value it will be applied to the both images.
background-position: top nrem left nrem;Marked as helpful
1 - Marco• 185
@devMarco02
Submitted
Practicing React. If you have any suggestions, feel free to comment.
seekinfox• 560@seekinfox
Posted
Are we suppose to organize our project files and folder like this?. i had a headache figuring things out.
I'm a beginner so it's not surprising that it was complicated for me to go through. i only ever use 3 or 4 folders for my scss, css ,js and imges.
i have no suggestion except for that border surrounding your body/html.
0 - murilo• 110
@mlzzi
Submitted
I finished this one and it was quite a challenge.
I used flexbox, but in desktop view I don't think is the more elegant solution. I tried grid also, but no success.
If anybody can get me a hint I would appreciate it. Or any feedback on whatever improvements I could make.
Best regards!
seekinfox• 560@seekinfox
Posted
I'll tell you what I did -> I'll keep the code minimum, since I'm writing this from mobile.
This is mobile first approach
<main> //. column flex <div.container> <div.cards> //column flex and @media min width 1000px flex row .card1 <div.middle-cards> //column flex .card2 .card3 </div> .card4 </div> </div> </main>For a better idea you can check out my code for this challenge.
Marked as helpful
1 - Linea• 10
@lineah35
Submitted
The div is missing here and I am not sure why it's not showing up because it does when I copy the full path. Literally submitting this to view proper solutions.
- How do I center the main div?! -How do I expand the width of the button to match the width of the width of the annual plan div?
- Is it better to use the float property rather than the table for the annual plan div?
seekinfox• 560@seekinfox
Posted
- There are several html errors ,
divtags are not closed properly,brtags are not close properly
- always start with creating opening and ending tags e.g
<div></div>, so you won't have to worry about it later.
2 . one of the best way to start building layout is to plan it. Do it in your mind or draw it down . once you get hang of it, you'll feel much more confident when you're building new layout.
for general idea -> suppose i want to create a card like the challenge
i would do ->
<section class="card-container"> <div class="header-image-hero"> </div> <div class="text-content"> <div class="plan"> </div> <button></button> </div> </section>you get the idea.
3 . ways to center div in mid of screen
-
margin: auto; -
display: flex; justify-content: center; align-item: center;
You should use css flexbox , start with simple flex, you'll get it eventually. it'll make your layout lot easier.
for width ->
- you can set button
width: 100%;so it'll expand to width of it's container e.g. take example from above
.text-content { //parent for button and plan width: 10rem; } button { // direct child of text-content width: 100%; } .plan { // is direct child of text-content width:100%; }you can also use flexbox to do this.
4 . imo table is good but old. use flexbox and css grid. and using positioning a lot makes a code hard to maintain. but as long as you don't mess things up, its fine.
Marked as helpful
1 - Laurel Ray• 30
@laurel-ray
Submitted
I would appreciate any feedback or tips.
Specifically, I'm wondering how I did on my mixins and media queries. I struggled a lot with the phone layout.
Why isn't my background color working?
I thought I'd give utility classes a try for margins. It worked, but I'm not sure if I should have used them in this case.
Also, I'm looking for any feedback on how I could make my code better, prettier, more efficient, and up to date. I tried to keep accessibility tips from my last challenge in mind, so we'll see how I did this time.
seekinfox• 560@seekinfox
Posted
You have wrong variable-name /spelling-mistake in
backgroundthat's why it is not working.I had trouble finding main scss file, I think you can put .scss files in
scssfolder and compile them incssfolder, that would organize your code well.Also you can add README.md file so visiters can have understanding of your project without going through your code.
You can use read-template.md file for reference, it's available in download zip.
Marked as helpful
1 - Sophie• 60
@sophieQuin
Submitted
Hi there
I have applied correction based on the report I have received from the first submission. Also, attempted to incorporate a smoother transition with my navigation. Also, it is not working or only working once. If anyone can help me figure it out, it would be great.
Any other feedback would be great
seekinfox• 560@seekinfox
Posted
website is not responsive enough, the layout broke when i opened it in mobile view and in laptop view (1350px+?).
menu looks broken when opened, make it look clean when opened.
sorry for the critics. :)
Marked as helpful
0 - Angel Umeh• 90
@akcumeh
Submitted
I had a lot of trouble deciding breakpoints for devices and found creating a tablet version really difficult... I'd appreciate help on this!
seekinfox• 560@seekinfox
Posted
I think you should try and use simple flexbox and grid.
Using too much of positioning will make your code hard to maintain And it's a headache if your project is more complex and big. You can check out my code for this challenge, I have used flexbox.
1 - neshanth• 110
@neshanth
Submitted
Hi Guys, Can Anyone Tell Me How to add the line under the Learn More Link ? I used text decoration to do it but in the design file it looked different and I am not able to make it look like the design file.
seekinfox• 560@seekinfox
Posted
i used
::afterselectorlet me give you an example ->
this is my link element
<a href="#">this is a link</a>a { text-decoration: none; // we don't want that default link underline. } a::after { content: " "; display:block; width: 2rem; height: .5rem; border-radius: 1rem; // shifted it's position using margin-left/right. margin: nrem nrem nrem; }1 @Sergio-Ivan-Melgarejo
Submitted
I have a problem with filter to image. Can you tell me how you can do it?.
console.log("hello");seekinfox• 560@seekinfox
Posted
i used background for changing and adding color filter on top of that.
background: url("image-link"), rgba(0, 0, 0, 1);orbackground: linear-gradient(color, color), url(" ");i think you can also use css
filterfor this effect, look it up on google. ;)1- EVargas714• 50
@EVargas714
Submitted
I learned a lot doing this project. Thinking of re-doing it to fully grasp everything I learned. I have 2 questions though.
-
Is there any way to change the footer logo to green using CSS only? The alternative graphic wasn't included so I'm assuming there is an alternate solution.
-
For blank DIVS with backgrounds, what Aria landmark do I use?
seekinfox• 560@seekinfox
Posted
footer logo is an svg file,
you can change it's color using
svg { path { fill: color; } }above is scss format. in css it would be
svg > path { fill:color;}i did not understand the last question so i will skip that. ; p
but you can check my code for this challenge , i have tried hard to maintain and painful process to replace background images for desktop view. XD. but it was a cool learning process.
1 -
- adeline• 170
@adelinejune
Submitted
Honestly, I wouldn't have thought that i could build this tip calculator since my JS skill isn't that good yet. But I manage to pull this off lol 🤪 even though it took me quite a lot of time to figure out how to make this goddamn calculator work.
Any feedback would be greatly appreciated. Thanks! ✌️
seekinfox• 560@seekinfox
Posted
lol i know.. but isn't this how it works? we only learn to swim when we get into water.
I'll be trying this challenge soon !, i hope i don't take decades to finish this. XD
0 - nibupc• 10
@nibupc
Submitted
fonts are not getting applied, getting the error Did not parse stylesheet at 'https://fonts.google.com/specimen/Red+Hat+Display' because non CSS MIME types are not allowed in strict mode.
seekinfox• 560@seekinfox
Posted
The view code is not able to find your code repository . you should update your solution. or provide your code url.
0 - Mehr Hamza• 60
@mhamza789
Submitted
Completed challenge 3. Any feedback would be very useful for my knowledge. Thanks!
seekinfox• 560@seekinfox
Posted
I saw your code. nice page there!
Your REDAME.md file is blank except for the heading.
It's a best practice to describe your project so the viewer can understand your project at a glance.
In download kit there's a readme-tamplate.md file you can use it for a reference.
Marked as helpful
1 - Redeveption• 10
@Redeveption
Submitted
Hello Everyone,
It's my first project (I'm completely newbie). I try to code CSS with SASS. It's possible to explain my faults and tell me my few axes of evolution ?
Thank you very much.
seekinfox• 560@seekinfox
Posted
There are some problems with the desktop view i can't see the intended design.
It's a best practice to put your code where viewer can find it and see it easily.
and adding README.md file for the project will only make your life better.
there's a readme-template.md file in the download kit, you can use it. nice try ! btw.
0 - Arrizky Hasya• 305
@arrizkyhp
Submitted
seekinfox• 560@seekinfox
Posted
I learned a lot from your code thanks!. Good form btw.
1 - Alexey• 170
@Basyaviy
Submitted
I didn't find a solution to one problem. A small horizontal scrolling on an android phone. Moreover, it is not observed in Chrome DevTools.
seekinfox• 560@seekinfox
Posted
I did not find the horizontal scrolling in mobile screen size. I viewed it on android chrome browser. A quick but not recommended solution to this problem is to hide the x-axis overlay.
Or look for padding and margins, they're often cause of this problem.
Marked as helpful
0
