Web Development tutorial for Beginners Lesson 3.
In this lesson, we’ll cover CSS layouts for beginners, how to build hand coded CSS layouts, and some more intermediate CSS concepts.
We’ll be building a CSS navigation, using CSS floats, and creating a multi-column CSS layout.
A helpful tool in doing web development is the Emmet plugin for Sublime Text. To install it, you’ll need Sublime Package Manager (https://sublime.wbond.net/installation).
Once package manager is installed, install Emmet by hitting Tools / Command Pallette, then type “package control: install package” and choose Emmet.
As you can see in this video, there aren’t an infinite amount of css rules. The most commonly used ones are:
margin (spacing outside your html element)
padding (spacing inside your html element)
background (for color or image background)
color (font color)
display (block, inline, inline-block, none)
border-radius (rounded edges)
float (float left or right)
** You’ll notice I didn’t have the correct .row:after code, here it is, it needed content **
.row:after {
clear: both;
content: ” “;
display: table;
}
If you missed videos #1 and #2, here they are:
Lesson #1: https://www.youtube.com/watch?v=3JluqTojuME
Lesson #2: https://www.youtube.com/watch?v=gBi8Obib0tw
Learn Javascript with the Javascript tutorials for beginners: https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv
-~-~~-~~~-~~-~-
Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”
https://www.youtube.com/watch?v=fgOO9YUFlGI
-~-~~-~~~-~~-~-
source
how do i publish this website?
i had to add nav{ display: inline; } for the inline to work
thank you
Damn. Video predates pinned comments and now his explanation is lost in the sea of comments.
im having problem with nav ul li
My website is good but when i open it on another device it cancels all css styles how to fix it man
Im watching this in 2021 and it is still very helpfull
I got stuck at 4:25 my header doesnt change to black for some reason. Can anyone help me pls?
For some reason I couldn't get my header h1 and nav ul to go inline. :
I also learned one thing here that after you code then enter, see what's on your webpage. If it's feeling decent, good job bros😎
5:54 trying to figure out…
This is the type of annoyance that put me off web programming last time I tried it. This is my second go. Let's see how this goes.
how did you write the copyright symbol in the footer?
8 years later and this video is still relevant, thank you!
bro with at 4:34 pls someone help
header {
background: #999
color:white;
}
After watching this, I feel like putting a front end developer skill in my resume now. hahahhaha
In css, header is not working, why?
Too bad most people didn't have to decency to drop a like.
Thanks for the help.
sir ,i am from bangladesh.i want to build my career with web development.i am very comfortable with your teaching quality and understand much better than others tutorials…thanks.,
hey man, do you recommend in investing on plug-in programs to aid my work as I grow as a web developer?
Who has a problem with the link, change <link rel="stylesheet" href="styles/main.css"> to <link href="main.css" rel="stylesheet" type="text/css" />
we're in 2K20
i am 13 and this has help me learn coding and i hope i can become a web divilopor 2020
ul>(li>a)*5 then i did tab .. does not work help please
Check out this face recognition website (best on desktop or laptop)- https://facefinder.tech