I was watching an hour-long class on web dev, and, when they got to flex, I understood absolutely nothing. 30min explanation, nothing. I came here and in 7min BOOM. Amazing!
I just want to say how much this has helped me with my coding and web development class! My repositories look so much more professional! Thank you for breaking everything down to simpler terms!
OMG you are the BEST! Thank you so so so much!!!! I have ADHD and this was MAGIC for me. To read or seeing someone talking about this...no, too much info to sort. To only hear and watch: perfect. I'm obsessed with HTML and CSS now.
this video jumped me 1 month ahead of the class per se, I researched this countless times. sometimes it is not the information we're looking for but the right teacher.
These tutorials are actually how I'm learning to make my own professional website from scratch. A lot better when you're a developer and can say you made your site on your own without any tools like wordpress
Wow! amazing, you really showed me clearly on how to make layout. I am getting frustrated why I cannot do a basic layout, I thought I am the dumbest person in the world. With simple and clear explanation, you save me, now I can do my assignment. Thank you , I am a new subscriber.
Hey, thank you for this series. I'm coming from matlab and python and wanted to have a look at webdev and your videos are very good starting point. Thank you so much!
Thanks. It's the first time I ever worked with flexbox and I actually happened to use both column-reverse and row-reverse. The website has a set of rules in a form of image and text next to it. I wanted to have every other rule with text on the left and image on the right to make it more visually interesting. And with the mobile version, I wanted to be the rule with the image at the bottom.
row-reverse and column-reverse can be very useful if you want to use the ~ (next siblings) and + (direct next sibling) selector. Since it only works on next siblings, reversing the order can make it possible to get the target elements as next siblings, even if visually they are previous siblings.
If you want to jump to the next tab like he did in 0:36, go to keyboard shortcuts in file-> preferance, search editor.emmet.action.nextEditPoint and create any key combination you want
It seems really easy and logical. Is it easier now than it used to be? Im asking because the video is 5 years old so maybe there is some advancement in this field.
How do you jump to a new line without carrying over the end of the previous line? Or jump to the very end behind the text in one line? Online it says "END" but that doesnt work
I don't understand where the css code is? when I made a website as a school project I had a separate tab in vs code with css code. what I mean is that the html file and css file was separated.
there are three different implementations you can have with css; the first is inline, which is where you insert the css directly into the html elements in the the second is internal css, which is what the video shows. you place the css into the of the document the third method, which is what you're thinking of, is external css, where you link the stylesheet in the
on this day still, you should use float layout because not all browser supports flexbox or parts of it but you have to know all 3 ways of laying your design
I've run into a problem with flex. My browser shows the divs of the triple section centered on the screen in a column. Here is my styling code followed by the html: section { background: white; color: gray; display: flex; flex-direction: row; padding: 20px; } div { background: red; margin: auto; width: 100px; } header a b c lower saection footer Any help in understanding where I went wrong would be much appreciated.
I have found my mistake: a stray curly brace between my header styling and my section styling. The lesson learned is that the mistake may be outside the portion of the code where the mistake becomes apparent.
Another problem I'm having, when trying to figure out possibly what I did wrong with her flex button, is when I delete inline block, my list goes back vertical instead of staying horizontal. Am I missing something??? It looks just like his screen.
Figured it out. You probably have your HTML set up like this: a Div>b Div>c but you need it set up like this: a Div>b Div>c . Your div tags need to be nested inside the tag.
I don't understand one thing because I want a similar header as you showed in the movie ( in my case instead of a header a have a head which is above the body) When I want the black background to be stretched all over the width of the page... Why applying margin 0; and padding 0; to the header isn't working while writing the same in the body does the trick even though the body is below head? Thanks in advance. Ps. I really appreciate your content! It helped me to break through the problems of a fledgling WebDev:)
For some reason I can't make my margin-right work for li, even after doing all you did in tutorial. Here goes the code: li{ display: inline-block; margin-right: 20px; } I will comment the rest of my CSS code if I made mistake there. Update: I solved this, but from the other side I didn't. I just abandoned first document and did everything again and this time it worked fine, idk what was wrong first time but now everything is alright.
This will only work if you have Emmet installed. Emmet is installed by default in VS Code but if you are using another editor such as Brackets or Sublime, you may need to add it as an extension.
section{display: flex; flex-direction: row;} div{width: 100px;} Did not display as you've shown. What went wrong for me? ☹ Oops! Forgot to close the div tags. Sorry 😁
I'm having an issue in Dreamweaver where I put display: flex; and follow it with flex-direction: row; and nothing happens. I may or may not be just dumb but any tips would really help this noob out. These tutorials are immensely helpful to someone with 0 coding experience, btw. Update: I think I figured out why the display changes werent affecting my abcd divs. However, when I set the margin to auto they get super spread out lol Up-Update: Nvm I get it now lol.
My display (ex: display: flex;) is not blue. All of the other style tags are (background, color, and padding). I keep going back but I don't understand what is wrong. Please help me as I want to continue to learn.
At 5:03 when you where typing in text for the li tags, how do you automatically jump to the next line in-between the html tags? Every time I press the down after typing in some text it places the cursor directly underneath on the next line. I looked at the shortcuts for macs in vscode but I don’t see a shortcut for it.
