Day 7,8 ….WebDev Log

August 01, 2023

August 02, 2023


 Hey folks, Jaani Here

I'm writing this, the summary of whatever I've learned in the past two days. As I moved to CSS(Cascading Style Sheet) lectures. Things started getting more interesting. At first, when I tried to learn, I got nothing, literally nothing, but then I went to chatGPT and told it that write some CSS code for my webpage, It wrote that in some file named style.css, and I then inked it top my HTML file, and the result was pretty awesome.

After doing all this stuff, then I went to selectors lecture and tried to understand. The next day I learned about properties and their values, made their notes and applied them on a webpage.

I'm adding a screenshot of the webpage in which chatGPT helped in CSS and the style.css code below



style.css

/* Reset default margin and padding for all elements */
body, h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Set default font styles */
body {
    font-family: Arial, sans-serif;
}

/* Apply styles to the header */
header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

header img {
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    max-width: 100%;
    height: auto;
}

header h1 {
    font-size: 32px;
    margin-top: 10px;
}

header h5 {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* Format the navigation links */
nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

nav a:hover {
    text-decoration: underline;
}

/* Apply styles to the main content sections */
main {
    padding: 20px;
}

main section {
    margin-bottom: 30px;
}

main h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

main p {
    margin-bottom: 10px;
}

/* Apply styles to the founder section */
main section img {
    border-radius: 50%; /* Make the image round */
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}

main section h6 {
    margin-top: 5px;
}

/* Apply styles to the social media handles section */
main section ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

main section ul li {
    margin-right: 10px;
}

/* Add more custom styles as needed */


Best regards

Jaani



#WebDevelopment

#WebDesign

#FrontEndDevelopment

#BackEndDevelopment

#FullStackDevelopment

#JavaScript

#HTML

#CSS

#UIUX

#Coding

#Programming

#WebDeveloper

#CodeNewbie

#WebDevLife

#CodeLife

#TechCommunity

#TechTalks

#DeveloperHumor

#CodeSnippets

#ResponsiveDesign

Comments

Post a Comment

Popular posts from this blog

Day #3 WebDev

 Log 28 July, This is what I've done and learned today, p --> paragraph tag b --> bold tag hr --> tag for horizontal line i --> italic text h1>h2>h3>h4>h5>h6 text size tags <!-- tag for comment --> <small> tag for small letter </small> s --> tag for crossing line on sentence/strike through br -->tag for new paragraph/line <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > woofscode </ title > </ head > < body >     < h1 > Ashish Tetarwal welcomes you here &lt; h1 &gt; </ h1 >     < h2 > Ashish Tetarwal welcomes you here </ h2 >     < h3 > Ashish Tetarwal welcomes you here </ h3 >     < h4 > Ashish Tetarwal welcomes you here ...
Read more

Day 6, July 31

 Hey, Everyone Jaani here, as I proceeded in web dev's HTML last lecture, they taught us how to try to make a structure for our own website using HTML. I had an Idea for making a health website. So I tried it and found it very interesting and a thing upon which I should keep working. I would not suppose to reveal the details of that website now, it could be too early for me to tell y'all ;p  <3 Yeah, but the source code for its basic structure is here, see ya later. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Way to Project Nhp </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < header >         < img src = "C:\Users\Ashish\OneDrive\nhp.jpg" width = "350" alt = ...
Read more