Top 10 css interview questions and answers ( Part -2 )
HTML-код
- Опубликовано: 1 окт 2024
- Top 10 commonly asked CSS interview questions and possible answers for front-end programmers.
#css #interview #questions
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
Been working on CSS for years now, but it is often easy to forget certain tricks. Thanks for the video!
It was my interview today and the guy asked me about specificity... 😅😅 and I knew the answer and now I am watching this vid😄
some questions: Lol
What is the difference between classes and IDs in CSS?
What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
Describe Floats and how they work.
Describe z-index and how stacking context is formed.
Describe BFC(Block Formatting Context) and how it works.
What are the various clearing techniques and which is appropriate for what context?
Explain CSS sprites, and how you would implement them on a page or site.
What are your favourite image replacement techniques and which do you use when?
How would you approach fixing browser-specific styling issues?
How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?
What are the different ways to visually hide content (and make it available only for screen readers)?
Have you ever used a grid system, and if so, what do you prefer?
Have you used or implemented media queries or mobile specific layouts/CSS?
Are you familiar with styling SVG?
How do you optimize your webpages for print?
What are some of the "gotchas" for writing efficient CSS?
What are the advantages/disadvantages of using CSS preprocessors?
Describe what you like and dislike about the CSS preprocessors you have used.
How would you implement a web design comp that uses non-standard fonts?
Explain how a browser determines what elements match a CSS selector.
Describe pseudo-elements and discuss what they are used for.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
What does * { box-sizing: border-box; } do? What are its advantages?
List as many values for the display property that you can remember.
What's the difference between inline and inline-block?
What's the difference between a relative, fixed, absolute and statically positioned element?
The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
Have you played around with the new CSS Flexbox or Grid specs?
How is responsive design different from adaptive design?
Have you ever worked with retina graphics? If so, when and what techniques did you use?
Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?
That is a nice list. Will try to cover this in next tutorial. Thanks for watching! :)
thank you! its from html5 boilerplate interview Q im trying to answer them alone.. but if you could pick some of them it whold be nice.. but thanks for this 2 awesome videos
Sure, I will make it.. this is a nice list of questions.
.
Yaniv
.
.
Best teacher on youtube hands down!! Loved the JS interview questions as well, was not familiar with a few of these CSS questions. Please keep making videos. I was a teacher in my former career and I have to give credit where credit is due, you are an EXCELLENT teacher.
Hands down one of the best front end channel on RUclips!
Mind blown!!! Never knew you could do tool tips that way. Thanks!
i am a css developer but i didn't about that content picker through data attribute...thank u for enhancing my knowledge
I am glad it helped. Thanks for watching! :)
Lol...css is not for developing it is just for designing ....u r not a developer ur designer
@@veryniceandhelpfullvideoth9211 Wow, chill out.
difference beteen top and margin-top, i think its a bit tricky
Thank you for these videos. I'm preparing for a front-end interview and your channel has been an invaluable resource.
I am glad it helped! Good luck with your interviews!
Todd Billings same
Question asked to me is how you will make element printable : example for a page when use press ctrl + p it shouldn't show menu and other elements. It should print only content we want ..
Answer is: by using @media print " make all block display:none that we dont want to show .
Wow. that is a tough one . May I know what company?
right answer is @media print { /* css here */} , not the one u mentioned ;)
Geeky Dipesh :GD yes correct
Sir,I want to know about semantic html markups and web crawlers🙂
I think we are missing questions related to media query, viewport, em vs rem differences
all three good questions. I will try to cover them in the next video.
How about you read a book?
Reading a book doesn't really work with css. You have to to practice a lot.
hey man just wanted to tell you that you're doing really great work! you definitely should have 10x more subscribers :)
Tutorial was really interesting and the explanation was awesome which help to understand the tricky things easily.Please share the interview question related to AngularJS.
sure . I am going to expand interview questions as I am planning to make some more related to frameworks.
Some other questions like 12 grid bootstrap how to convert 16 grid and other if a psd layout is 1920 px then how to make it in 920px device
One thing a good explanation of attrbute is that if u want to add a dynamic content not with Dom but using CSS method is best way to do that
that triangle trick... wowowow
That shadow crap isn't supporting by most browsers, and it's about js mostly than css.
Brother... You are too good... Thanks for sharing this video
Can't believe i' just hearing about shadow dom
It is a pretty cool feature. Currently used mostly for the web components
Great explanation!!Thanks.This tutorial was really helpful.i was asked this question in my one of my interview. How we can display a smiley before and after a paragraph all inline using css? something like this "😊 paragraph 😊". please explain
Good Question! Here is the solution
Some paragraph
.paragraph::before {
content: "smily ";
}
.paragraph::after {
content: " smily";
}
that triangle trick is insane .. great video!
Glad you liked it!
Just to remember, ::after is actually a pseudo-element, not a pseudo-class, though :after (with only one ":") is also supported by most browsers.
yes easiest way to understand is pseudo element basically adds new element which pseudo classes are used to give effect on some state or element based on position like state(hover,visited, active, link) and position like(first-child,last-child). Hope it helps.
Your tutorials are great without any doubt. Would appreciate if you can provide some tutorial on less/saas css preprocessor. Thanks in advance 👍
Sure I will make them . Thanks for watching !: )
You are amazing
have you all heard of styled component?It follows this Shadow css
hello sir can you make a videos on algorithms.so that it is help ful for us for cracking the interviews.
nice mustache
Very helpful review!!! Loved the music at the end too- :)
At the very beginning, I once failed a z-index question at an interview. :(
I had also failed z-index question in an interview :) Thanks for watching Sobeida.
Great, I learned something new here.
Bro make series of bootstrap
You are the REAL SITH.... behind all the code ---> TECHSITH
Typo alert! That should be "pseudo elements" not "psudo elements" at around 5:40 in the video.
I loved that triangle trick :-)
Another great video. These videos help me really focus on what I need to prioritize.
I am glad it helped. Also Try learning either CSS grid or Flex Box .
thanks, sir. very useful
Great Points! Thanks alot!
I had been asked about difference between inline-block and float property .
Usage of z-index
difference between inline-block and float property is an important one to know . Thanks for watching!
It s just really useful. And expecting video about responsive design questions
Awesome video
Can you share me the link for display block and inline CSS of yours
How would you handle css if website have so many pages may be 100 of pages. Which approach will you follow to design your page.
I told them I will use POST CSS
I am assuming that most of the pages would have the similar styles. create a common css for all the pages. and then have an additional separate css for pages that require customization.
Very helpful...
Could you use Css content: attr(data-something) & then > add A Javascript or Php function inside the Html Data Attribute. Just made me think of this and would be pretty interesting if it worked.
It should work . data attributes can be used as selectors
Almost a week of learning stuff and i know further question to ask, others than the tldr below!
Do you ever heard of Lorem ipsum? (Just for open up)
What are Cookies and how can you use them?
What are Favicons? Harder one's:
Explain the transition propertys.
How would you accomplish color gradients with css?
How can you avoid XSS (Cross site scripting) and other Injections (e.g. within a given chatsystem)?
What are the key-functionalities of the common parallax-scrolling effect?
How would you do a loading- or progress-cycle with css only?
Yes they are all good questions. Thanks for sharing .
Question:
Are pseudo-element and pseudo-class same thing? Or is there a difference?
Really blown away .... The best VIRTUAL teaching I have ever seen. Above you're teaching, you're so cool boss. You're attitude and style, simply gains our attention
Thank you for the awesome comment. Keep learning Krishna.
Man where are you interviewing where you're only getting asked CSS questions? That's like web design, not development.
these are some of the interview questions that can be asked on the topic of CSS. That doesn't mean Interviewer only ask CSS questions.
What Text Editor is this?
I use jsfiddle
I had a question about what is css methodology ?? 😢😢😢
naaaa 10 question kafi hai interview ke liye
mai ja ra kal Google interview dene
Awesome Awesome information. Thanks man.
I recently gave an interview and asked this question
what is difference between display:inline and display:inline-block
THe diffrence is use inline for texts. and inline-block for blocks. also inline doesn't take height or width if you apply,
5:36 it's spelled pseudo.
Awesome sir !! Thank you
Thank you for watching Rea. :)
How you can able to make many div inline .. it should take full width .. where no of column(div) are unknown may be ther are 3 3 4 5 6 any number of divs in one line. It always take 100% of view prot?
You have to use Flex box. Were you able to do it?
techsith sure if you won't to share your email.
You can look at my email on my channel page. Or techlover2000@gmail.com
Can you suggest any reference for making CSS concepts clear.any hands on coding section will be great.
What level are you at?
Great Content .. Thank you!
Please create video on Box Model and Box Sizing
What is the editor you are using in this Tutorial ?
Thank!! This is one of most useful tutorial for me!
Thank you Techsith
You're awesome 👍
I was asked : how to distribute two div in ratio of 80% & 20% using flex?
flex-basis
@@Techsithtube thank you
your videos are awesome
Very nice.. 👍
kiraak sirr..
Can u make a video on how to solve cross browser css issues and make a video on CORS
Sure , I can make it. It will be about weeks or so. Thanks for watching! :)
hello techsith. I love your tutorials, they are very helpful. I have few more questions where can i post them? where can i find your email id?
my Gmail ID is techlover2000 .
thank you!
Thank you!
Thanks a lot :)
sir app konsa editor use karate ho
js fiddle.net
How to create tooltip which is having a border?
You can use psudo elements to do it.
.tooltip::before,
.tooltip::after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px;
}
Thanks..its working now
What if we remove all the border css except the one which we want to show? U used transparent property but can we remove 3 borders to show one triangle?
That would not work. because height and width are 0;
techsith so only one border can be removed?
you can remove two actually.
div{
width:0;
height:0;
border-left:100px solid red;
border-top:100px solid transparent;
}
techsith that’s what I thought. Two borders are required to hold on to each other (basically exist) as there is no height and width. Thanks a lot 😊
That is a good analogy :)
what is attr? is it function of css or css?
attr is not function of css. its an name of the attribute.
techsith If attr is attribute name in css, how come it takes arguments?
like
content: attr(data-name)
Your video is really helpful to me. Please make more new videos.
Is it just me or does this video contain only 4 questions?)
Good tutorial but please dont try to fake the accent.
Thx I tweeted this!
Thanks Myles for Tweeting :)