Hi everyone good job to reach here. now we are going a head to the next step in our way.
before you start this is 6 minute youtube video to introduce you to the concept of the semantic web.
-
Read this article to stop using too many divs. Do not be fooled by the scroll bar - the article is not particularly long, but there are many comments below.
-
In this codepen artical you must learn the main structure HTML5 and there tages. [ important ]
-
Signup in freecodecamp. then solve Basic HTML and HTML5 0-28. please do not forget to signup in freecodecamp with your github to save your work and you did not lost it.
- Be familiar with new HTML5 elements.
Here we are reviewing the information you learned it with zeroweb then we will go to learning all about CSS3.
after we start with main topics we have to solve problem with codecamp :-
- basic css 44 point.
- Position Element
- Working with image and background
- Size & Units
- Making your website responsive
- Flexbox
- Grid
- Transforming Element
- Animations
The position CSS property set how an element is positioned in a doucement.
we have three levels to be familer with positions in CSS:
-
CSS Layout - The position Property W3School.
-
Position MDN developer mozilla.
-
Solve Applied Visual Design 52 questions on freecodecamp.
-
after you end all that you can read this artical about difference between absolute and relative.
-
Read this artical as a start to deal with background.
-
After you read first artical read this articals:
CSS has several units for expressing a length.
here we will learn about two type of unite in css absoulte and relative length.
we will start with small artical to understand the main point of using different units in our projects.
This artical should hopefully help explain the difference between the various size units.
The basics
rem units are relational to the font-size value of the HTML tag. For example, if the font size of the HTML tag is 16px (that is the default size for an html document), then 1rem unit is equal to 16px. That makes .5rem=8px, 2rem=32px, etc.
em units are similar to rem units, but whereas a rem unit always references the HTML tag, an em unit is relational only to it's nearest defined parent element. For example, if the div wrapper for a callout is set to font-size:20px, then any child element set to 1em would be the equivalent of 20px, .5em=10px, 2em=40px, etc.
the vw (view-width) and vh (view-height) units are relational to the viewport size, where 100vw or vh is 100% of the viewport's width/height. For example, if a viewport is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the viewport width, or 32px.
Pixels are defined as a single point in a graphic image, and are often tied to viewport resolution. If a viewport is 1600x90, that typically means that there are 1600px pixel columns & 900 pixel rows, with a pixel in each cell. This definition is maybe overly simple when factoring in dpi or pixel density, but can stand as reference for the most part.
There is a lot of potential between the dynamic units (rem/em/vw/vh) to build extremely responsive controls on a page. One common problem with responsive design is ensuring that text displays & wraps properly as everything around it shrinks and collapses. This is mainly because even if you leverage em/rem units, you are ultimately still referencing a static HTML font size, even if set to 100%.
on a monitor that is 1600px wide, 1vw is equivalent to 16px, which is the same as the default font size on an HTML document. As the viewport grows and shrinks, that vw value will grow and shrink relationally with it. This means that you can set a dynamic size value on the HTML tag, reference it at a component parent level with rem, and then match against that value in the child elements with em. That provides a fairly granular level of control, and a set of elements that proportionally resize according to the viewport. Click Here for an example
after you finish the first artical now we will go deeper to learn it perfectly.
-
Rem/Em Units: this artical to understand different between using rem and em and what is the best.
-
this artical to understand the different between using vh & vw or %.
the flex css property set how a flex item will grow or shrink to fit the space avalible in its flex container.
to be familer with felx box you will go to throw this articals..
-
solve question css Flexbox freecodecamp [17 questions].
The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration.
- Grid Intro
- Grid Container
- Grid Items
- Solve question css Grid freecodecamp [22 questions]
there are many of the framworks make your website responsive but here we will learn how to make website response with css only (no framworks). so we will using flex or grid with media queries.
-
This is 15min vedio youtube about make your as intro to media queries.
Sometime when using flex box or grid you want to change your structure app from column to row or from row to column or solve some problem you find it in your design.
now we finishing what we started now we able to go far and go to next level.
the finial points:-
-
Learn Layout is a helpful, lightweight, well-ordered guide that covers a lot of concepts in CSS to help you understand how to create a super basic layout. Additional links are provided in each section for more detailed explanations of concepts.
-
CSS Specificity is an essential guide to understanding how CSS rules are applied and how CSS works in general.
-
Applied Accessibility freecodecamp. (22 point)
Now you learn alot about HTML5 and CSS3 and able to do alot see you in the exercise and projects.
-
Download this file and you will find design to your first project and sould be responsive with small devices.
-
Now we have five challenges from freecodecamp site and after all you ready to challenges:-
-
First Project this project is a sample page as a begin.
-
Second Project learn how to create good forms.
-
Thrid Project Build a Product Page you learn create page to show your product on it.
-
Fourth Project Build a Technical Documentation Page, learn how to create a good documentation.
-
-
Finilay probably you want to create your first portfolio this finial project you create a portfolio for you.