HTML, CSS, and Javascript for Web

1. HTML, CSS, and JavaScript
for Web Developers!

3. • GitHub is a website and cloud-based service that helps developers
store and manage their code, as well as track and control changes to
their code. To understand exactly what GitHub is, you need to know
two connected principles:
• Version control
• Git

4. Creating repos on github
• Login
• Click on the + sign
• Create repos (folder)
• Name it coursera-test
• After this make this repo to host website freely
• Go to setting  pages  git hub pages will be opened  change branch to main
save
• Note that now you should be able to go to
http://yourgihubid.github.io/repository-name/ (replace 'yourgithubid' with your
unique GitHub ID or name
• To get yourgit hub id : https://api.github.com/users/your_github_user_name

5. Hosting a static websites on github
• Create A Github Repository
• Once the repository is created, we will go ahead and clone the repository
to our computer. For this tutorial, I will be doing so using the Git CLI.
• To clone the repository, I copy the repository URL from new repository
page on Github and then I run the following [go to the place where you
want to clone using cd command]
git clone https://github.com/werkineh/Coursera-test-
.git
• Once the repository is cloned, I change my current directory to the
repository directory
cd Coursera-test-

6. Hosting a static websites on github …
• Create index.html page in local git repository
• git status command tells as that there is untracked file and ready to be
commited
• git add . Will mark for commiting all files and folder under current directory
• If you see the status now the file ready to be commited will be green
• To commit input git commit –m “My first page” (M for message )
• After this put the file to remote git hub repository from local machine using
git push command
• Every time there is an update following the above steps starting from git
add . .

7. Browser sync
• Makes your web dev’t faster and save you from repetitive manual tasks
such as
• live reloading in browsers when the code was changed, Change HTML, CSS & JS;
automatically inject those new files without a page refresh
• Mirror action when testing across all browsers and device
• Simulate slower connection for testing
• Install BrowserSync
• BrowserSync is an npm package, as such it needs Node.js installed. To install
BrowserSync globally.
npm install -g browser-sync
• Then open cmd in your web directory that your browsing to start watching for file
change then type:
browser-sync start –server –directories –files “*”

8. Browser sync…
3. Start Browsersync
• A basic use is to watch all CSS files in the css directory and update connected
browsers if a change occurs. Navigate your terminal window to a project and run the
appropriate command:
• Static sites
• If you’re only using .html files, you’ll need to use the server mode. Browsersync will
start a mini-server and provide a URL to view your site.
• browser-sync start --server --files "css/*.css"
• Dynamic sites
• If you’re already running a local server with PHP or similar, you’ll need to use the
proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.
• browser-sync start --proxy "myproject.dev" --files
"css/*.css"

9. Browser sync
• It will open up a chrome browser then when ever you make a change
to one of the file, the change automatically synced

10. Using vs code editor for cloning git repository
and browser sync
• It is easy to use git hub with vs code
1. Open the command palette with the key combination of Ctrl + Shift + P. or in help
startup page clone github repository
2. At the command palette prompt, enter gitcl, select the Git: Clone command, and press
Enter.
3. gitcl command in the Visual Studio Code command palette prompt
4. When prompted for the Repository URL, select clone from GitHub, then press Enter.
5. If you are asked to sign into GitHub, complete the sign-in process.
6. Enter your repository url in the Repository URL field.
7. Select (or create) the local directory into which you want to clone the project.
8. When you receive the notification asking if you want to open the cloned repository,
select Open.

11. Using vs code editor for cloning git repository
and browser sync…
• Once you have made a change,
• Click on vs code source control from the left, click on
addcommitgive commentpush the change by clicking sync
changes you can check it on your github repository

12. Resources
• Stackoverflow.com for any help such code, for asking questions
• https://jsfiddle.net/--> for writing, running, sharing, html code online
• Codepen.io many solutuion as well as just like jsfiddle.net, for
asking questions
• Css-tricks.comdifferent tutorials, answers etc…

13. HTML

17. History: HTML

18. Browser war
• W3c stardard site
• Caniuse.com tells you which html standard or code, which js, etc is
supported by which browser ?
• Validator.w3.org/ to check the code is valid or not to work on
browsers
• www.w3schools.com/browser/browsers_stats.asp--> to see which
browser are more popular

20. Lecture 3: Anatomy of an HTML Tag

22. How to specify tags without any content

24. Basic HTML Document Structure

26. HTML Content Model

27. 7 html5 content models

28. HTML Semantic

29. HTML Heading
• <body>
• <h1>This is the Main Heading</h1>
• <h2>Subheading 2</h2>
• <h3>Subheading 3</h3>
• <h4>Subheading 4</h4>
• <h5>Subheading 5</h5>
• <h6>Subheading 6</h6>
• </body>

31. lists

32. HTML Character Entity References

33. • &nbsp;none breaking space, used when we need a part of
sentence or phrase stay in a line together with out breaking in to two
line when at the end of the screen.
• The misuse of &nbsp; is to give space b/n words which is compelety
wrong usage.

