Tuesday, October 15, 2019
Lb#1 My portfolio homepage
In this lab, I created my portfolio homepage for this semester of high school (Senior Year) and plan on updating it in the future. So to create the portfolio homepage, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in <meta> tags that described my webpage and kept web page proportions. After that, I typed in <link> tags and <script> tags that linked CSS and JavaScript files. Next, I typed <div> tags with an id="tBanner" to contain my image banner with <img> tags inside the <div> tags. That image is the top banner of the web page. Secondly, I typed in <nav> tags after the <div> to symbolize that it is the navigation bar. Inside the <nav> tags, I typed in <div> tags with class="navbar". Inside the <div> tags with class="navbar", I typed in 3 divs. The first <div> has class="container" id="cont" onclick="hM(this)" containing 3 empty divs with class="bar1", class="bar2", and class="bar3". In the second <div>, it has class="dropdown-content" id="myDropdown". It has <ul> and <li> tags to make a list of <a> and <p> tags. That makes the buttons for the dropdown menu of the hamburger menu. The third <div> has class="sideBtn" which makes the section for the buttons on the navigation menu. I typed <a> tags linking web pages and creating text for the buttons. I furthermore typed in a search bar using <form>, <input>, and <button> tags. After the <nav> tags, I inserted a <br> tag to make space between the content after the navigation bar. I typed in <div> tags with id="cntnt" to contain the main content. Inside the <div> tags with id="cntnt", I typed in <div> tags with id="leftSideBar", another <div> tags with id="midContent", and <div> tags with id="rightSideBar". I also typed in <br> tags with a style of "clear: both". Inside the divs with id="leftSideBar" and id="rightSideBar", I inserted images with <img> tags as ads. Inside the <div> with id="midContent", I typed in <h2>, <p>, <div>, and <img> tags to put in content. After the main content of the site, I typed in a back to the top button. Underneath that, I typed in <div> tags with id="bBanner". Inside the <div> tags with id="bBanner", I inserted my bottom banner image using <img> tags. Afterwords, I typed in <div> tags with id="footer" and inside it, I typed in <img>, <a>, <table>, <tbody>, <tr>, <th>, and <br> tags that make up a footer with links. Then I entered in CSS code and JavaScript code that made the website pretty and functional. Knowing how to build a portfolio homepage is important to a web designer because it teaches the web designer how to build a homepage that displays the work for their clients and career path.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment