hello, i just finished my first challenger about tribute page, can you guy give me some recommends
https://codepen.io/huyhoang8398/pen/GRgxrOL
https://codepen.io/huyhoang8398/pen/GRgxrOL
and should we use boostrap or some UI framework to do these challenger?
@huyhoang8398 very nice :thumbsup: . My input for you is:
- I see you use
idfor styling, usually, we useclass, since the class can be used by many elements. Not saying that you can't do this withid, but id is unique. - for the border you can use short border notation, so like
border: 1px solid black.
Hi , I am struggling to understand why mouseover or click does not work on a nested element , but instead it the event happens on a far parent/grandparent element. BTW this happens only on IE11 . Chrome works fine.
here is the html:
here is the html:
<button type="button" class="a-button-nostyle m-country-select">
<img class="a-image icon-flag">
<span>Germany</span>
<div data-component="MDropdownFilter" class="m-dropdown-filter country-dropdown has-error is-open" data-component-id="jjj534jk34j5">
<input placeholder="Germany" class="a-input filter" type="text" required="">
<ul>
<li class="ul-container">
<ul class="options">
<li class="a-option" aria-selected="true">
<a href="/content/p11/page.countryselector.de_DE.de_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.htmltarget="_self" class="a-link is-multilanguage internal-link">German</a>
</li>
<li class="a-option">
<a href="/content/page.countryselector.en_DE.en_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.html%3FdebugClientLibs%3Dtrue" target="_self" class="a-link is-multilanguage internal-link">English</a>
</li>
</ul>
</li>
</ul>
</div>
</button>
i am hovering over ul-container or a-option etc. but it shows the hover on the root button element
is there a proposal/rfp/rfc (including deprecated one) for javascript module bare imports? like
import 'React' and similar? I cannot find anything in my searching of github/tc39 and more general searches. Thanks. Found https://gist.github.com/jkrems/769a8cd8806f7f57903b641c74b5f08a#Future
Hello guys, Could anyone please review my Survey Form front-end projects. Your help would be appreciated.
Link
Link
Hello. I am trying to use flex box. I have set display Flex to my nav section. I am then trying to justify-content: flex-end to my button, however it doesn't seem to be working.
https://codepen.io/nnoy01/pen/GRJqgoz
If anyone can tell me what I have wrong, would appreciate it. Its very basic code
@sjames1958gm Right now you have it applied to the
.container element
I applied it to the
<nav> and it looks like this. Not sure if that's what you wanted, but it is aligned to the flex-end
It should work if you literally just change the
.container code block in your CSS to nav. Alternatively, you can just apply the .container to your nav element and remove the <div> altogether.
@Nooy90 Let me know if that solves your issue
@sjames1958gm my bad!
Hi all, I'm used to software development but feel like a complete noob when it comes to CSS. I'm trying to slowly build my own site on the side while working through the FCC courses, and currently I've gotten close to making these ribbon buttons that I want but they could use some fine-tuning / some advice from someone more experienced on tips / better practices I'm likely overlooking.
Here's the codepen I'm practicing in: https://codepen.io/flowmid/pen/RwPGvrm
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?
Can someone please help me? I have been searching the net for a solution, watching YouTube tutorials and still can't find a solution. The list items/text just does not want to align to the left, between the Starting price and button. https://codepen.io/mdezigned/pen/KKpqqmz?editors=1100
@Mdezigned This is the default CSS style for an unorder list element, <ul>.
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;
// <ul> default styles
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
// from https://www.w3schools.com/cssref/css_default_values.asp
@Mdezigned Quickest solution to any problem like this:
Learn how to use Chrome DevTools
Whenever I have a problem related to styling, CSS, or Javascript, the solution is almost always solved by popping over to Chrome DevTools. Namely, the "Select An Element To Inspect" saves my life all the time. I'll attach a GIF to show you how your problem could have been solved in less than 5 seconds using DevTools.
If you see in the GIF above, I click the "Select an element to inspect" in the top left-hand corner. The button looks like a mouse-pointer with a box around it.
After that, I hover over the element in question
You can see that, to the left of the element, there's a big green box. This indicates that there's a padding-left of 40px preventing it from aligning correctly. Green indicates padding while yellow/orange indicates margin.
Also, you can see directly above the element there's a little info-box that pops up. This shows you most of the styling info related to that specific element.
Specifically, it shows you that element has a padding-left of 40px
To open Chrome DevTools you press: Ctrl+Shift+i". This opens it up for you, most likely at the bottom. I have it set up so that it opens up in a different window. This makes it so that it doesn't obstruct my view depending on where I place it on the screen, but that's up to you.
While learning ANYTHING related to Web Development, DevTools is your best friend. When you're learning HTML/CSS, it allows you to inspect your elements visually. You can also make quick edits. While learning JavaScript, it lets you play around with your code and quickly experiment without having to console.log() everything. It gives you a MASSIVE leg up and will save you years over time.
I've definitely learned the most through projects; however, I've learned a hell of a lot by just playing around in the console. I've spent hours just tinkering with different things, and over time it's taught me more things than I can count. The best way to learn the console is to just play with it. But, there is a video that I recommend to anyone that doesn't know much about it.
Didn't know that!
Usually I go to other sites for inspiration and try to mimic that.
but is that really the way? "borrowing" from someone else until it's yours.
so "taking" a design isn't that bad, you actually end up making your product look more "familiar". You could also go out of your way to build your own design, but this usually is harder since you need an eye for design
All depends on what your goals are, if you want to be able to design your own UI's from the ground up then practice building stuff better via different techniques and what not like any artist. If you don't really care to much and are fine using existing designs then look into ones you could leverage and stick with it.
I personally totally suck at design and thus usually stick with an off the shelve UI lib and or UI guidelines. I'd rather build the functionality then design the UI