35. Link to same page
When we use # in href attribute value of a tag, it points to a section of
the document. The section of a page can be identified using
1.Any tag with id attribute with that section name e.g <section
id=“section1”> or
2.a tag with name attribute of that section name e.g <a name
=“section”>
Application: SPA(single page application )

36. Displaying Images
• Always specify the width and the height of the image to be displayed
whenever possible, so that the browser will allocated width and
height for the image in the page.
• With out specifying the width and the height, it will break the layout
of the page

37. Module 2: Introduction to CSS3
• HTML: Content, structure
• CSS: Presentation
• NB: csszengarden.com takes a web page and redesign css part of the
page with out affecting html content
• They providing styling

39. Browser default style
• For example: h1 has a default style of
• Size: high
• Bold style
• Etc

40. CSS selector

41. CSS selector

48. Pseudo-Class Selectors

49. Quiz

50. Style conflict resolution: which CSS rules
wins?
Same element with different
property specified in different
style definition

51. Inheritance

53. Relative font size

54. Box model
box-sizing: border-box; property is css3 property that can’t be inherited
from body. For example if all element should follow border-box box-
sizing property, and if we put it under body in our css, it doesn’t work,
can’t inherited to the child of body. Therefore, we will use * selector for
it.
body{box-sizing:border-box;} it can’t be inherited for all element
instead,
*{
box-sizing:border-box;
}

55. Margin
All element by default has margin top propery by browser default, i.e the first element we put on the browser will not
flush at the top, to make it like that, override it using *{margin:0; padding:0;}, but with body it doesn’t work just like b4.

57. Positioning element by floating
• In its simplest use, the float property can be used to wrap text around images.
• When we float an element the browser takes them out of regular document flow,
• Element before float element willnot be affected
• Element after float element will be affected and flows around it (if it text, if it is
block level element it will take floated element previous place unless clear is
defined)
• When we use the float property, and we want the next element below (not on
right or left), we will have to use the clear property.
• The clear property specifies what should happen with the element that is next to
a floating element.
• Clear always forces to new line

58. Positioning element by floating
Floating the first element to the right makes
• the other element to move up b/c float disrupt the regular
document flow
• The container height decreases
Floating the all element to the left makes
• The container shorter
• The element after the floated element
(here: the text) to rap around.
Float: none, normal flow
To continue the normal flow
• the element after the float should have
a style clear float
• Here in these case clear:leftremove all
element floating left of the element and
begin new line
It is possible also to clear floating for box # 3
• box#3{clear:left}nothing is allowed to
float left of box#3, box#3 moved to new
line

59. Positioning element by floating , clear:both
Floating the first element to the left and 2nd element to the right
makes
• the other two element to move up
To fix this issue, on element 3 we define
clear, but clear:right or clear:left ? b/c there
element float left and floating right for
element 3. if we do clear:right or left it is the
same and looks like the ff,
Float: none, normal flow
The element 3 should come after this, but
since we clear only from the left, it doesn’t
Case:2 clear:right
But when we increase the height of left
floated element(elem 1), it will be
overlapping b/c we only clear from right only
Case 1:clear: left
• But when increase the height of right
floated element, it is still floating
element 3, shown
Solution case: clear: both
But when we increase the height of left
floated element(elem 1), it will be
overlapping b/c we only clear from right only
3rd elem come after right
floated element only, not
element 1
3rd elem come after both
right floated element left
floated element

61. Relative and Absolute Element positioning
An element with position: static; is not positioned in any
special way; it is always positioned according to the normal
flow of the page: First come first placed according to html code
order

62. Relative and Absolute Element positioning
Container
should be
relative or
absolute

64. Media Queries
• Using css it is possible to produce different webpage layout from
same html, for desktop, for phones etc….

65. Media Queries
Common operator is and operator
[768, 991]

66. Media Queries
Common to all screen, and displayed
when all media queries specified is
false
Specific screen size

68. Responsive Design

72. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
• By default, when browsers display a web page on mobile phones, or
smaller screen, it tries to zoom in or shirks it self so that as much as
possible every content is shown.
• But latter, css updates itself so that different screen sizes can be considered
during development,
• Therefore, to tell the browser not to zoom in specify viewport metatag
• In short it is used to Tells the browser to consider the width of the
device as the real width of the screen and set its zoom level to
1, i.e., 100%, so it's not zoomed in or zoomed out.
• width=device-width don’t shrink, just use device width as it is
• Intial-scale=1no zoom in or out-no SCALING

74. Twitter Bootstrap
• Essentially, Bootstrap saves you from writing lots of CSS code, giving you more time to spend on
designing webpages.
• It’s also FREE! It’s currently hosted on GitHub and can be downloaded easily from the official site.

76. How to use bootstrap?
• Two ways;
1. Download and include it in your project folder, and then link it to your code in
head section for css and in body section for js
2. Using cdn
Include the following CSS file into the <head> tag of your HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
Afterward include jQuery, Popper.js, and Bootstrap’s Javascript file before the end of your <body> tag:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>