From where to start learning web development ?

remi datroa
Jul 15, 2018 · 3 min read

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?

Learning by testing

  • 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
  • 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)
<!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!
<link rel=”stylesheet” href=”style.css”>
  • Add this following line in your style.css
body {
background-color:red;
}
  • Be sur you have SAVE your file ( by cmd + s on mac or ctrl + s win)
this is not save!!!!!!!!
This is saved!
  • To see the result, right click in the middle of your code in the index.html and open with the browser!

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 !

remi datroa

Written by

Concept Provider / web strategist , Art director & web developer

More From Medium

Also tagged CSS

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade