Posts

2023 WDB : Introduction to Bootstrap 4 & 5 -- Day 10

Image
  I continued learning about Bootstrap 4 & 5 today. It is an interesting topic but it is difficult to make sense of the lessons if you are not doing the project specified by the professor.  She would like us to develop a platform called "Tinderdog"; however, I prefer to continue to work on my fan page. I added a navbar to the website today.   In order to get the dropdown menu to work, I needed to add the Popper and JS script tags. I will need to continue to work on the navbar but at least I am making daily progress.

2023 WDB: Introduction to Bootstrap 4 -- Day 9

Image
In this next section, we are covering Bootstrap 4. It seems that it will be a very complicated subject so I will be working on the topic in parts. Today, I will be installing Bootstrap and playing with some of its styles. On going to the Bootstrap section, I noticed that the newest version is Bootstrap 5 and not 4. The Bootstrap 5 link for CSS < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous" > This was the first page before Bootstrap 5: This is the same page after Bootstrap 5:

Frontend Web Development Bootcamp Course (JavaScript, HTML, CSS) - Day 1

  I saw this course on YouTube and became very interested because, unlike other courses on web development, this course starts with JavaScript (JS).  I have tried to learn JS before but I went back to Python.  Angela Yu's WDB teaches JS but she starts with HTML and CSS first which is unlike this course. So what is so important about JavaScript (JS)?  From content I found on the web, I noticed that it is more important and difficult to learn JS rather than HTML and CSS.  Also, I have decided that going forward I want to focus on Python and JavaScript. JavaScript Variables  Note: console.log() and FireFox browser  Comments : // and /* */ - const TAX_RATE = 0.08; --- constant variable - let hello_people = 'Hello World !"; - var time = 60;   ... don't use "var" use "let" - JS style guides: Naming conventions (example: camelCase) Note: stopped the video at naming conventions -> 1:21:29

Aprende HTML ahora! curso completo GRATIS desde cero -- HolaMundo -- Part 1

Image
  In order to improve my Spanish comprehension and learn more about HTML, I followed a tutorial by HolaMundo on HTML. The course is 1 hour and 30 minutes; Today followed the first 30 minutes of the course. Below is what  was covered in the first part of the course:   <!-- contenido de nuestra web -->     contenido de nuestra web     < h1 > Mi primer heading </ h1 >     < h2 > Mi segundo heading </ h2 >     < h3 > Mi tercer heading </ h3 >     < h4 > Mi cuarto heading </ h4 >     < h5 > Mi quinto heading </ h5 >     < h6 > Chancito feliz </ h6 >     < br >     < p > Chancito feliz está muy feliz. </ p >     < p > Chancito triste está muy triste. </ p >     < hr >     < h2 > Chancito felipe. </ h2 >     < p > Texto u...

2023 Web Development Bootcamp (WDB): Intermediate CSS -part 4 Day 8

Image
  I have decided to abbreviate the class to WDB which will make it a lot easier to mention and reference. One of the topics discussed today was "Adding Content to the Website". Although the project is a personal website, I have decided to continue developing the Real Madrid fan website. Topics covered today: - CSS Sizing - CSS Float and Clear These topics were interesting but were not really related to my fan webpage. I will come back to these topics at a later date. The New Webpage: The big difference between this website and the earlier versions is that the trophies photo is now centered.

2023 Web Development Bootcamp : Intermediate CSS part3 - Day 7

Image
  Changes : I made changes to the header of the website yesterday. Here is the new code: #logo1 {     height : 250px ;     position : relative ;     left : 100px ;   } .team {     height : 250px ;     position : relative ;     left : 150px ;     top : 10px ; } #logo2 {   height : 250px ;   position : relative ;   left : 200px ; } And here is the new website: Absolute Positioning A lot of info on positioning but no real connection to the personal website. Centering Elements with CSS note: text-align: center; margin: 0 auto 0 auto; Font Styling using CSS Note: Two major font families: serif and sans-serif; Google fonts. This is another large topic and I will come back to it as needed.  I changed the font of my website to Arial for now. body {     background-color : #c7f6fd ;     font-family : Arial , Helvetica , sans-serif ;   }   h1 {     color : r...

2023 Web Development Bootcamp: Intermediate CSS Part 2 -- Day 6

Image
  I started learning about the CSS box model, the CSS display property, and CSS static and relative positioning. This was a lot of information to absorb( ingest) in one sitting.  While the topic was interesting and is important to master, I decided to just learn by doing.  So I downloaded 2 new photos to display at the top of my website. CSS Images and Relative Positioning Here is the code that I used: .logo {     height : 400px ;     position : relative ;     left : 100px ;       } .team {     height : 400px ;     position : relative ;     left : 150px ;     top : 10px ; } And here is the result: Here is the new page: Note: The trophy photo's width is 100% of the browser screen so this is why it is being pulled across the whole screen. This is my opinion.