In this module, we made our own website from scratch using HTML, CSS and Javascript. We have to constantly update our websites with the knowledge gained throughout the module. This website will mainly serve as a documentation of the projects we have done. It allows us to log our achievements and mistakes in a way that is easily accessible.
Experience
Website Development was a new experience. At first, coding HTML, CSS and Javascript seemed complicated since there are a plethora of properties to learn and use. I had to watch alot of tutorials trying to make my content look a certain way without copying their codes entirely as I believe everyone has their own way of coding. Eventually, I was able to understand the properties' function and managed to find an efficient way to code.
Being Ambitious
I wanted my website to look minimistic and professional as I favor design very much. The most challenging part is having responsive layouts. I had to use special properties such as @media and flexbox to change the layout when it is at mobile resolution. Having responsive layout can be useful when I am changing lines of code while having full view of the content in a split screen.
The Basics
Structuring
Basic HTML
HyperText Markup Language (HTML) is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content.
Structures
Represemts the layout a webpage: header, nav, section, footer
Elements
Represents is everything from the start tag to the end tag and they can be nested
Styles
Add styles to an element such as color, font, size and text alignment
Hyperlinks
Create links to other pages and locations within the page
Tags
Classes and IDs can be referenced easily to style elements in CSS code
SVGs & Images
Scalable Vector Graphics and Imgaes can improve the design and appearance of a webpage
Styling
Basic CSS
Cascading Style Sheets (CSS) describes how HTML elements should be displayed. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Box Model
Wraps around every element. It consists of: margins, borders, padding, and the actual content
Media Queries
Apply different styles for different media types/devices to make the web design responsive
Display
Most important CSS property for controlling layout of the elements
Position
Types of positioning method used for an element: static, relative, fixed, absolute or sticky
Function
Basic Javascript
JavaScript makes HTML pages more dynamic and interactive. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Select Element
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
Event Target
The addEventListener() sets up a function that will be called whenever the specified event (click) is delivered to the target
Features
Navigation Bar
Navigation Bar is very challenging to do since it is the first part of very webpage. The dropdown bar is quite complex at first since it requries a hover selector :hover to display additional hidden links when the cursor moves over. The links are placed in a horizontal layout, similar to most other websites with highlighting features when hovered. A menu button is featured which will be future discussed in Toggle Button.
Flexbox
Positioning elements within a wrapbox can a tedious process especially when a webpage requires multiple different designs. Thankfully, this is easily manageable with the help of the display property. Setting the value to flex introduces additional useful commands that arrange the content easily. Content can bearranged in rows, column. Moreover, they can align, justify, reverse and wrap the content, thus this property can create creative layouts such as grids and alternating series of elements.
Toggle Button
Adding a toggle menu button for mobile screens of <1200px. This requires a Javascript code to call out a function toggle whenever the menu button is clicked. When the event is triggered, the menu button dissappears while navigation bar and close button is displayed and vice versa.
Responsive Website
Making a responsive website can be easily done with a proper webpage setup. The webpages consists of 3 different heading and paragraph sizes each. In addition, it includes a wrapbox used to keep contents in every section aligned with each other, with paddings to prevent texts from touching the edges of the screen. Flexbox properties that changes the layout of elements and @media at predefined resolutions to change the each of the headings and paragraphs text size. This makes the website feel neat and professional. Try viewing this website on your phone.
Wrapbox
1360px max-width24px padding
Font Families
Satoshi-BoldInter
Resolutions
Any width<1200px <900px
Heading Sizes
60px36px24px
Paragraph Sizes
20px16px14px
Additional Resources
Ionicons
I use Ionicons to improve the appearance of the webpage
