I was opportune to give my first talk at Insight 1.0. The event was organized by me and colleague.
I was able to teach the audience little things about the web, how websites are built. We also went through HTML and CSS.
parties which are web clients and web servers. The communication is done by sending HTTP (Hypertext Transfer Protocol) requests from web clients to a web server which returns a HTTP response. Web clients are mostly browsers while Web servers are computers which stores data in the cloud. According to https://techterms.com/definition/web_development/ Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management.
- Frontend Development and Backend Development. Frontend Development majorly focuses on how a website looks and how it interacts with users. It deals with presentation. It is more based on the client side. Backend Development focus on how a website should work. They refer to the behind the scenes of websites. They deal with the server side and how informations on the website are stored.
comprises a set of instructions that produce various kinds of output. Programming languages are used in computer programming to implement algorithms. Every programming language has its own syntax.
languages each with different syntax. These are the three major languages used today in web development. Many other languages (or frameworks) have been created from these languages to make web development easier. E.g HTML - Ionic framework CSS - Bootstrap framework Javascript - React, VueJS
This illustration of HTML, CSS and Javascript for building a house was from Intro to Web Development in Frontend Masters. HTML consist of the blocks, wood, roof, basically the contents of the building. CSS determines the different styles which are applied to the contents to make the building firm and attractive. i.e CSS accurately determines the position and width of each blocks, the color of the roof, the particular way a content should be displayed and so much more. With HTML and CSS, you already have a building. Javascript may not be necessary. Javascript comes in when you need interaction in your building. What does interaction mean? When the user opens the door with a key, what should the door do? Open right? Interaction. The HTML and CSS just defines the structure of the building, but there's no response to action. When you go to websites, you'll see things such as click on something, then popup or once a user scrolls to a particular section of the page, an item fades in. Those are called interactions.
one with the extension .html. When such file is opened by a browser, it is rendered as a web page. To edit the contents of the file, editors are used. e.g Notepad, Sublime Text, Visual Studio Code, etc. HTML is the standard markup language for web pages. After editing, the file is saved, and after refreshing the website, the changes are effected. The building blocks of HTML are elements. In reference to the house building, elements define the type of blocks, type of windows, type of doors, etc which would be used in constructing the house.
<title>Title of Document</title> </head> <body> <h1>Welcome to my page</h1> <p>This page contains awesome contents</p> </body> </html> This is the standard structure of a HTML Document. Depending on the text editor used, words used may be colored in different ways. HTML
declaration that defines the document. We tell the browser how to render our content. This definition signifies HTML5. This is the latest version of HTML. In other versions, we would just skip this part and go straight to the code. <html> This is where our HTML page starts from. It refers to the root element of the page. Everything between this tag and it's closing tag </html> is what the browser will render. The extra lang attribute defines the language of the document - in this case, english (en) <head> This part of program specifies properties and features of our page. The contents here are not displayed on the browser. <title> This specifies the title of the page. This is what is displayed on browser tabs and also when you search google for pages, this is what shows. Other tags can be included in the head such as meta tags which describes our page. <body> This part of the program contains what will be displayed in the browser. <h1> and <p> They represent tags which would be explained in the next page. HTML
still being added as the language keeps upgrading. But, you would only need few of this. Examples are, <h1>, <p>, <div>, <a>. etc - These are few of the major tags. <h1> represents headings. It flows down to <h6> which is the least header. When they are rendered by browsers, they usually become bold and slightly different in size compared to normal paragraphs. Usage <h1>The title of my page</h1> <h2>A subtitle in my page</h2> <p>Paragraph</p> <img src='image.jpg' alt='A small house'> HTML
some others which are just void tags. As seen in the program above, open and close tags include <h1>, <h2>, <o>. Void tags includes <img> Other examples of void tags are <hr>, <input>, <br> The reason they are void is that, normally, it is not suppose to have any content. Also, there are semantic and ordinary tags. Semantic tags are tags that also adds meaning to the contents or children that it holds while ordinary tags have no meaning at all. (More on children would be discussed later) Examples of semantic tags include <strong>, <em>, <h1>, <p> Ordinary tags include <div>, <span>, etc An instance of a tag is called an element. <h1> is a header tag. <h1>Website</h1> and <h1>Development</h1> both used in a webpage are called instances of the <h1> tag. Tag and elements can be used interchangeably. HTML
<head> and <body> tags are referred to as the children of the <html> tag. - the <title>, <h1> and <p> tags are referred to as the grand children of the <html> tag. - the <head> tag is seen as the parent of the <title> tag. - the <html> tag is seen as an ancestor of the <h1> and <p> tags. - the <h1> and <p> tags are considered siblings - and so on. This terminology is also helpful when applying styles. HTML
you locate certain areas of your codes easily. You have a 10-line code and feel its unnecessary to put any comments, but what if you like up to 500 lines of code or more. That's where comments come in. They are not part of the program itself when the program is running, but they are always in the source code. You would also need comments to remember the exact thing you did while writing your codes. You may have created a function but coming back later, you discover that you do not know what your function did at that exact time, that's where comments come in. Another reason for commenting your codes is for easy collaboration. Your code may require outside contributors but if not well commented, it would be stressful for someone to understand your code. Different programming languages have different syntax for commenting codes. As for HTML, we have; <!-- This is a comment where I type whatever I like --> The web browser does not render this part of the code. It is ignored. HTML
They provide extra information about the element. For example, a void tag like <img> has attributes such as scr (source), alt (alternate text), width (width of image), height (height of image) and so much more. They can be used like, <img src='images/house.jpg' alt='A house' width='10px' height='20px'> Almost all tags have: * style attribute - From here, you can also pass some inline CSS stylings. * class attribute - which gives it a special identity of which you can also apply styles or target with javascript. * id attribute - same function as class. The difference is that a class can be repeated in various parts of the page but ids are unique for every page. HTML
times that proposed names would be used. These names can be variables, classes, ids and so many more. But, there are many ways to naming. The four major naming conventions (especially for web development) are - lowercase: in this convention, all characters in the given name are small letters. - under_scores: here, words combined together to form names are separated with underscores ( _ ) e.g big_color_codes - camelCase: here, the first character of combined words are capitalized except the first word while other characters are small letters. - PascalCase: similar to camelCase but the first letter in the first word is also capitalized HTML
Example could be filling a form, subscribing to a newsletter and lots more. Inputs are gotten from users with the ‘input’ element. It is also a void tag. There are different types of inputs - text, number, file, email, submit, and so much more. <input type='text' placeholder='Enter text here...'> <input type='text' value='Edit this text'> <input type='number' max='40'> The attribute `max` ensures that the input value does not exceed 40. You could manually type a number larger than that but it would be an error. <input type='file'> <input type='email'> HTML
is called an anchor tag which helps users navigating through different pages. The href attribute specifies the destination which that link (when clicked) would redirect to. The title attribute contains extra informations which would be displayed when the user hovers on the link. The extra information could be a summary of the destination. And the element itself, ‘Link’ which represents the item for the user to click. Links can also be images, e.g <a href=’destination’ title=’Title of destination’> <img src=’source/of/image.jpg’ alt=’Description’ /> </a> The image here has be defined as a link. HTML
links redirect to another webpage while internal links redirects to specific sections of the same webpage. Example of external link <a href='page2.html' title='Information on page2'>Page 2</a> Example of internal link <a href='#section5' title='Information on section 5'>Section 5</a> <section id='section5'> <h1>Section 5</h1> <p>Some random stories about section 5</p> </section> When the section 5 is clicked, the window would scroll to wherever section 5 is located (be at it the top or bottom). The id is used to give section 5 a unique identity. (One of the reasons why id has to be unique.) HTML
paragraphs - links - images - buttons - lists - Inputs - forms As we have seen, HTML defines the structure of our document. More like the skeleton. The way we put the elements in our file determines how they would be displayed. But there is no proper presentation of the elements. A house is not just built by placing blocks on each other. How do we go about this presentation? HTML
with the extension .css. It is used to define how elements on a page are displayed. Its duty is to add beauty to a website by creating layouts for contents, adding colors, creating animations, etc. The main syntax is element { property: value; } We have the element which we are targeting, the property of the element we would like to set a value for, and also the value. Not all properties can be used for all elements. Some elements are compatible with some properties while others may not be. A good knowledge of the properties available for an element would be required but effective manipulations.
ways. - Inline Styling: The use of CSS as attributes of HTML elements. - Internal CSS: The declaration of CSS styles in the same document as the HTML file. - External CSS: The declaration of CSS styles in a different document. In the following examples, we’d look at some CSS properties for HTML elements and how we can manipulate them. CSS
attribute for almost all tags. Therefore, you could apply styles inline for those tags. For example, a simple HTML page with some styles. <!DOCTYPE html> <html lang=’en'> <head> <title>Title of Document</title> </head> <body> <h1 style=’text-align: center; font-size: 40px; text-decoration: underline;’> Welcome to my page </h1> <p style=’color: purple; font-size: 25px’> This page contains awesome contents </p> <img src=’image.jpg’ alt=’A good looking lady’ style=’height: 45px; width: 70px’> </body> </html> The HTML file looks too jam packed with different style attributes. An alternative to this is an internal CSS approach. CSS
different style declarations (mostly found in the head section of the same HTML page). i.e <head> <style> h1 { color: orange; font-size: 50px; } p { text-align: right; } </style> </head> <body> ... </body> What this code does is to: - select all h1 elements found on this particular page, and transform the color to orange and the size of the font to 50px. - select all p elements found on this particular page, and align the texts to the right. CSS
a different file which would be linked to the current file (or any file that requires it). The extension of such file would be `.css`. In the HTML file at the head section, we then have: <head> <link rel='stylesheet' type='text/css' href='path/to/file/filename.css'> </head> This tells the page to link the css file (with the name 'filename') which is a stylesheet and has a type of 'text/css' to the html file. In our .css file, we could have: h1 { color: #ffffff; background-color: black; } div { width: 200px; height: 300px; background-color: #556685; } This makes all h1s in the current page possess the color of white (#ffffff) and a background color of black. Also, it makes all divs have a width of 200px, height of 300px and background color of #556685; CSS
file. This is important so that one could easily differentiate between the pure HTML contents and pure CSS styles. The little flaw in this selection method being used is that all our styles affect all the elements of those types in that page. What if the intention was to apply different stylings to different divs or different headings? CSS
</div> <div> <h1>Another header</h1> <p>Another paragraph to be styled</p> </div> <p>Extra paragraphs</p> <p>Random paragraphs</p> If only <p> tags in <div>s were to be styled, the CSS could be div p { color: brown; font-size: 100px; } This method will look for div tags first, then apply the styles to the p tags. Note: This also applies to any grandchildren <p> tags CSS
the children elements could inherit some styles from the parent. For example, if this was added to the styles; div { text-align: center; } All children of the div element would be aligned to the center. This can be overwritten though by specifying a text-align for a child i.e div { text-align: center; } div p { text-align: right; } Here, the h1 element is still at the center alignment because it wasn't overwritten but the paragraphs are located at the right. CSS
can possess the class identity. Multiple classes can be specified for an element using space. HTML sample <div> <h1 class='redColor big_Header'>First DIV</h1> <p class='redcolor MediumText'>Red text</p> <p class='yellowColor'>Yellow text</p> </div> <div> <h1 class='redColor'>Second DIV</h1> <p class='redcolor MediumText'>Red text</p> <p class='yellowColor'>Yellow text</p> </div> Note: The four naming conventions mentioned earlier are used here. CSS
by the class name. The CSS code for the HTML file above could be .redColor { color: red; } .big_Header { font-size: 50px; } .MediumText { font-size: 25px; } .yellowColor { color: yellow; } CSS
are loaded on the screen - Div 1 with header element ('First DIV') and - Div 2 with header element ('Second DIV'). <h1> in first div possesses the format of red color text and font-size of 50px. Followed by the first paragraph with red text and font-size of 25px. Lastly, the second paragraph with yellow text. <h1> in second div possesses the format of only red color text. First paragraph with red text and font-size of 25px. Second paragraph with yellow text. CSS
This works the same way with classes. The only difference is that multiple ids cannot be present in a web page. All ids in a page must be unique. HTML Sample <button id='submitButton'>Submit</button> ids are specified in CSS using hash(#) followed by the id name CSS Sample #submitButton { height: 30px; color: white; background-color: green; width: 100px; text-align: center; } When the page is loaded, we have a button with a height of 30px, color of white for the text, background-color of green, width of 100px and also the text inside the button aligned to the center. The default alignment is left. CSS
mentioned in the HTML section, they are used for navigations in the same page. It is advisable to use only classes for stylings. • When two values are declared for a property in a selector, the last one has the highest priority. e.g p { color: red; color: green; } - All paragraphs would be green • The parent and children method can also be mixed with the class method or id method. e.g .mainSection div { } - The styles declared here only affect divs which are children (or grandchildren) of elements with the ‘mainSection’ class. CSS
selectors. The selectors are seperated with commas. E.g .headSection p, .footerSector p { font-size: 50px; color: purple; } .headSection p { text-decoration: none; } .footerSection p { border: solid; } - What this style does, is that it defines the same values of font-size and color for the two selectors. Then, it individually defines the text-decoration of the first selector and the border of the second selector. CSS
CSS also provides a means of doing so. Comments are done in CSS with this syntax; For single line /* [the comment] */ For multiple lines /* [some comments] [second line] [third line] */ Whatever text is found between these symbols (/* and */) is not interpreted by the browser. CSS
special states of elements. The syntax for using pseudo-classes with selectors is; selector:pseudo-class { /* Styles */ } Examples are: hover - the state when a mouse pointer is over an element active - the state when an element is activated (usually when the user clicks on it) focus - the state when an element is focused. it is different from active. An element can be on focus when not active and making an element active does not drive focus towards it. visited - the state when an element has been visited by the user. The default style for links is that the color is blue, and when visited, turns purple. With the css class, you can edit it. disabled - the state when an element is disabled (e.g buttons, when they cannot be clicked) They can be used with a selector to specify a style when a state occurs. E.g button:active { /* some styles */ } The styles declared here only become used when the user clicks on that button. CSS
be applied for different screen sizes (such as phones, tablets and desktops) The syntax is @media [media-type & logical-operators] ( [media-feature] : [value] ) { /* selectors and styles */ } E.g @media only screen and (max-width: 800px) { /* selectors and styles */ } This defines our css such that every other styling can be applied, but once the screen size becomes 800px or less, this new styles will be applied. Check out other media types, logical operators and media-features here. One thing to note is that not only this styles would be applied. Other styles from outside the query would be applied but here, you can overwrite the former styles declared. Every other styles that are not overwritten would remain the same on the page. CSS
It does this by selecting element and modifying the properties attached to them. Other terms in CSS - Box Model - CSS Flex - CSS Grid - CSS 3 - Bootstrap Styles can also be done conditionally as seen in ‘Media Queries’. Media Queries also helps Responsive Designs in ensuring that users in various kind of browser screens are not deprived of the feel of your website. CSS
kuroppe1819
faithandbrave
akkie76
bkuhlmann
tatamiya
77web
luisasofie_xoxo
joergneumann
kentaroutakeda
ruzia
nealle
cromwellryan
jlugia
malarkey
shpigford
brianwarren
edds
jacobian
rmw
3n
mclloyd
andyhume
ammeep
