A collection of projects demonstrating responsive web design principles and techniques
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Satisfaction Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1 id="title">Customer Satisfaction Survey</h1>
<p id="description">Thank you for taking the time to help us improve our services</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label id="number-label" for="number">Age <span class="clue">(optional)</span></label>
<input type="number" id="number" name="age" min="13" max="120" placeholder="Age">
</div>
<div class="form-group">
<label for="dropdown">Which option best describes your current role?</label>
<select id="dropdown" name="role" required>
<option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="part-time-job">Part Time Job</option>
<option value="self-employed">Self Employed</option>
<option value="prefer-not-to-say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<p>Would you recommend our service to a friend?</p>
<label>
<input name="recommend" value="definitely" type="radio" checked>
Definitely
</label>
<label>
<input name="recommend" value="maybe" type="radio">
Maybe
</label>
<label>
<input name="recommend" value="not-sure" type="radio">
Not sure
</label>
</div>
<div class="form-group">
<p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input name="improvements" value="front-end-projects" type="checkbox">
Front-end Projects
</label>
<label>
<input name="improvements" value="back-end-projects" type="checkbox">
Back-end Projects
</label>
<label>
<input name="improvements" value="data-visualization" type="checkbox">
Data Visualization
</label>
<label>
<input name="improvements" value="forum" type="checkbox">
Forum
</label>
<label>
<input name="improvements" value="additional-courses" type="checkbox">
Additional Courses
</label>
</div>
<div class="form-group">
<p>Any comments or suggestions?</p>
<textarea id="comments" name="comment" placeholder="Enter your comment here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute to Mahatma Gandhi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Mahatma Gandhi</h1>
<p class="subtitle">The Father of the Indian Nation</p>
<figure id="img-div">
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Mahatma-Gandhi%2C_studio%2C_1931.jpg/800px-Mahatma-Gandhi%2C_studio%2C_1931.jpg" alt="Mahatma Gandhi spinning yarn">
<figcaption id="img-caption">Mahatma Gandhi spinning yarn, demonstrating his commitment to self-reliance and the Swadeshi movement</figcaption>
</figure>
<section id="tribute-info">
<h2>Key Moments in Gandhi's Life</h2>
<ul>
<li><strong>1869</strong> - Born in Porbandar, Gujarat, India</li>
<li><strong>1888</strong> - Traveled to London to study law</li>
<li><strong>1893</strong> - Went to South Africa to practice law, where he developed his philosophy of nonviolent resistance</li>
<li><strong>1915</strong> - Returned to India and joined the Indian National Congress</li>
<li><strong>1919</strong> - Launched the Non-Cooperation Movement against British rule</li>
<li><strong>1930</strong> - Led the famous Salt March to protest the British salt tax</li>
<li><strong>1942</strong> - Launched the Quit India Movement demanding immediate independence</li>
<li><strong>1947</strong> - India gained independence from British rule</li>
<li><strong>1948</strong> - Assassinated by Nathuram Godse in New Delhi</li>
</ul>
<blockquote>
<p>"Be the change that you wish to see in the world."</p>
<cite>— Mahatma Gandhi</cite>
</blockquote>
<h3>Learn more about this incredible leader on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Mahatma_Gandhi" target="_blank">Wikipedia entry</a>.
</h3>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R Programming Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>R Programming</header>
<a class="nav-link" href="#Introduction_to_R">Introduction to R</a>
<a class="nav-link" href="#Basic_Syntax">Basic Syntax</a>
<a class="nav-link" href="#Data_Types">Data Types</a>
<a class="nav-link" href="#Control_Structures">Control Structures</a>
<a class="nav-link" href="#Functions">Functions</a>
<a class="nav-link" href="#Data_Frames">Data Frames</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction_to_R">
<header>Introduction to R</header>
<p>R is a programming language and free software environment for statistical computing and graphics supported by the R Foundation for Statistical Computing. It is widely used among statisticians and data miners for developing statistical software and data analysis.</p>
<p>Key features of R include:</p>
<ul>
<li>Effective data handling and storage facility</li>
<li>A suite of operators for calculations on arrays, in particular matrices</li>
<li>A large, coherent, integrated collection of intermediate tools for data analysis</li>
<li>Graphical facilities for data analysis and display</li>
<li>A well-developed, simple and effective programming language</li>
</ul>
<p>R was created by Ross Ihaka and Robert Gentleman at the University of Auckland, New Zealand, and is now developed by the R Development Core Team.</p>
<code>print("Hello, World!")</code>
</section>
<section class="main-section" id="Basic_Syntax">
<header>Basic Syntax</header>
<p>R is an interpreted language which means that commands are executed directly without needing to compile a program.</p>
<p>Basic R syntax includes:</p>
<ul>
<li>Assignment operators: <- or =</li>
<li>Comments start with #</li>
<li>Function calls use parentheses</li>
</ul>
<p>Here are some basic examples:</p>
<code>x <- 5 # Assignment
y = 10 # Alternative assignment
x + y # Addition</code>
<p>R is case-sensitive, so 'Variable' and 'variable' would be two different objects.</p>
<code># This is a comment
my_var <- 42
print(my_var)</code>
</section>
<section class="main-section" id="Data_Types">
<header>Data Types</header>
<p>R has several basic data types:</p>
<ul>
<li>Numeric: decimal numbers (default type for numbers)</li>
<li>Integer: whole numbers</li>
<li>Logical: TRUE or FALSE</li>
<li>Character: strings</li>
<li>Complex: complex numbers</li>
</ul>
<p>You can check the type of a variable using the class() function:</p>
<code>x <- 10.5
class(x) # "numeric"
y <- 10L
class(y) # "integer"
z <- TRUE
class(z) # "logical"</code>
<p>R also has special values:</p>
<code>NA # Not Available/Not Applicable
NULL # Null object
Inf # Infinity
NaN # Not a Number</code>
</section>
<section class="main-section" id="Control_Structures">
<header>Control Structures</header>
<p>Control structures allow you to control the flow of execution of the program. R provides standard control structures similar to other languages:</p>
<p>Conditional statements:</p>
<code># if statement
x <- 5
if (x > 0) {
print("Positive number")
} else if (x < 0) {
print("Negative number")
} else {
print("Zero")
}</code>
<p>Loops:</p>
<code># for loop
for (i in 1:5) {
print(i)
}
# while loop
count <- 1
while (count <= 5) {
print(count)
count <- count + 1
}</code>
<p>R also has vectorized operations that often eliminate the need for explicit loops:</p>
<code>x <- 1:5
y <- x * 2 # Vectorized operation</code>
</section>
<section class="main-section" id="Functions">
<header>Functions</header>
<p>Functions are fundamental building blocks in R. You can create your own functions using the function() function:</p>
<code># Function definition
square <- function(x) {
return(x * x)
}
# Function call
square(5) # Returns 25</code>
<p>Functions can have default arguments:</p>
<code>power <- function(x, exponent = 2) {
return(x ^ exponent)
}
power(3) # Returns 9 (3^2)
power(3, 3) # Returns 27 (3^3)</code>
<p>R has many built-in functions for statistical operations:</p>
<code>mean(c(1, 2, 3, 4, 5)) # Returns 3
sd(c(1, 2, 3, 4, 5)) # Standard deviation
summary(c(1, 2, 3, 4, 5)) # Statistical summary</code>
<p>Anonymous functions (lambdas) are also supported:</p>
<code>sapply(1:5, function(x) x^2) # Returns c(1, 4, 9, 16, 25)</code>
</section>
<section class="main-section" id="Data_Frames">
<header>Data Frames</header>
<p>Data frames are the most important data structure in R for data analysis. They are similar to tables in a database or Excel spreadsheets.</p>
<p>Creating a data frame:</p>
<code># Create a data frame
df <- data.frame(
name = c("Alice", "Bob", "Charlie"),
age = c(25, 30, 35),
score = c(88.5, 92.0, 85.5)
)
# View the data frame
print(df)</code>
<p>Accessing data frame elements:</p>
<code>df$name # Access column
df[1, ] # First row
df[, 2] # Second column
df[2, "age"] # Specific cell</code>
<p>Common operations on data frames:</p>
<code>head(df) # View first few rows
summary(df) # Summary statistics
dim(df) # Dimensions (rows, columns)
names(df) # Column names</code>
<p>R's dplyr package provides a powerful grammar for data manipulation:</p>
<code>library(dplyr)
df %>% filter(age > 25) %>% arrange(desc(score))</code>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOOGEE Rugged Smartphones | Premium Durability</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header id="header">
<div class="logo-container">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Doogee_LOGO.png" alt="DOOGEE Logo">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#video">How It Works</a>
<a class="nav-link" href="#pricing">Pricing</a>
</nav>
</header>
<main>
<section class="hero">
<h1>Premium Rugged Smartphones</h1>
<p>Built to withstand life's toughest challenges</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<input type="submit" id="submit" value="GET STARTED">
</form>
</section>
<section id="features">
<div class="feature">
<div class="icon"><i class="fas fa-shield-alt"></i></div>
<div class="desc">
<h2>Military-Grade Protection</h2>
<p>Our smartphones meet MIL-STD-810G standards for shock, vibration, and extreme temperature resistance.</p>
</div>
</div>
<div class="feature">
<div class="icon"><i class="fas fa-tint"></i></div>
<div class="desc">
<h2>Waterproof Design</h2>
<p>IP68 & IP69K certified protection against water, dust, and high-pressure water jets.</p>
</div>
</div>
<div class="feature">
<div class="icon"><i class="fas fa-battery-full"></i></div>
<div class="desc">
<h2>Massive Battery Life</h2>
<p>Up to 10000mAh battery capacity that lasts for days on a single charge.</p>
</div>
</div>
</section>
<section class="video-container">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ibxa4XzOSW8?si=2iX51DDiwJXRXlhJ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="pricing">
<div class="product">
<div class="product-name">DOOGEE S96 Pro</div>
<h3>$299</h3>
<ul>
<li>6.22" FHD+ Display</li>
<li>Helio G90 Processor</li>
<li>6350mAh Battery</li>
<li>IP68/IP69K Waterproof</li>
</ul>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="product-name">DOOGEE S88 Pro</div>
<h3>$349</h3>
<ul>
<li>6.3" FHD+ Display</li>
<li>Helio P70 Processor</li>
<li>10000mAh Battery</li>
<li>Wireless Charging</li>
</ul>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="product-name">DOOGEE V20</div>
<h3>$399</h3>
<ul>
<li>6.43" AMOLED Display</li>
<li>Dimensity 700 5G</li>
<li>6000mAh Battery</li>
<li>108MP Triple Camera</li>
</ul>
<button class="btn">SELECT</button>
</div>
</section>
</main>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>© 2023 DOOGEE. All rights reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Himanshu Saxena | Portfolio</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<nav id="navbar">
<div class="container">
<a href="#welcome-section">Home</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#experience">Experience</a>
<a href="#contact">Contact</a>
</div>
</nav>
<section id="welcome-section">
<div class="welcome-content">
<h1>Hi, I'm Himanshu Saxena</h1>
<p class="subtitle">Full Stack Developer & Problem Solver</p>
<div class="social-links">
<a href="https://github.com/alan-w-arch" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/Himanshu--Saxena/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="mailto:himanshusaxena71333@gmail.com"><i class="fas fa-envelope"></i></a>
</div>
</div>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="projects-grid">
<div class="project-tile">
<h3>BrainBots Website</h3>
<p>Responsive EdTech website with SEO optimization and modern UI/UX</p>
<a href="https://github.com/alan-w-arch/BrainBots" target="_blank" class="project-link">View Project</a>
</div>
<div class="project-tile">
<h3>Gaming Preferences Analysis</h3>
<p>Data analysis project exploring gaming trends and user preferences</p>
<a href="https://github.com/alan-w-arch/Analysis-on-Gaming-Preferences" target="_blank" class="project-link">View Project</a>
</div>
</div>
</section>
<section id="skills">
<h2>Technical Skills</h2>
<div class="skills-container">
<div class="skill-category">
<h3>Languages</h3>
<ul>
<li>C++</li>
<li>Python</li>
<li>C</li>
<li>R</li>
<li>JavaScript</li>
</ul>
</div>
<div class="skill-category">
<h3>Frameworks</h3>
<ul>
<li>React</li>
<li>Node.js</li>
<li>Express.js</li>
<li>HTML5</li>
<li>CSS3</li>
<li>Tailwind CSS</li>
</ul>
</div>
<div class="skill-category">
<h3>Tools/Platforms</h3>
<ul>
<li>MongoDB</li>
<li>MS SQL Server</li>
<li>Git</li>
<li>Netlify</li>
</ul>
</div>
</div>
</section>
<section id="experience">
<h2>Work Experience</h2>
<div class="experience-item">
<h3>Freelance Web Developer</h3>
<p class="company">BrainBots (EdTech Company)</p>
<p class="duration">Dec 2024</p>
<ul>
<li>Engineered a fully responsive website utilizing HTML, Tailwind CSS, and JavaScript</li>
<li>Optimized SEO and page load speed, slashing bounce rate by 30%</li>
<li>Enhanced mobile responsiveness and cross-browser compatibility, boosting user engagement by 25%</li>
<li>Applied modern UI/UX strategies to streamline user navigation and elevate brand presence</li>
</ul>
</div>
</section>
<section id="contact">
<h2>Get In Touch</h2>
<div class="contact-info">
<p><i class="fas fa-envelope"></i> himanshusaxena71333@gmail.com</p>
<p><i class="fas fa-phone"></i> +91 98157 59234</p>
<a id="profile-link" href="https://github.com/alan-w-arch" target="_blank"><i class="fab fa-github"></i> GitHub Profile</a>
</div>
</section>
<footer>
<p>© 2024 Himanshu Saxena. All rights reserved.</p>
</footer>
</body>
</html>