- Read this first: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
-
Objective: Now that you have learned about Data Structures we're going to be going over one of the most commonly used data structure today in Front End Development, The Document Object Model or DOM.
-
Your goal here is to learn as much as you can about HTML, CSS and how to use JS to interact with elements in a DOM Tree.
-
You're going to be cloning our LambdaSchool.com webpage. (NO jQuery at first. You'll get to that later.) Try to reproduce it from scratch using whatever materials you'd like.
-
Tool suggesstions
- Chrome Dev Tools
- For styles and mark-up ideas CodePen CSS-Tricks
- For DOM interaction stuff like Drop Down Menus etc, try and do as much as can with CSS first.
- After you've achieved all the animations on the site you can using CSS go ahead and
First and foremost we want you have fun! Please take this as a time to research a lot of this stuff together in your partnershps. Being able to have HTML and CSS chops can be just as important as understanding the fundamentals of the JavaScript programming language. It will be something (regardless of if you work back or front end in your career) that you'll have to deal with at one point or another and this is the only sprint we have designed around learning these concepts.
<html>
<head>
<link rel="stylesheet" href="">
</head>
<title></title>
<body>
<div></div>
<p></p>
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<img src="">
<a href="www.google.com"></a>
</body>
<script></script>
</html>
- app --
- -- index.html -> mark-up goes in here
- -- styles.css -> this is your stylesheet
- -- app.js -> all of your javascript in here
- If you've gotten this far go ahead now and research jQuery! A fun DOM interaction library that is still very commonly used today. Go wild refactoring your JavaScript file to use it and take advantage of it's power!