So in the build your portfolio, the first thing that you're looking for
is the design of the page itself and so we want the DOM tree to correctly present
the page content elements there. We want to see use of symmetric tags
wherever appropriate and that there is a grid and
basic layout used in your markup.
So I guess I would start with the first part of this which says
the DOM tree correctly presented and provided. Ops!
Sorry. Provided...
the DOM tree correctly present the page content.
So what is DOM tree, Poornima?
>> So it's essentially, a document object model is nothing but
an in-memory representation of your HTML page provided to you.
So what it is.
It's like a tree structure and
it arranges all these HTML elements hierarchically.
So that's what it's doing and.
I could actually show you guys how you can represent a dom tree.
So if you see.
I have a very basic HTML document.
A HTML document that has a head.
And the head has a title followed by the body.
Which has nothing essentially.
For now.
And then I close the HTML tag.
So how do I represent this code in the form of a tree?
So what you do is you have the root followed by the parents, and
the siblings, and its child.
So the HTML is the root element in the DOM tree followed by two siblings.
So two children sorry, which is the head and the body.
So these are essentially siblings, the head and
the body are siblings they are the child off the HTML element.
And then followed by the head has another child which is the title and
then the title has a string that is the lead >> The title of the page.
>> Yeah the title of the page.
And then the body just has a string called tag
which is the body.
So as you can see this is how the DOM tree is formed.
So.
However if you represent your page.
If you code in your HTML document and then draw,
Make a DOM tree out of it.
It should, both of them should make sense so.
>> Yes. >> You should be able to map
the DOM tree to a
>> HTML document.
>> Mm-hm. And then map
the html document to the DOM tree.
So we need that to be appropriate that's what we mean by the first part.
Moving onto the next part
It says base element used use semantic tags where appropriate and
this also gets covered little bit in your... In the associated class.
>> That's right.
>> But.
>> Definitely look up semantic tags.
What are semantic tags?
What are non-semantic tags?
And have a equal, healthy mix of both.
Definitely they're wherever required if you feel like you
need to make use of semantic tags.
Go ahead and do it.
Non-semantic tags are just- >> It's fast.
>> Yeah. So somethings, so your div is just
creating an invisible box around the content that you put inside your div.
So that goes as a non-semantic element.
Whereas your header footer your articles.
All of them are similar caption.
>> Yeah.
>> Because they exactly represent what element you
are going to be putting into your file.
>> So those are semantic tags.
>> [CROSSTALK] So.
P tag may just tell you it's a paragraph.
But say you're adding a caption to your figure.
You would want to have a figcaption tag which is semantic.
It's adding meaning.
>> [CROSSTALK] yeah. >> To what you are
>> To what you are written and
It's easier for human to read.
>> Exactly.
>> And it's only for where appropriate It's not where we ask you to completely
code your page with semantic tags we do need an equal that makes very like,
It's something that something that is appropriate for your HTML page.
So yeah.
And the design uses a grid based lay out principles and
this again can be a grid that you build on.
You don't necessarily have to use Bootstrap.
Although using Bootstrap is going to make your life so much easier.
>> Very convenient.
And you'll learn more about framework as you go through the but
very just most of the times just the early phase here.
>> That's true.
But if you do want to get practice it just loading up your own,
go ahead and do that.
We also check for responsiveness.
With the build a portfolio website and very responsive, we just.
What responsiveness stands for is being able to view your page
in a usable manner On different types of devices.
The ones we check for
is a small screen device in the form of the Google Nexus 5.
A tablet, we check it on an iPad.
And a general laptop.
so there and again you want to add tags in
appropriate width at which you want to change the layout of your pages.
In, in your project, but a very easy way to visualize
what things would look like is by using developer tools on your Google Chrome.
And the way to access, and
we're going to share my screen, I guess, [CROSSTALK].
>> So I have my rubric opened right now, and
let's check out Udacitys responsiveness.
So you want to go to that hamburger bar.
Yeah. And then what I do is I go to more tools
and click on developer tools.
It's taking a while but it's there.
So if you Instead, instead of using the mouse, you want to use your keyboard.
>> Mm-hm >> On a Mac you would go with
command shift and I together.
>> Mm-hm >> And on Windows, or,
I believe,- >> Control.
>> Even on Linux you would go with control shift and i together.
>> Mm-hm, yeah.
And then.
As you can see, you can see a lot of tabs opening up.
Oops, that shows a lot of code and console logs.
But let's see.
Okay, so.
Do you see this little, mobile device.
I'm going to click that.
So what it does is it automatically changed.
You know, and your screen size have to move the.
Yeah. And As you can see the device tab shows
you all of the devices that you can check your page with.
So I'm going to check the Google nexus five.
And then what I'm going to do is, it's showing me an error that says,
you may have to reload your page for
proper user agents, so I am going to reload this page.
Oops, okay.
>> And that's the way you're going to see it on a mobile?
>> Yeah. >> And then.
I'm going to shift to an Apple iPad device and see how it is.
I like this view better [LAUGH] >> [LAUGH]
>> So yeah, I'm going to reload it
again.
Just to see how it's rendering on an iPad.
And yeah this is how it looks on an iPad so and.
It's as easy as this to actually use the Google developer tools
to actually view your responsiveness of your website and I think.
All the developers all the course developers,
all of the coaches believe that start designing for smaller devices first.
Yes. >> And
then go up, to tablet's and desktops.
So, always think about smaller devices, when you are with the coding and
your web page.
>> There are more things we check for
in the first of which is separation of concerns.
And by that we mean we want to check whether you have completely separated
your style, which is CSS, from the structure, or the HTML.
And we want to do this, honestly, to just avoid confusion.
You want to have that separation between style and structure.
And moving forward you learned that.
It's an industry standard.
>> Mm-hm >> You do that?
So. >> That's right.
>> You want to add anything to that, Poornima?
>> No. It's perfect.
>> [LAUGH] >> Yeah It's good enough.
And it's very straight forward.
And the rubric.
So your structure is your HTML and your style is your CSS.
So yeah just make sure they are in different files, and they don't get mixed.
>> Hm-mm.
>> Mixed. I know that there are a lot of ways to
actually put in CSS inside your HTML just
by adding your style tags- >> Style, mm-hm.
>> Or your script tags for your Java Script inside your head element.
And that's not usually a best practice because you are reading CSS format
code at the beginning and then you shift to HTML.
All of a sudden.
And it's just like,
to see it's not very pleasant it's not a very properly organized.
And that's all we want you to separate it into different files and
remember to have like a hierarchy in your directories that you create.
So have a CSS directory where all your CSS files go.
Right now for this project you might have only one CSS.
And one HTML file and no JavaScript files, but it all is always,
always cleaner to see code which is properly structured.
So you have CSS folders and CSS files go in there
JS folders, JS files go in there. Images
Folder where your images go in and then in your root directory you have
only your index.html or whatever you name it as.
>> I guess the biggest chunk of both this project is the good quality.
And what we check is whether the code passes HTML and CSS validators,
and is formatted in a way as stated by the CSS style guide.
And basically the style guide was developed based on industry standards.
So we want you to get started with good habits.
>> Most of the rules on that style guide are pretty straight forward.
There are some things which are very important and
which you might not understand while getting started.
It's very difficult to detect those.
So I guess we would get started with telling them how to
detect these sort of mistakes in their code.
And these are formatting mistakes nothing logical, right?
Your code might work fine, might render great on the web page because it's
very smart, web pages are very smart.
They can [CROSSTALK] The main character.
>> [CROSSTALK] Typo, yeah.
>> They can render with mistakes, like even if you don't close tags or
some sometimes they would render right.
But there is a lot of things that are missing in your formatting style in,
that might be uncaught sometimes and that's.
I can understand that that.
Totally happens to all of us and.
>> Yeah.
>> It's these rules help us understand, you know,
where we can do better in writing code.