This web page was built for a project for a pre-apprentenship program with dev/mission. I choose a furniture website for displaying products and acquiring information about the company
← README.md: That's this file, where you can tell people what your cool website does and how you built it.
← index.html: This is the main HTML page for the site.
← product.html: This is the Product page for the site.
← style.css: CSS files for all content.
← script.js: Javascript code for fetching product.
← form.js: Javascript code for backend for the forms.
Glitch is a friendly community where millions of people come together to build web apps and websites.
- I set the document type to HTML 5, it's the standard right now
- I set english has the default language The Head (metadata)
- I set the charcter encoding To UTF-8, it's also the curreent standard
- name =viewport, allows your webpage to be responsive on differnet designs
- rel =icon, browser tab icon
- Attached a bootstrap link for css framework which is hosted on a content delivery network Bootstrap has to be the first link cause it take priority, so your stylesheet dosen't overide it You can use important! on your css to override bootstrap css You can also store bootstrap locally on you computer if you need offline access, instead of using the CDN
- I have my title line
- Then i have links to my js file and stylesheet css. js helps web page becaome more interactive css help with the color, borders, height and so much more
- We have our Body(main part of the HTML file )
- As far as i know most webpage start with a NavBar and for conveience sake i just used a bootstrap Nav Bar
- nav - is just HTML semantics for navigation (prioritize accesibilty for users, what content are they going to be navigation to)
- class - (are used to group elements that you want to apply same characteristics to)
- In the nav we have class navbar navbar-expang-lg bg-body-tetiary
- navbar is just bootstrap default styling
*-expang-lg helps with responsiveness on differnet devices - body-tetiary - is the colour
div - lets us group elements and we can apply specific styling or such. Think of it like a container
*aria - Accessible Rich Internet Applications. This allows users esppecially users with diasbaility to be able to understand your feature.
The last section in the navbar is very essential, We have our links *We have couple classes here, even me i am getting lost in the in the source with all the classes bootstrap used *The collapse and navbar- collapse, still boostrap functionality
-
- Groups the navigation link
- nav-link is for our various link to different pages or sections in your web app *We also used an id -which helps us specify a unique element
.nav{ display: flex - turns navbar into a flex property justify-content: space-between - another flexbox froggy tool } .nav ul (for all the link items) {gap: 1.5rem - adds spacing for just the links on a small screen margin & padding = 0 } Added a media query for larger screen (tablet and desktop set the gap to 15rem) .nav a (controls the individual nav links { font-size(size of letters), font-weight(density of letter), color, transition(animate between 2 states of css property) } .nav a:hover {color change change cursor from point to hand } .nav-link.active (active shows which web page you're currently one and it's bolded so users could know what page they're on{ font-weight: bold; /* Makes the link text bold */ } .navbar-collapse { flex-grow: 0; Prevents the collapsible section from growing unnecessarily }
*I will change the backgroung color to black and text white
-We have our main body -We have the Welcome video, it's eyecatching and draws people to the website. It is in a class=hero
py-o ensures no spacing between this container and the one on top or at the bottom(row is a bootstrap thing, needed for the 12 colum grid system)