Two Scoops of FrontEnd Web Development HTML CSS

Two Scoops of Front-End Web Development (HTML & CSS) By: Ashkan Ahrabi (9212005) Professor: Mr. Adel Mohammadpour

Differences between Front-End & Back-End • Front-end is also referred to as the client-side and is sometimes considered “web design”, which is involved with languages like HTML, CSS, JS and j. Query. • Back-end of the web industry is often called the server-side and basically it is how the site works, updates and changes, like databases and servers. Back-end developers mostly use languages like PHP, SQL or. Net.

HTML • Short form of “Hyper Text Markup Language”. • It is set of markup tags. Most of these tags are in pairs. • All HTML docs should be written between <html> and </html> tags. • Basic tags: q <head> q <title> q <body> q <h 1> q <p>

HTML <html> <head> <title>Title of the page. </title> </head> <body> <h 1>This is a Heading. </h 1> <p>This is a paragraph. </p> <p>Here is another paragraph. </p> </body> </html>

CSS • Stands for Cascading Style Sheets. • Used for designing the web page. • The most useful and important tag of CSS is <style>. • CSS codes are ending in a semicolon. • Styling can be added to HTML elements in 3 ways: q Inline - using a style attribute in HTML elements q Internal - using a <style> element in the HTML <head> section q External - include one or more external CSS files

Common Styling using CSS • Add a “Background” and style it. • Styling “Fonts” using color, font-family and font-size • Bordering, Padding and Margin

Styling a group of HTML tags using CSS • We use ID and Class to add style to a group of tags. o ID • Cannot start with a number • You should use a hash (#) to add style to a specific id. o Class • Cannot start with a number • Adding style to a class starts with a dot.

How to start learning • It can be a confusing topic, especially since there’s not really an industry standard for what’s always in the front-end and what’s always in the back-end. However, there also a lot of people who work in and understand both the front-end and back-end. Those people are often called “full stack developers”. • w 3 schools. com • pluralsight. com