A note on the schedule, we are going to speed through the essentials the basics then get into advanced topics. We will continually reenforce the basics though. You may feel later like you’re having to revisit a lot of the same basics but you will have a continual desire to keep learning rather than boredom staying on the same topics for a long time.
Where are you at, break down the example.
1. What did you learn from doing Java?
2. What about the frontend work the designers do are you looking to learn?
3. Are you looking to better design to build?
4. Code versus script versus markdown versus markup.
Good development, no discussion, has to happen. The fundamentals are direct code editing, not relying on WYSIWYGs, and versioning work as development progresses. As well, referring to example code and copying example code are totally acceptable but
1. Text editors.
2. Pseudo-editors, Zeplin, Dreamweaver.
3. Git for Versioning.
We’ll get started with Sublime, and GIT.
Once downloaded and installed, set up a www area. We aren’t going to get into *AMP’s or servers (unless you’d like to.) All the frontend pieces we are working with now will work no matter what platform they are on or where the files live.
Project setup, boilerplates.
There are so many ways of getting started without starting from a blank piece of paper. In fact using a boilerplate or bootstrap can keep you from making mistakes by not including essential pieces such as favicons or other necessary pieces.
That said, we will start from a blank page now and you should use a blank starter page your first few times so you can reenforce the concepts.
Everything we are doing, and most web development in general, is just made up of text.
Tags. The foundation of everything. Open and close. Open and close. Always close.
HTML is carrot open < and carrot attributes with name equals = and open quotes “ and close quotes “ close > then open < forward slash / and close >.
A word on quotes.
Single and double quotes are more or less interchangeable. “ ‘ This does change now and then but for all intents an purposes here, you can use either BUT keep it consistent!
HyperText Markup Language.
HTML is what everything ends up as. In fact, HTTP is just HyperText Transfer Protocol. The web got really popular because it’s all the same on the frontend. The backend, that can be literally anything.
Long time ago, we used tables, no longer. Never lay things out in tables or we are done. We use divs, or we use proper tags laid out with CSS.
A few words on CSS3 and a few more on HTML5.
CSS gets added to now and then but will mostly stay the same. HTML5 is a fairly dramatic change, but you only have to use as much of the advanced features as you’d like.
Frontend Class 02
1. Header, footer, homepage.
2. Necessary for setup, and for accessibility.
3. Common, but not essential pieces. Sidebars, comment areas, so forth.
Dynamic versus static.
So we know about the page areas now, what parts change, what parts stay the same. And why. This is important for preproduction.
Dynamic elements can either change on page reload or change right before your eyes. These roughly translate to asynchronous and synchronous. (As you learn more, SYNC and ASYNC are more complex but this a good way to learn the overall ideas of them.)
We can spend a lot of time on CSS. It wouldn’t be wasted necessarily but you can learn a lot of this on your own via trial and error. In this case, skipping the basics probably won’t hurt. Lets look at SCSS (install Koala.)
These are the two main tools, you will be going back and forth between them constantly.
HTML and CSS work in concert, good HTML Makes CSS far easier to work with. Bad CSS is an enormous pain to untangle.
Let’s write some simple HTML and CSS.
Head and Body.
Then header and main.
Then move to CSS.
html, body, header, main, then nav, then hs, then ps.
A thought, APP versus Web Page. Hint, they are almost the same at this point so just think of everything as basically the same.