Introduction to Flask
Over the past few weeks, students at The New School University were exploring ways to create a website though coding. In Python: Data, Science & Design, students like myself were challenged to create website using various software outlets like Visual Studio Code and Git Bash. Though it was a challenge to get all of the components of the website, the hard work payed off though the creation of my first website.
Getting Started
Before you begin, one must download Anaconda Navigator on any PC to launch VS Code. Make sure to clear up space on your laptop as I received technical difficulties on downloading the software on to my laptop. Having an folder to store your information will also be useful in keeping your data organized.
Students will be able to:
1. Have an About Me page
2. Have a Home page
4. Add text and images to the body of your homepage
5. Have a toolbar
6. Add images, headings, links, and paragraphs
7. Have a navbar
About Me Page
The code above shows what you need to create your very own About me page. Using the heading tag : <h1></h1> , you are able to create a heading of your choice. The heading allows viewers to know what your page will be about. In this case, this page is About me. I had many technical difficulties trying to transfer the heading on to the web page. I tried to re-load and save the page, but it
The tag, <p></p>, allows you to create a paragraph under your heading page. In this case my heading page clearly states, “Hi, My name is Aminata Gadio a Freshman at The New School University! Welcome to my web page!
The tag, <img scr>, Adds images to the page using links. The link seen above is an image of me from the internet. You can also save a photo from your computer and upload it onto Visual Code. When I first saved the image on to Visual Code, it did not appear on the website. I tried using another image to replace it but still no image. I then found out that I was missing an equal sign before the link. Make sure to check your code before you save it!
After running the terminal in the top left of your computer screen, it will transfer you to the internet to see your code come to life. Above is a visualization of what you should expect on your about me page. The top of the page clearly states About me, a mini paragraph to follow, and an image at the bottom of the page.
Home Page
Above is the code needed to create your very first Home page. Using the same code for the heading in the previous page, the tag, <h1></h1> creates a heading for the page. In this case, the heading is “Aminata’s Homepage.”
The <p></p> tag is does the same task as it did in the homepage. Though the paragraph tag did exactly what I coded in Visual Code, I wonder why the third paragraph is red while the other two are black. Adding images to the bottom of the paragraph can help enhance the page.
The above is a visualization of what you should expect when running the terminal.
Toolbar
Creating a toolbar for my website was the hardest thing to incorporate on to the site. There were many times where the code did not match the outcome when it ran on terminal. The aim for having a toolbar was to search anything in the box, then it would automatically transfer you to another page. The submit button is working, but the search command is needs debugging. Below is the code.
Navbar
My goal for the Navbar is give viewers easier access to pages throughout the site. So far, I only have: Home, Testing, and Hello, to test whether it would work if saved on the terminal. From the code below, there is no link that corresponds with the Navbar titles. Thus, my next steps is to have the bars transfer to another page as soon as it is clicked on.
Next Steps
For the next steps, I will add color, images, and make the site more interactive for viewers. In terms of the Navbar and Toolbar, I will try to debug it so that it does exactly what I say it will do in the code.
