From where to start learning web development ?

Essential steps HTML > CSS > JAVASCRIPT , you also need to have a tool like a text editor and this is it.

Free Online course codecademy, you can learn from every where any times you want.

Now you know how to start!

— How to find the best tutorial?

Google and youtube give a bunch of coding course or tutorials, just use the right keyword and following these steps!!

  • what html basic structure ?
  • how css works ? , what css?
  • how javascript works?
  • Create on your desktop a folder and name it ( right click on your desktop > new folder)
  • Open sublime text
  • Drag and drop your folder in sublime text
  • In sublime text right click on your folder and create the first very important file index.html. Than an other right click and create style.css
Image for post
Image for post
  • Click on the file name in sublime and copy and paste this following code! (be sure on bottom right, “in sublime” html is well selected for index.html and css for style.css)
Image for post
Image for post
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>
  • Now connect your style.css with your index.html by adding this line in the head!
Image for post
Image for post
<link rel=”stylesheet” href=”style.css”>
  • Add this following line in your style.css
Image for post
Image for post
body {
background-color:red;
}
  • Be sur you have SAVE your file ( by cmd + s on mac or ctrl + s win)
Image for post
Image for post
this is not save!!!!!!!!
Image for post
Image for post
This is saved!
  • To see the result, right click in the middle of your code in the index.html and open with the browser!
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Some tips

Free Online course codecademy, you can learn from every where any times you want.

Sandbox

Codepen.io, glitch.com, github.com

STEPS AGAIN !!

HTML > CSS > JAVASCRIPT

After that you can go much deeper and think to mobil and responsiveness of a web site with some frameworks like bootstrap. Always begin by reading the documentation and learning by trying !

Concept Provider / web strategist , Art director & web developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store